/* ============================================
   NECTO Design System — CSS Custom Properties
   ============================================
   新規UIはこれらの変数を使用すること。
   既存のハードコード値は段階的に移行予定。
   仕様書: docs/design-system/necto.md
   ============================================ */
:root {
  /* --- Colors: Primary (Blue) --- */
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-primary-active: #1e40af;
  --color-primary-light: #3b82f6;
  --color-primary-subtle: #dbeafe;
  --color-primary-bg: #eff6ff;

  /* --- Colors: Danger / Error (Red) --- */
  --color-danger: #ef4444;
  --color-danger-hover: #dc2626;
  --color-danger-subtle: #fee2e2;
  --color-danger-bg: #fef2f2;
  --color-danger-text: #dc2626;

  /* --- Colors: Success (Green) --- */
  --color-success: #22c55e;
  --color-success-hover: #16a34a;
  --color-success-dark: #059669;
  --color-success-subtle: #d1fae5;
  --color-success-bg: #f0fdf4;
  --color-success-text: #065f46;
  --color-line-brand: #06C755;

  /* --- Colors: Warning (Amber) --- */
  --color-warning: #f59e0b;
  --color-warning-subtle: #fef3c7;
  --color-warning-bg: #fffbeb;
  --color-warning-text: #92400e;

  /* --- Colors: Progress (Orange) — 顧客対応「対応中」（外の完了待ち）。要確認の黄色と見分けるため専用 --- */
  --color-progress: #ea580c;
  --color-progress-subtle: #ffedd5;
  --color-progress-text: #c2410c;

  /* --- Colors: Info (Cyan) --- */
  --color-info: #0284c7;
  --color-info-subtle: #e0f2fe;
  --color-info-bg: #f0f9ff;
  --color-info-border: #bae6fd;

  /* --- Text Colors --- */
  --text-primary: #111827;
  --text-secondary: #374151;
  --text-tertiary: #6b7280;
  --text-muted: #9ca3af;
  --text-inverse: #ffffff;

  /* --- Background Colors --- */
  --bg-body: #f5f5f5;
  --bg-surface: #ffffff;
  --bg-muted: #f9fafb;
  --bg-subtle: #f3f4f6;
  --bg-hover: #f3f4f6;
  --bg-active: #e5e7eb;
  --bg-nav: #111827;
  --bg-input: #f8fafc;

  /* --- Border Colors --- */
  --border-default: #e5e7eb;
  --border-light: #f1f5f9;
  --border-medium: #d1d5db;
  --border-input: #d1d5db;
  --border-focus: #2563eb;

  /* --- Typography --- */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Hiragino Sans', sans-serif;
  --font-size-xs: 10px;
  --font-size-sm: 11px;
  --font-size-base: 12px;
  --font-size-md: 13px;
  --font-size-lg: 14px;
  --font-size-xl: 16px;
  --font-size-2xl: 18px;
  --font-size-3xl: 20px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.3;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;

  /* --- Spacing (4px base) --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* --- Border Radius --- */
  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --radius-full: 9999px;

  /* --- Shadows --- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.15);
  --shadow-focus: 0 0 0 2px rgba(37, 99, 235, 0.2);

  /* --- Transitions --- */
  --transition-fast: 0.1s ease;
  --transition-normal: 0.15s ease;
  --transition-slow: 0.25s ease;

  /* --- Z-Index Scale --- */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-column-menu: 500;
  --z-tooltip: 600;
  --z-fullscreen: 800;
  --z-modal-backdrop: 900;
  --z-modal: 1000;
  --z-overlay: 1100;
  --z-toast: 1200;

  /* --- Layout --- */
  --sidebar-width: 180px;
  --sidebar-collapsed: 36px;
  --topnav-height: 40px;
  --toolbar-height: 36px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font-family);
  background: var(--bg-body);
  height: 100vh;
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.impersonation-banner {
  z-index: calc(var(--z-sticky) + 1);
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 40px;
  padding: var(--space-2) var(--space-4);
  border-bottom: 2px solid var(--color-warning);
  background: var(--color-warning-subtle);
  color: var(--color-warning-text);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
}
.impersonation-banner[hidden] { display: none; }
.impersonation-banner-text { line-height: var(--line-height-normal); }
.impersonation-stop-btn {
  padding: var(--space-1) var(--space-3);
  border: 1px solid currentColor;
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--color-warning-text);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}
.impersonation-stop-btn:hover { background: var(--color-warning-bg); }
.impersonation-stop-btn:disabled { cursor: wait; opacity: 0.6; }

/* === アナウンスバー === */
.announcement-bar {
  display: none;
  align-items: center;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  flex-shrink: 0;
  position: relative;
  min-height: 32px;
  overflow: hidden;
  transition: background 0.3s, color 0.3s;
}
.announcement-bar-content {
  flex: 1;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  transition: opacity 0.3s;
}
.ann-icon {
  margin-right: 6px;
  flex-shrink: 0;
}
.ann-text {
  display: inline-block;
  white-space: nowrap;
}
.ann-text.ann-scroll {
  animation: ann-scroll-anim var(--ann-scroll-duration, 10s) linear infinite;
}
.ann-text.ann-link { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.announcement-bar-content:hover .ann-text.ann-scroll {
  animation-play-state: paused;
}
@keyframes ann-scroll-anim {
  0% { transform: translateX(0); }
  10% { transform: translateX(0); }
  90% { transform: translateX(calc(-100% + 200px)); }
  100% { transform: translateX(calc(-100% + 200px)); }
}
.announcement-bar-dots {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 10px;
  flex-shrink: 0;
}
.ann-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.3;
}
.ann-dot.active {
  opacity: 0.8;
}
.announcement-bar-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: inherit;
  opacity: 0.6;
  padding: 0 4px;
  flex-shrink: 0;
  line-height: 1;
}
.announcement-bar-close:hover {
  opacity: 1;
}

/* アナウンス管理カード */
.announcement-form-card {
  padding: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #f9fafb;
}

/* === トップナビバー（BOSS風ダークデザイン） === */
.mode-bar {
  display: flex;
  align-items: stretch;
  background: #1f2937;
  flex-shrink: 0;
  height: 42px;
}
.mode-bar-logo {
  display: flex;
  align-items: center;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.mode-btn {
  padding: 0 18px;
  border: none;
  background: transparent;
  font-size: 13px;
  cursor: pointer;
  color: #d1d5db;
  transition: all 0.15s;
  border-bottom: 3px solid transparent;
  display: flex;
  align-items: center;
}
.mode-btn[hidden] { display: none; }
.mode-btn .sidebar-item-badge { margin-left: 6px; }
.mode-btn:hover {
  color: #fff;
  background: rgba(255,255,255,0.06);
}
.mode-btn.active {
  color: #1f2937;
  background: #fff;
  font-weight: 600;
  border-bottom-color: #dc2626;
  border-radius: 0;
}

/* === レイアウト: ナビ下の横分割 === */
.app-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* === 左サイドバー === */
.app-sidebar {
  width: 180px;
  background: #f9fafb;
  border-right: 1px solid #e5e7eb;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  font-size: 12px;
  transition: width 0.2s ease;
  position: relative;
}
.app-sidebar.collapsed {
  width: 36px;
}
.sidebar-toggle-btn {
  position: absolute;
  top: 6px;
  right: 2px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: #b0b7c3;
  cursor: pointer;
  font-size: 12px;
  z-index: 2;
  border-radius: 3px;
  transition: color 0.1s, background 0.1s;
  opacity: 0;
}
.app-sidebar:hover .sidebar-toggle-btn,
.app-sidebar.collapsed .sidebar-toggle-btn { opacity: 1; }
.sidebar-toggle-btn:hover { color: #374151; background: #e5e7eb; }
.app-sidebar.collapsed .sidebar-toggle-btn {
  position: static;
  width: 100%;
  height: 32px;
  border-radius: 0;
  opacity: 1;
  font-size: 14px;
  color: #9ca3af;
}
.app-sidebar-nav { flex: 1; padding: 8px 0; overflow-y: auto; }
.app-sidebar.collapsed .app-sidebar-nav { display: none; }
.app-sidebar.collapsed .sidebar-user { display: none !important; }
.sidebar-item {
  display: block;
  width: 100%;
  padding: 7px 16px;
  border: none;
  background: none;
  text-align: left;
  font-size: 12px;
  color: #374151;
  cursor: pointer;
  transition: background 0.1s;
  white-space: nowrap;
}
.sidebar-item:hover { background: #e5e7eb; }
.sidebar-item.active {
  background: #dbeafe;
  color: #1d4ed8;
  font-weight: 600;
}
.sidebar-item.has-badge { display: flex; align-items: center; gap: 6px; }
.sidebar-item.has-badge .sidebar-item-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-item-badge {
  flex: 0 0 auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  background: var(--color-warning-bg, #fffbeb);
  color: var(--color-warning-text, #92400e);
  border: 1px solid var(--color-warning-subtle, #fde68a);
}
.sidebar-item-badge.badge-alert {
  background: var(--color-danger-hover);
  color: var(--text-inverse);
  border-color: var(--color-danger-hover);
}
.sidebar-group-label {
  display: block;
  width: 100%;
  padding: 6px 16px 3px;
  border: none;
  background: none;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.sidebar-group-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.sidebar-group-toggle .sidebar-item-badge { margin-left: auto; }

.sidebar-group-toggle:hover {
  background: #eef2f7;
  color: #6b7280;
}
.sidebar-group-toggle.open {
  color: #6b7280;
}
.sidebar-group-chevron {
  width: 10px;
  flex: 0 0 10px;
  font-size: 9px;
  color: #9ca3af;
}
.sidebar-group-text {
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-group-children {
  overflow: hidden;
}
.sidebar-child {
  padding-left: 28px;
  font-size: 11.5px;
}
/* LINEアカウントのサイドバー階層（各店舗を最上位に配置） */
.sidebar-line-account.sidebar-group-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-primary, #111827);
  text-transform: none;
  letter-spacing: 0;
  padding: 8px 14px;
}
.sidebar-line-account .sidebar-group-text::before {
  content: "L";
  display: inline-grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 4px;
  background: #06c755;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  margin-right: 6px;
  vertical-align: middle;
}
.sidebar-sns-account.sidebar-group-label {
  padding: 8px 14px;
  color: var(--text-primary, #111827);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.sidebar-sns-account .sidebar-group-text::before {
  display: inline-grid;
  width: 15px;
  height: 15px;
  place-items: center;
  margin-right: 6px;
  border-radius: 4px;
  background: linear-gradient(135deg, #f59e0b, #e11d48, #7c3aed);
  color: #fff;
  content: "I";
  font-size: 9px;
  font-weight: 700;
  vertical-align: middle;
}
.sidebar-item { overflow: hidden; text-overflow: ellipsis; }
.sidebar-group-text { max-width: 100%; }
/* --- サイドバー並べ替えモード --- */
.sidebar-reorder-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background: #fef3c7;
  border-bottom: 1px solid #fcd34d;
  font-size: 11px;
  color: #92400e;
  font-weight: 600;
}
.sidebar-reorder-bar button {
  padding: 3px 10px;
  font-size: 11px;
  background: #1d4ed8;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.sidebar-reorder-bar button:hover { background: #1e40af; }
.sidebar-reorder-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  margin: 4px 8px;
  font-size: 11px;
  color: #6b7280;
  background: none;
  border: 1px dashed #d1d5db;
  border-radius: 4px;
  cursor: pointer;
  width: calc(100% - 16px);
  justify-content: center;
}
.sidebar-reorder-btn:hover { background: #f3f4f6; color: #374151; border-color: #9ca3af; }
.sidebar-nav-reordering .sidebar-item { cursor: default; }
.sidebar-nav-reordering .sidebar-item:hover { background: none; }
.sidebar-nav-reordering .sidebar-item.active { background: #dbeafe; }
.sidebar-drag-handle {
  display: inline-flex;
  align-items: center;
  cursor: grab;
  color: #9ca3af;
  margin-right: 4px;
  font-size: 12px;
  user-select: none;
  flex-shrink: 0;
}
.sidebar-drag-handle:hover { color: #374151; }
.sidebar-drag-handle:active { cursor: grabbing; }
.sidebar-drag-wrapper {
  display: flex;
  align-items: center;
}
.sidebar-drag-wrapper.dragging { opacity: 0.4; }
.sidebar-drop-indicator {
  height: 2px;
  background: #3b82f6;
  margin: 0 8px;
  border-radius: 1px;
  transition: opacity 0.1s;
}
.sidebar-user {
  padding: 10px 14px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #6b7280;
}
.sidebar-user-name { font-weight: 600; color: #374151; }
.sidebar-logout-btn {
  margin-left: auto;
  background: none;
  border: none;
  color: #dc2626;
  font-size: 11px;
  cursor: pointer;
}
.sidebar-logout-btn:hover { text-decoration: underline; }
.sidebar-session-btn {
  flex-basis: 100%;
  margin-top: 4px;
  padding: 0;
  background: none;
  border: none;
  text-align: left;
  color: #6b7280;
  font-size: 10px;
  cursor: pointer;
}
.sidebar-session-btn:hover { text-decoration: underline; }

/* === メインコンテンツ === */
.app-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* チャットエリア */
.chat-area {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.message {
  max-width: 90%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.6;
  word-wrap: break-word;
  white-space: pre-wrap;
}
.message.user {
  align-self: flex-end;
  background: #2563eb;
  color: white;
  border-bottom-right-radius: 4px;
}
.message.assistant {
  align-self: flex-start;
  background: white;
  color: #1f2937;
  border: 1px solid #e5e7eb;
  border-bottom-left-radius: 4px;
}
.message.system {
  align-self: center;
  background: #fef3c7;
  color: #92400e;
  font-size: 12px;
  border-radius: 8px;
  text-align: center;
}

/* 出典 */
.sources {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #e5e7eb;
  font-size: 11px;
  color: #6b7280;
}
.sources span {
  display: inline-block;
  background: #f3f4f6;
  padding: 2px 6px;
  border-radius: 4px;
  margin: 2px 4px 2px 0;
}
.source-tag {
  display: inline-flex !important;
  align-items: center;
  gap: 0;
  padding: 0 6px 0 0 !important;
  overflow: hidden;
}
.source-channel {
  color: white;
  padding: 2px 5px;
  margin-right: 4px;
  border-radius: 3px 0 0 3px;
  font-size: 10px;
  font-weight: 600;
}
.knowledge-source-channel {
  color: white !important;
  background: #e02b2b !important;
  padding: 2px 5px;
  margin-right: 4px;
  border-radius: 3px 0 0 3px;
  font-size: 10px;
  font-weight: 600;
}
.knowledge-source-tag {
  color: #1a1a2e !important;
  background: #f5e6e6 !important;
}
.knowledge-source-tag:hover {
  background: #f0d4d4 !important;
}
.knowledge-sources {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px dashed #d1fae5;
}
.knowledge-tag {
  display: inline-block;
  background: #d1fae5;
  color: #065f46;
  padding: 2px 6px;
  border-radius: 4px;
  margin: 2px 4px 2px 0;
  font-size: 10px;
  text-decoration: none;
}
a.knowledge-tag:hover {
  background: #a7f3d0;
}

/* フィードバックボタン */
.feedback-area {
  margin-top: 6px;
  padding-top: 6px;
  display: flex;
  gap: 6px;
  align-items: center;
}
.fb-btn {
  background: none;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.15s;
}
.fb-btn:hover { background: #f3f4f6; }
.fb-good:hover { border-color: #22c55e; background: #f0fdf4; }
.fb-bad:hover { border-color: #ef4444; background: #fef2f2; }
.fb-done {
  font-size: 12px;
  color: #22c55e;
}
.fb-reason-form {
  width: 100%;
}
.fb-reason-input {
  width: 100%;
  padding: 6px 8px;
  font-size: 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  resize: vertical;
  font-family: inherit;
}
.fb-submit-btn, .fb-cancel-btn {
  padding: 4px 12px;
  font-size: 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.fb-submit-btn {
  background: #3b82f6;
  color: white;
}
.fb-cancel-btn {
  background: #e5e7eb;
  color: #374151;
}

/* フィードバック対話 */
.fb-dialog {
  width: 100%;
  margin-top: 8px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 8px;
  background: #fafafa;
  max-height: 300px;
  overflow-y: auto;
}
.fb-dialog-msg {
  margin-bottom: 6px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.5;
}
.fb-dialog-msg.user {
  background: #dbeafe;
  text-align: right;
}
.fb-dialog-msg.assistant {
  background: #f3f4f6;
}
.fb-dialog-input {
  width: 100%;
  padding: 6px 8px;
  font-size: 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  resize: none;
  font-family: inherit;
  margin-top: 4px;
}
.fb-dialog-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.fb-save-btn {
  padding: 4px 12px;
  font-size: 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background: #22c55e;
  color: white;
}
.fb-save-btn:disabled {
  background: #9ca3af;
  cursor: not-allowed;
}
.fb-dialog-send-btn {
  padding: 4px 12px;
  font-size: 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background: #3b82f6;
  color: white;
}
.fb-duplicate-box {
  margin-top: 8px;
  padding: 8px;
  border: 1px solid #f59e0b;
  border-radius: 6px;
  background: #fffbeb;
  font-size: 12px;
}
.fb-duplicate-box .existing-content {
  background: #fff;
  padding: 6px;
  border-radius: 4px;
  margin: 6px 0;
  font-size: 11px;
  color: #374151;
}
.fb-duplicate-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.fb-merge-btn {
  padding: 4px 10px;
  font-size: 11px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background: #f59e0b;
  color: white;
}
.fb-skip-btn {
  padding: 4px 10px;
  font-size: 11px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background: #e5e7eb;
  color: #374151;
}

/* ローディング */
.loading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  color: #6b7280;
  font-size: 13px;
}
.loading-dots {
  display: flex;
  gap: 4px;
}
.loading-dots span {
  width: 6px;
  height: 6px;
  background: #9ca3af;
  border-radius: 50%;
  animation: bounce 1.4s infinite;
}
.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes bounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

/* 入力エリア */
.input-area {
  background: white;
  border-top: 1px solid #e5e7eb;
  padding: 12px;
  display: flex;
  gap: 8px;
}
.input-area textarea {
  flex: 1;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  font-family: inherit;
  resize: none;
  min-height: 38px;
  max-height: 100px;
  outline: none;
}
.input-area textarea:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37,99,235,0.1);
}
.send-btn {
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 0 16px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.send-btn:hover { background: #1d4ed8; }
.send-btn:disabled {
  background: #9ca3af;
  cursor: not-allowed;
}

/* === AIパネル・タイムライン === */
.ai-panel {
  display: none;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
}
.ai-panel.active {
  display: flex;
}
.ai-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ai-sub-page {
  flex: 1;
  overflow: hidden;
  display: none;
  flex-direction: column;
}
.ai-sub-page.active {
  display: flex;
  flex-direction: column;
}
/* セッション協調: ツールバー/タブを固定し、本文だけをスクロールさせる領域 */
.coord-body {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.ai-timeline {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fafbfc;
}
.tl-placeholder {
  color: #9ca3af;
  font-size: 13px;
  font-style: italic;
  text-align: center;
  padding: 32px 16px;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.tl-item { animation: fadeInUp 0.3s ease-out; }
.tl-time {
  font-size: 11px;
  color: #9ca3af;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 4px;
}

/* User message */
.tl-user {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 8px;
}
.tl-user .tl-bubble {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
  padding: 10px 16px;
  border-radius: 18px 18px 4px 18px;
  max-width: 65%;
  font-size: 14px;
  line-height: 1.5;
  box-shadow: 0 1px 3px rgba(59,130,246,0.3);
  word-wrap: break-word;
}

/* Thinking */
.tl-thinking {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
}
.tl-think-icon { font-size: 13px; }
.tl-think-text {
  color: #9ca3af;
  font-size: 12px;
  font-style: italic;
}
@keyframes pulse { 0%,100%{opacity:0.5} 50%{opacity:1} }
.tl-thinking { animation: pulse 2s ease-in-out infinite; }

/* Tool execution - compact inline */
.tl-tool {
  padding: 1px 0;
}
.tl-tool-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #64748b;
}
.tl-tool-icon { font-size: 12px; }
.tl-tool-name {
  font-family: 'SF Mono', Monaco, monospace;
  font-size: 11px;
  color: #475569;
}
.tl-tool-badge {
  background: #e2e8f0;
  color: #64748b;
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
}
.tl-tool-badge.done {
  background: #dcfce7;
  color: #166534;
}

/* AI response */
.tl-assistant {
  display: flex;
  align-items: flex-start;
}
.tl-assistant .tl-content {
  background: white;
  border: 1px solid #e5e7eb;
  padding: 9px 14px;
  border-radius: 4px 16px 16px 16px;
  max-width: 85%;
  font-size: 13px;
  line-height: 1.6;
  color: #1e293b;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  word-wrap: break-word;
}
.tl-assistant .tl-content strong { font-weight: 600; }

/* デュアル回答（シンプル/詳細切替） */
.tl-dual-answer { padding: 0 !important; overflow: hidden; }
.tl-dual-tabs {
  display: flex;
  border-bottom: 1px solid #e5e7eb;
  background: #f8fafc;
  border-radius: 4px 16px 0 0;
}
.tl-dual-tab {
  flex: 1;
  padding: 6px 0;
  border: none;
  background: none;
  font-size: 12px;
  font-weight: 500;
  color: #94a3b8;
  cursor: pointer;
  transition: color 0.15s, box-shadow 0.15s;
}
.tl-dual-tab:hover { color: #475569; }
.tl-dual-tab.active {
  color: #2563eb;
  box-shadow: inset 0 -2px 0 #2563eb;
}
.tl-dual-body {
  display: none;
  padding: 9px 14px;
}
.tl-dual-body.active { display: block; }

/* システムAGT申請ボタン（回答の下） */
.tl-sagt-apply-btn {
  display: block;
  width: calc(100% - 20px);
  margin: 8px 10px 10px;
  padding: 6px 14px;
  font-size: 12px;
  color: #3b82f6;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}
.tl-sagt-apply-btn:hover {
  color: #fff;
  border-color: #3b82f6;
  background: #3b82f6;
}

/* システムAGT申請ステータス表示 */
.tl-sagt-status-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(59, 130, 246, 0.06);
  border: 1px solid rgba(59, 130, 246, 0.25);
  border-radius: 8px;
  font-size: 12px;
  color: #3b82f6;
}

/* システムAGT申請プレビューカード */
.tl-sagt-preview-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  max-width: 100%;
}
.tl-sagt-preview-header {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 12px;
}
.tl-sagt-field {
  margin-bottom: 10px;
}
.tl-sagt-field label {
  display: block;
  font-size: 11px;
  color: #64748b;
  margin-bottom: 4px;
  font-weight: 500;
}
.tl-sagt-field input,
.tl-sagt-field textarea {
  width: 100%;
  padding: 8px 10px;
  font-size: 13px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #fff;
  color: #1e293b;
  box-sizing: border-box;
  font-family: inherit;
  resize: vertical;
}
.tl-sagt-field input:focus,
.tl-sagt-field textarea:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.tl-sagt-preview-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 12px;
}
.tl-sagt-cancel {
  padding: 6px 14px;
  font-size: 12px;
  color: #64748b;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}
.tl-sagt-cancel:hover {
  background: #f1f5f9;
}
.tl-sagt-submit {
  padding: 6px 14px;
  font-size: 12px;
  color: #fff;
  background: #3b82f6;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.15s;
}
.tl-sagt-submit:hover {
  background: #2563eb;
}
.tl-sagt-submit:disabled {
  background: #93c5fd;
  cursor: not-allowed;
}
.tl-sagt-success {
  padding: 10px 14px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  color: #166534;
  font-size: 13px;
}

/* Markdown table */
.tl-table {
  border-collapse: collapse;
  font-size: 13px;
  margin: 8px 0;
  width: 100%;
}
.tl-table th {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  padding: 6px 10px;
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  color: #475569;
}
.tl-table td {
  border: 1px solid #e2e8f0;
  padding: 5px 10px;
  font-size: 12px;
}
.tl-table tr:nth-child(even) { background: #f8fafc; }

.tl-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}
.tl-loading-dots {
  display: flex;
  gap: 4px;
}
.tl-loading-dots span {
  width: 6px;
  height: 6px;
  background: #93c5fd;
  border-radius: 50%;
  animation: loadingBounce 1.4s ease-in-out infinite both;
}
.tl-loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.tl-loading-dots span:nth-child(2) { animation-delay: -0.16s; }
@keyframes loadingBounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}
.tl-loading-text {
  font-size: 12px;
  color: #93c5fd;
}


.tl-reply-block {
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 8px;
  margin: 8px 0;
  overflow: hidden;
}
.tl-reply-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  background: #e0f2fe;
  font-size: 12px;
  font-weight: 600;
  color: #0369a1;
}
.tl-reply-copy {
  background: #0284c7;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 3px 12px;
  font-size: 11px;
  cursor: pointer;
  transition: background 0.2s;
}
.tl-reply-copy:hover { background: #0369a1; }
.tl-reply-body {
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.7;
  color: #1e293b;
  white-space: pre-wrap;
}


/* Error */
.tl-error {
  display: flex;
  gap: 8px;
  align-items: center;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 8px 12px;
  color: #dc2626;
  font-size: 13px;
}

/* Input area */
.ai-input-area {
  display: flex;
  gap: 8px;
  padding: 12px 20px;
  background: white;
  border-top: 1px solid #f1f5f9;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.03);
  flex-shrink: 0;
}
.ai-input-area textarea {
  flex: 1;
  resize: none;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 14px;
  font-family: inherit;
  line-height: 1.5;
  outline: none;
  transition: border-color 0.2s;
  min-height: 44px;
  max-height: 200px;
  overflow-y: hidden;
}
.ai-input-area textarea:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}
.ai-input-area button {
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 12px;
  width: 44px;
  height: 44px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: background 0.2s;
  flex-shrink: 0;
}
.ai-input-area button:hover { background: #2563eb; }
.ai-input-area button:disabled { background: #93c5fd; cursor: not-allowed; }

/* エージェントツールバー */
.agent-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-bottom: 1px solid #f1f5f9;
  background: white;
  flex-shrink: 0;
}
.agent-toolbar-btn {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  color: #475569;
  cursor: pointer;
}
.agent-toolbar-btn:hover { background: #f1f5f9; }
.agent-new-session-btn {
  flex-shrink: 0;
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
}
.agent-new-session-btn:hover { background: #1d4ed8; }
.agent-dropdown { position: relative; }
.agent-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  z-index: 100;
  min-width: 320px;
  max-height: 300px;
  overflow-y: auto;
}
.agent-session-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.agent-session-table td {
  padding: 8px 12px;
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
}
.agent-session-table tr:hover { background: #f8fafc; }
.agent-session-table .session-date { color: #9ca3af; white-space: nowrap; width: 90px; }
.agent-session-table .session-title { color: #1e293b; }
.agent-load-more-btn {
  width: 100%;
  padding: 8px;
  border: none;
  background: #f8fafc;
  color: #3b82f6;
  font-size: 11px;
  cursor: pointer;
  border-top: 1px solid #e2e8f0;
}
.agent-load-more-btn:hover { background: #eff6ff; }

.ai-report-area {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-wrap;
}

/* ウェルカム画面 */
.welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 32px;
  text-align: center;
  color: #6b7280;
}
.welcome h2 {
  font-size: 18px;
  color: #1f2937;
  margin-bottom: 8px;
}
.welcome p {
  font-size: 13px;
  margin-bottom: 16px;
}
.welcome-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 280px;
}
.welcome-btn {
  padding: 12px 16px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: white;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
}
.welcome-btn:hover {
  border-color: #2563eb;
  background: #eff6ff;
}
.welcome-btn strong {
  display: block;
  color: #1f2937;
  margin-bottom: 2px;
}
.welcome-btn span {
  color: #6b7280;
  font-size: 12px;
}

/* 管理画面 */
.admin-panel {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: none;
}
.admin-panel.active {
  display: block;
}
.admin-section {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 12px;
}
.admin-section h3 {
  font-size: 14px;
  color: #1f2937;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f3f4f6;
}
/* ── 同期データパネル共通スタイル ── */
.sync-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 8px;
}
.sync-panel-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  border-bottom: none;
  padding-bottom: 0;
}
.sync-summary-card {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border: 1px solid #bae6fd;
  border-radius: 8px;
}
.sync-summary-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sync-summary-label {
  font-size: 10px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.sync-summary-value {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
}
.sync-badge-confirmed {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 600;
  background: #d1fae5;
  color: #065f46;
}
.sync-badge-provisional {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 600;
  background: #fef3c7;
  color: #92400e;
}
.sync-table {
  width: 100%;
  font-size: 12px;
  border-collapse: separate;
  border-spacing: 0;
}
.sync-table thead th {
  background: #f8fafc;
  color: #475569;
  font-weight: 600;
  font-size: 11px;
  padding: 8px 10px;
  text-align: left;
  border-bottom: 2px solid #e2e8f0;
  position: sticky;
  top: 0;
  z-index: 1;
}
.sync-table tbody tr {
  transition: background 0.15s;
}
.sync-table tbody tr:nth-child(even) {
  background: #f8fafc;
}
.sync-table tbody tr:hover {
  background: #eff6ff;
}
.sync-table tbody td {
  padding: 7px 10px;
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
}
.sync-table .cell-right {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.sync-table .cell-muted {
  font-size: 11px;
  color: #94a3b8;
}
/* AGT実行基盤（runtime policy）管理UI */
/* ── AGT実行基盤: タブ ── */
.agt-rt-tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: 2px solid var(--border-default);
  margin: var(--space-3) 0 var(--space-4);
}
.agt-rt-tab {
  padding: var(--space-2) var(--space-5);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--text-tertiary);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
}
.agt-rt-tab:hover { color: var(--text-secondary); }
.agt-rt-tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.agt-rt-panel { display: none; }
.agt-rt-panel.active { display: block; }

/* ── AGT実行基盤: 一覧（sticky 3段ヘッダー） ── */
.agt-rt-scroll {
  max-height: calc(100vh - 260px);
  overflow: auto;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
}
.agt-rt-table {
  width: 100%;
  min-width: 1780px;
  font-size: var(--font-size-sm);
  border-collapse: separate;
  border-spacing: 0;
  /* col の幅をそのまま効かせる。auto だと中身の長さで勝手に配分され、
     説明文の長い列だけが極端に広がる（2026-09-06 に実際そうなった）。 */
  table-layout: fixed;
}
.agt-rt-table th, .agt-rt-table td {
  padding: 6px 8px;
  text-align: left;
  white-space: nowrap;
  vertical-align: middle;
  /* 列幅を狭めたときに中身がはみ出さない */
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 補助テキスト（理由・実効provider・スクリプト名）は折り返す。
   1行のままだと列を押し広げる。 */
.agt-rt-table td .agt-rt-effective,
.agt-rt-table td .agt-rt-agt-name,
.agt-rt-table td .agt-rt-use-sub {
  white-space: normal;
  overflow-wrap: anywhere;
}
/* ℹ️ 押したときだけ出す補足説明。
   表の中に長文を置くと列が押し広げられるので、普段は畳んでおく。 */
.agt-rt-info {
  background: none;
  border: none;
  padding: 0 0 0 3px;
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  opacity: .7;
  vertical-align: middle;
}
.agt-rt-info:hover { opacity: 1; }
/* 表の overflow に切られないよう、画面に対して固定で出す */
.agt-rt-info-pop {
  position: fixed;
  z-index: 60;
  max-width: 320px;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--text-secondary);
  white-space: normal;
}
.agt-rt-info-title {
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}
.agt-rt-info-body + .agt-rt-info-body { margin-top: 2px; }

/* 列幅調整のつまみ（列の境界にある縦線）
   ⚠️ th の外へはみ出させない（right を負にすると、隣の th に隠れて掴めなくなる）。
      sticky な th 自身が位置の基準になるので、relative の指定は足さない（sticky を壊す）。 */
.agt-rt-col-resizer {
  position: absolute;
  top: 0;
  right: 0;
  width: 9px;
  height: 100%;
  cursor: col-resize;
  z-index: 7;
  /* つかめる範囲は広く、見た目の線は細く */
  background: linear-gradient(to right, transparent 4px, var(--border-default) 4px, var(--border-default) 5px, transparent 5px);
}
.agt-rt-col-resizer:hover,
.agt-rt-col-resizer.is-dragging {
  background: linear-gradient(to right, transparent 3px, var(--color-primary) 3px, var(--color-primary) 6px, transparent 6px);
}
.agt-rt-resizing, .agt-rt-resizing * { cursor: col-resize !important; user-select: none; }
.agt-rt-width-reset {
  background: none;
  border: none;
  padding: 0;
  margin-left: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-primary);
  cursor: pointer;
  text-decoration: underline;
}
.agt-rt-table thead tr.agt-rt-h-name th {
  position: sticky;
  padding-right: 12px;
  top: 0;
  z-index: 6;
  background: var(--bg-subtle);
  color: var(--text-secondary);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-xs);
  border-bottom: 1px solid var(--border-default);
}
.agt-rt-table thead tr.agt-rt-h-filter th {
  position: sticky;
  top: 29px;
  z-index: 6;
  background: var(--bg-subtle);
  border-bottom: 2px solid var(--border-default);
  padding: 4px 8px 6px;
}
.agt-rt-table thead tr.agt-rt-h-bulk th {
  position: sticky;
  top: 66px;
  z-index: 5;
  background: var(--color-primary-bg);
  border-bottom: 2px solid var(--color-primary-subtle);
  padding: 6px 8px;
}
.agt-rt-table tbody td {
  border-bottom: 1px solid var(--border-light);
  color: var(--text-secondary);
}
.agt-rt-table tbody tr:nth-child(even) { background: var(--bg-subtle); }
.agt-rt-table tbody tr:hover { background: var(--color-primary-bg); }
.agt-rt-table tbody tr.agt-rt-picked {
  background: var(--color-primary-bg);
  box-shadow: inset 3px 0 0 var(--color-primary);
}
/* ファースト／FALLBACK の区切り */
.agt-rt-sep { border-left: 2px solid var(--border-default); }
.agt-rt-grp {
  font-size: 9px;
  font-weight: var(--font-weight-bold);
  color: var(--text-muted);
  letter-spacing: .05em;
}
/* 旧: col クラスで幅指定 → colgroup の inline style（つまみで変えられる）へ移行済み */
/* 列いっぱいに広げて左端を揃える */
.agt-rt-table .agt-rt-select, .agt-rt-table .agt-rt-input {
  width: 100%;
  min-width: 0; /* 列を狭めたときにセレクトが列幅を押し広げない */
}
.agt-rt-sort {
  background: none;
  border: none;
  padding: 0 0 0 3px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 9px;
  line-height: 1;
}
.agt-rt-sort:hover { color: var(--color-primary); }
.agt-rt-sort.on { color: var(--color-primary); }
.agt-rt-filter {
  width: 100%;
  padding: 3px 6px;
  font-size: var(--font-size-xs);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text-secondary);
}
.agt-rt-ck { width: 14px; height: 14px; cursor: pointer; }
.agt-rt-agt-name { font-weight: var(--font-weight-semibold); color: var(--text-primary); }
.agt-rt-bulk-label { font-size: var(--font-size-xs); color: var(--color-primary-active); white-space: nowrap; }
.agt-rt-ghost {
  background: var(--bg-surface);
  color: var(--color-primary);
  border: 1px solid var(--color-primary-subtle);
}

/* 使用量（1日あたり） */
.agt-rt-use { text-align: right; font-variant-numeric: tabular-nums; }
.agt-rt-use-main { font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); color: var(--text-secondary); }
.agt-rt-use-zero { color: var(--text-muted); font-weight: var(--font-weight-normal); }
.agt-rt-use-sub { font-size: 9px; color: var(--text-muted); margin-top: 1px; }
/* ローカルモデルの実績（AIの枠は使わないので、枠の数字と見分けられる色にする） */
.agt-rt-use-local { color: var(--color-info); }
.agt-rt-use-bar { height: 3px; border-radius: 2px; background: var(--border-default); margin-top: 3px; overflow: hidden; }
.agt-rt-use-bar i { display: block; height: 100%; background: var(--color-primary); }
.agt-rt-use-hot .agt-rt-use-main { color: var(--color-danger-text); }
.agt-rt-use-hot .agt-rt-use-bar i { background: var(--color-danger); }

/* 専用プログラム（ローカル） */
.agt-rt-badge-prog {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  font-size: 9px;
  font-weight: var(--font-weight-semibold);
  background: var(--color-info-subtle);
  color: var(--color-info);
  vertical-align: middle;
}
.agt-rt-prog-state {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: var(--radius-full);
  font-size: 9px;
  font-weight: var(--font-weight-semibold);
}
.agt-rt-prog-state.ok { background: var(--color-success-subtle); color: var(--color-success-text); }
.agt-rt-prog-state.run { background: var(--color-info-subtle); color: var(--color-info); }
.agt-rt-prog-state.warn { background: var(--color-warning-subtle); color: var(--color-warning-text); }
.agt-rt-prog-state.err { background: var(--color-danger-subtle); color: var(--color-danger-text); }
.agt-rt-effective-warn { color: var(--color-warning-text); }
.agt-rt-prog-models { display: flex; flex-direction: column; gap: 3px; }
.agt-rt-prog-model { display: flex; align-items: center; gap: 5px; }
.agt-rt-prog-role { font-size: 9px; color: var(--text-muted); width: 34px; flex-shrink: 0; }
.agt-rt-prog-script { font-size: 9px; }
.agt-rt-legend { margin-top: var(--space-3); line-height: var(--line-height-relaxed); }

/* ── AGT実行基盤: 設定タブ ── */
.agt-rt-set-list { display: flex; flex-direction: column; max-width: 900px; }
.agt-rt-set-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-1);
  border-bottom: 1px solid var(--border-light);
}
.agt-rt-set-main { flex: 1; min-width: 0; }
.agt-rt-set-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin-bottom: 3px;
}
.agt-rt-set-desc { font-size: var(--font-size-sm); color: var(--text-tertiary); line-height: var(--line-height-relaxed); }
.agt-rt-set-sub { font-size: var(--font-size-xs); color: var(--text-muted); margin-top: 6px; line-height: var(--line-height-normal); }
.agt-rt-set-sub-inline { margin-left: var(--space-2); }
.agt-rt-set-models { color: var(--text-tertiary); }
.agt-rt-stale { color: var(--color-warning-text); font-weight: var(--font-weight-semibold); }
.agt-rt-set-ctl { flex-shrink: 0; padding-top: 2px; }
/* トグル */
.agt-rt-toggle { position: relative; display: inline-block; width: 42px; height: 24px; }
.agt-rt-toggle input { opacity: 0; width: 0; height: 0; }
.agt-rt-toggle span {
  position: absolute;
  inset: 0;
  background: var(--border-medium);
  border-radius: var(--radius-full);
  transition: background var(--transition-fast);
  cursor: pointer;
}
.agt-rt-toggle span::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: var(--bg-surface);
  border-radius: 50%;
  transition: transform var(--transition-fast);
  box-shadow: var(--shadow-sm);
}
.agt-rt-toggle input:checked + span { background: var(--color-success); }
.agt-rt-toggle input:checked + span::before { transform: translateX(18px); }
.agt-rt-toggle input:disabled + span { opacity: .5; cursor: not-allowed; }

.agt-rt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  gap: 12px;
}
.agt-rt-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.agt-rt-runtime-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}
.agt-rt-runtime-badge small {
  font-size: 10px;
  font-weight: 400;
}
.agt-rt-runtime-on {
  background: var(--color-success-subtle);
  color: var(--color-success-text);
}
.agt-rt-runtime-off {
  background: var(--color-warning-subtle);
  color: var(--color-warning-text);
}
.agt-rt-runtime-unknown {
  background: var(--color-danger-subtle);
  color: var(--color-danger-text);
}
.agt-rt-master-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.agt-rt-master-toggle input {
  margin: 0;
  cursor: pointer;
}
.agt-rt-master-toggle input:disabled {
  cursor: not-allowed;
}
.agt-rt-master-on {
  background: var(--color-success-subtle);
  color: var(--color-success-text);
}
.agt-rt-master-off {
  background: var(--color-danger-subtle);
  color: var(--color-danger-text);
}
.agt-rt-note {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 12px;
  line-height: 1.5;
}
.agt-rt-note.agt-rt-master-error,
.agt-rt-note.agt-rt-claude-off-note {
  color: var(--color-danger-text);
}

.agt-rt-note.agt-rt-provider-cooldown {
  border: 1px solid #f59e0b;
  border-radius: 6px;
  padding: 10px 12px;
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  font-weight: 600;
}

.agt-rt-provider-cooldown span {
  display: block;
  margin-top: 4px;
  font-weight: 400;
}
.agt-rt-table td, .agt-rt-table th {
  vertical-align: middle;
}
.agt-rt-select, .agt-rt-input {
  padding: 4px 8px;
  font-size: 12px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
}
.agt-rt-model { width: 130px; }
.agt-rt-timeout { width: 80px; }
.agt-rt-input:disabled {
  background: #f3f4f6;
  color: var(--text-muted);
}
.agt-rt-row.agt-rt-dirty td {
  background: var(--color-warning-bg);
}
.agt-rt-effective {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.3;
}
.agt-rt-effective-ok { color: var(--color-success-text); }
.agt-rt-effective-warn { color: var(--color-warning-text); }
.agt-rt-effective-danger { color: var(--color-danger-text); }
/* SKU単位設定: 「オプションあり×単価0」で保存を止めたときのメッセージ */
.sku-option-fee-error { color: var(--color-danger-text); font-weight: 600; }
.agt-rt-effective-muted { color: var(--text-muted); }
.agt-rt-status {
  font-size: 11px;
  margin-left: 6px;
}
.agt-rt-status.agt-rt-ok { color: var(--color-success-text); }
.agt-rt-status.agt-rt-err { color: var(--color-danger-text); }
.sync-btn-reload {
  padding: 5px 14px;
  font-size: 11px;
  font-weight: 600;
  color: #3b82f6;
  background: white;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}
.sync-btn-reload:hover {
  background: #eff6ff;
  border-color: #93c5fd;
}
/* RPP アコーディオン */
.rpp-month-row {
  cursor: pointer;
  user-select: none;
}
.rpp-month-row:hover {
  background: #dbeafe !important;
}
.rpp-month-row td:first-child::before {
  content: "\25B6";
  display: inline-block;
  margin-right: 6px;
  font-size: 9px;
  color: #64748b;
  transition: transform 0.2s;
}
.rpp-month-row.expanded td:first-child::before {
  transform: rotate(90deg);
}
.rpp-month-row td {
  font-weight: 600;
  background: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
}
.rpp-day-row {
  display: none;
}
.rpp-day-row.visible {
  display: table-row;
}
.rpp-day-row td {
  padding-left: 28px;
  font-size: 11px;
}
/* 会話履歴パネル */
.history-panel {
  background: white;
  border-bottom: 1px solid #e5e7eb;
  max-height: 280px;
  overflow-y: auto;
  flex-shrink: 0;
}
.history-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  border-bottom: 1px solid #f3f4f6;
  position: sticky;
  top: 0;
  background: white;
}
.history-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #9ca3af;
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
}
.history-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid #f9fafb;
  gap: 6px;
}
.history-item:hover { background: #f9fafb; }
.history-item-body {
  flex: 1;
  min-width: 0;
  cursor: pointer;
}
.history-item-title {
  font-size: 12px;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.history-item-date {
  font-size: 11px;
  color: #9ca3af;
  margin-top: 2px;
}
.history-resume-btn {
  font-size: 11px;
  padding: 2px 8px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: white;
  color: #374151;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.history-resume-btn:hover { background: #f3f4f6; }
.history-del-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #d1d5db;
  font-size: 13px;
  padding: 2px;
  flex-shrink: 0;
}
.history-del-btn:hover { color: #ef4444; }
.history-empty {
  padding: 20px 12px;
  text-align: center;
  font-size: 12px;
  color: #9ca3af;
}

/* マニュアルURL管理 */
.ms-url-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 220px;
  overflow-y: auto;
}
.ms-url-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 5px;
  font-size: 11px;
}
.ms-url-text {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #1d4ed8;
}
.ms-url-title {
  flex-shrink: 0;
  max-width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #6b7280;
}
.ms-del-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  font-size: 13px;
  padding: 0 2px;
  line-height: 1;
}
.ms-del-btn:hover { color: #dc2626; }
.ms-empty {
  font-size: 12px;
  color: #9ca3af;
  text-align: center;
  padding: 12px 0;
}
.ms-status {
  font-size: 11px;
  min-height: 16px;
  color: #6b7280;
}
.ms-status.ok { color: #059669; }
.ms-status.err { color: #dc2626; }
.ms-crawl-progress {
  margin-bottom: 8px;
  padding: 8px 10px;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 6px;
  font-size: 11px;
}
.ms-crawl-bar-bg {
  background: #e0f2fe;
  border-radius: 3px;
  height: 5px;
  margin: 5px 0;
}
.ms-crawl-bar {
  background: #0284c7;
  height: 5px;
  border-radius: 3px;
  width: 0%;
  transition: width 0.4s;
}
.ms-crawl-url {
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 3px;
}
.ms-crawl-stop-btn {
  background: none;
  border: 1px solid #dc2626;
  color: #dc2626;
  border-radius: 4px;
  padding: 1px 7px;
  font-size: 10px;
  cursor: pointer;
}
.ms-crawl-stop-btn:hover { background: #fee2e2; }
.ms-fetched { color: #059669; font-size: 10px; flex-shrink: 0; }

.sync-loading {
  color: #9ca3af;
  font-size: 12px;
  padding: 8px 0;
}
.sync-btn {
  margin-top: 12px;
  width: 100%;
  padding: 10px;
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
}
.sync-btn:hover { background: #1d4ed8; }
.sync-btn:disabled {
  background: #9ca3af;
  cursor: not-allowed;
}
.sync-table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f3f4f6;
}
.sync-table-header h3 {
  font-size: 14px;
  color: #1f2937;
  margin: 0;
  padding: 0;
  border: none;
}
.sync-refresh-btn {
  background: none;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 2px 10px;
  font-size: 11px;
  color: #6b7280;
  cursor: pointer;
}
.sync-refresh-btn:hover { background: #f3f4f6; }
.sync-table {
  width: 100%;
  border-collapse: collapse;
}
#dataSyncView {
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}
.sync-table th {
  text-align: left;
  font-size: 10px;
  color: #9ca3af;
  font-weight: 500;
  padding: 0 6px 6px;
  border-bottom: 1px solid #e5e7eb;
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
}
.sync-table th:last-child { text-align: right; }
.sync-table td {
  padding: 7px 6px;
  border-bottom: 1px solid #f3f4f6;
  font-size: 12px;
  vertical-align: middle;
}
.sync-table tr:last-child td { border-bottom: none; }
/* 外部リクエスト統計 */
.request-stats { margin-bottom: 16px; }
.request-stats-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid #f3f4f6;
}
.request-stats-header h3 { font-size: 14px; color: #1f2937; margin: 0; padding: 0; border: none; }
.request-stats-summary {
  display: flex; gap: 16px; margin-bottom: 10px; font-size: 12px; color: #6b7280;
}
.request-stats-summary .stat-value { font-weight: 600; color: #1f2937; }
.request-bar-list { display: flex; flex-direction: column; gap: 4px; }
.request-bar-row {
  display: flex; align-items: center; gap: 8px; font-size: 11px;
}
.request-bar-label { width: 80px; text-align: right; color: #6b7280; flex-shrink: 0; }
.request-bar-track { flex: 1; height: 14px; background: #f3f4f6; border-radius: 3px; overflow: hidden; }
.request-bar-fill { height: 100%; border-radius: 3px; min-width: 2px; }
.request-bar-count { width: 50px; font-size: 11px; color: #374151; }
.request-detail-toggle {
  background: none; border: none; font-size: 11px; color: #6366f1;
  cursor: pointer; padding: 4px 0; margin-top: 4px;
}
.request-detail-toggle:hover { text-decoration: underline; }
.request-detail-table { display: none; margin-top: 8px; }
.request-detail-table.show { display: block; }
.request-detail-table table { width: 100%; border-collapse: collapse; font-size: 11px; }
.request-detail-table th { text-align: left; color: #9ca3af; padding: 3px 6px; border-bottom: 1px solid #e5e7eb; }
.request-detail-table td { padding: 3px 6px; border-bottom: 1px solid #f3f4f6; color: #374151; }
.sync-channel { font-weight: 500; color: #1f2937; white-space: nowrap; }
.sync-type-cell { color: #6b7280; font-size: 11px; white-space: nowrap; }
.sync-daily-col { text-align: center; font-size: 10px; padding: 0 2px !important; min-width: 28px; }
.sync-daily-col.hidden-col { display: none; }
th.sync-daily-col { color: #9ca3af; font-weight: 500; }
td.sync-daily-col { font-size: 13px; }
#toggleDailyColsBtn.active { background: #eff6ff; border-color: #6366f1; color: #6366f1; }
.sync-detail-cell { color: #374151; }
.sync-time-cell { color: #9ca3af; font-size: 11px; white-space: nowrap; }
.sync-next-cell { color: #9ca3af; font-size: 11px; white-space: nowrap; }
.sync-action-cell { text-align: right; white-space: nowrap; }
.sort-th { cursor: pointer; user-select: none; }
.sort-th:hover { color: #6b7280; }
.sort-icon { font-size: 9px; margin-left: 2px; opacity: 0.5; }
.sort-th.asc .sort-icon { opacity: 1; }
.sort-th.asc .sort-icon::after { content: "▲"; }
.sort-th.desc .sort-icon::after { content: "▼"; }
.sort-th:not(.asc):not(.desc) .sort-icon::after { content: "⇅"; }
.sync-btn-sm {
  padding: 3px 10px;
  font-size: 11px;
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.sync-btn-sm:hover { background: #1d4ed8; }
.sync-btn-sm:disabled { background: #9ca3af; cursor: not-allowed; font-size: 10px; }
.sync-env-badge { font-size: 9px; padding: 1px 6px; border-radius: 3px; font-weight: 600; }
.sync-env-badge.env-workers { background: #fef3c7; color: #92400e; }
.sync-env-badge.env-gcp { background: #dbeafe; color: #1e40af; }
.sync-env-badge.env-local { background: var(--color-success-subtle); color: var(--color-success-text); }
.sync-env-badge.env-gas { background: #e0e7ff; color: #3730a3; }
.sync-method-badge { font-size: 9px; padding: 1px 6px; border-radius: 3px; font-weight: 600; }
.sync-method-badge.method-api { background: #d1fae5; color: #065f46; }
.sync-method-badge.method-cli { background: var(--color-primary-subtle); color: var(--color-primary-active); }
.sync-method-badge.method-web { background: #fce7f3; color: #9d174d; }
.sync-method-badge.method-gas { background: #e0e7ff; color: #3730a3; }

.factory-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 10px;
}

.factory-table-scroll {
  overflow-x: auto;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}

.factory-table {
  width: 100%;
  min-width: 880px;
  border-collapse: collapse;
  font-size: 11px;
}

.factory-table th {
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-muted);
  color: var(--text-secondary);
  font-weight: 700;
}

.factory-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-primary);
  vertical-align: top;
}

.factory-row {
  cursor: pointer;
}

.factory-row:hover {
  background: var(--bg-hover);
}

.factory-code-cell {
  font-weight: 700;
  white-space: nowrap;
}

.factory-cell-center {
  text-align: center;
}

.factory-subtle-cell {
  color: var(--text-tertiary);
  font-size: 10px;
}

.factory-active-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  font-weight: 700;
}

.factory-active-badge.is-active {
  background: var(--color-success-bg);
  color: var(--color-success-text);
}

.factory-active-badge.is-inactive {
  background: var(--bg-muted);
  color: var(--text-muted);
}

.factory-empty-state,
.factory-error-state {
  padding: 16px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 12px;
}

.factory-error-state {
  color: var(--color-danger-text);
}

.factory-modal {
  max-width: 640px;
}

.factory-modal-title {
  margin: 0;
  font-size: var(--font-size-lg);
  color: var(--text-primary);
}

.factory-modal-close {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: 18px;
}

.factory-modal-close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.factory-modal-body {
  display: grid;
  gap: 10px;
}

.factory-form-row {
  display: grid;
  gap: 4px;
}

.factory-form-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
}

.factory-required {
  margin-left: 3px;
  color: var(--color-danger-text);
}

.factory-form-control {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: 12px;
}

textarea.factory-form-control {
  min-height: 82px;
  resize: vertical;
}

.factory-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  font-size: 12px;
}

.factory-secondary-btn {
  padding: 3px 10px;
  border: 1px solid var(--border-default);
  border-radius: 4px;
  background: var(--bg-muted);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 11px;
}

.factory-secondary-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.factory-delete-btn {
  margin-right: auto;
  padding: 3px 10px;
  border: 1px solid var(--color-danger);
  border-radius: 4px;
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
  cursor: pointer;
  font-size: 11px;
}

.factory-delete-btn:hover {
  background: var(--color-danger-subtle);
  border-color: var(--color-danger-hover);
}

.factory-delete-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.sync-btn-auth { background: #ef4444; margin-left: 4px; }
.sync-btn-auth:hover { background: #dc2626; }
.yahoo-auth-btn { margin-left: 4px; font-size: 10px; padding: 2px 8px; border-radius: 3px; color: #fff; border: none; cursor: pointer; background: #ef4444; }
.yahoo-auth-btn.auth-ok { background: #22c55e; }
.yahoo-auth-btn.auth-ok:hover { background: #16a34a; }
.yahoo-auth-btn.auth-warn { background: #ef4444; }
.yahoo-auth-btn.auth-warn:hover { background: #dc2626; }
.yahoo-auth-btn.auth-unknown { background: #9ca3af; }
.yahoo-auth-expiry { font-size: 9px; color: #6b7280; margin-top: 1px; text-align: right; }
.yahoo-auth-expiry.expiry-warn { color: #ef4444; font-weight: bold; }
/* 同期セクションヘッダー */
tr.sync-section-header td {
  padding: 10px 12px 4px;
  font-size: 11px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid #e5e7eb;
  background: #fff;
}
tr.sync-section-header:first-child td { padding-top: 0; }
/* 同期ログアコーディオン */
tr.sync-data-row { cursor: pointer; }
tr.sync-data-row:hover { background: #f9fafb; }
tr.sync-data-row.expanded { background: #eff6ff; }
tr.sync-log-panel td { padding: 0 !important; background: #f8fafc; }
.sync-log-wrap { padding: 8px 12px 10px; }
.sync-log-filters { display: flex; gap: 4px; margin-bottom: 6px; }
.sync-log-filter-btn {
  padding: 2px 8px; font-size: 10px; border: 1px solid #d1d5db;
  border-radius: 10px; background: white; cursor: pointer; color: #6b7280;
}
.sync-log-filter-btn.active { background: #2563eb; color: white; border-color: #2563eb; }
.sync-log-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.sync-log-table th { text-align: left; color: #9ca3af; padding: 3px 6px; border-bottom: 1px solid #e5e7eb; font-weight: 500; }
.sync-log-table td { padding: 3px 6px; border-bottom: 1px solid #f3f4f6; color: #374151; }
.sync-log-table .log-success { color: #059669; }
.sync-log-table .log-warning { color: #d97706; }
.sync-log-table .log-error { color: #dc2626; }
.sync-log-error-cell { max-width: 220px; }
.sync-log-error-scroll { overflow-x: auto; white-space: nowrap; max-width: 220px; font-size: 10px; color: #dc2626; scrollbar-width: thin; }
.sync-log-error-scroll::-webkit-scrollbar { height: 4px; }
.sync-log-error-scroll::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 2px; }
.sync-log-more-btn {
  display: block; width: 100%; margin-top: 6px; padding: 4px;
  font-size: 11px; color: #6b7280; background: white; border: 1px solid #e5e7eb;
  border-radius: 4px; cursor: pointer; text-align: center;
}
.sync-log-more-btn:hover { background: #f3f4f6; }
.sync-log-empty { color: #9ca3af; font-size: 11px; padding: 8px 0; text-align: center; }
.sync-log-stats { font-size: 10px; color: #9ca3af; margin-top: 4px; }
/* Chatworkルーム管理カード */
.room-manager-card {
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 10px 12px;
  margin-top: 10px;
}
.room-manager-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.room-manager-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.room-manager-chevron {
  font-size: 10px;
  color: #6b7280;
  line-height: 1;
}
.room-manager-title {
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
}
.room-manager-body {
  margin-top: 8px;
}
/* 登録済みルーム: チップ（横並び） */
.room-chip-container { display: flex; flex-wrap: wrap; gap: 5px; padding: 2px 0; }
.room-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 3px 6px 3px 9px;
  font-size: 11px;
  color: #374151;
  max-width: 160px;
}
.room-chip-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.room-chip-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: #9ca3af;
  padding: 0;
  line-height: 1;
  font-size: 14px;
  flex-shrink: 0;
}
.room-chip-remove:hover { color: #ef4444; }
/* 追加可能ルーム: 縦リスト（既存） */
.room-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid #f3f4f6;
  font-size: 12px;
}
.room-list-item:last-child { border-bottom: none; }
.room-list-name { color: #374151; }
.room-list-meta { color: #9ca3af; font-size: 11px; margin-left: 4px; }
.room-list-empty { color: #9ca3af; font-style: italic; font-size: 12px; padding: 4px 0; }
.room-section-label {
  font-size: 11px;
  color: #6b7280;
  font-weight: 500;
  margin: 8px 0 4px;
  padding-top: 8px;
  border-top: 1px solid #e5e7eb;
}
.btn-danger-sm {
  padding: 2px 8px;
  font-size: 11px;
  background: #fee2e2;
  color: #dc2626;
  border: 1px solid #fca5a5;
  border-radius: 4px;
  cursor: pointer;
}
.btn-danger-sm:hover { background: #fecaca; }
.btn-add-sm {
  padding: 2px 8px;
  font-size: 11px;
  background: #d1fae5;
  color: #065f46;
  border: 1px solid #6ee7b7;
  border-radius: 4px;
  cursor: pointer;
}
.btn-add-sm:hover { background: #a7f3d0; }
.btn-add-sm:disabled { background: #e5e7eb; color: #9ca3af; border-color: #d1d5db; cursor: not-allowed; }

/* 一括承認バー */
.bulk-approve-bar {
  padding: 8px 12px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.bulk-approve-btn {
  flex: 1;
  padding: 10px;
  background: #22c55e;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.bulk-approve-btn:hover { background: #16a34a; }
.bulk-approve-btn:disabled {
  background: #9ca3af;
  cursor: not-allowed;
}

/* アコーディオン */
.accordion-section { border: 1px solid #e5e7eb; border-radius: 8px; margin-bottom: 8px; overflow: hidden; }
.accordion-header { display: flex; align-items: center; padding: 12px 16px; background: #f9fafb; cursor: pointer; font-weight: 600; font-size: 14px; gap: 8px; user-select: none; }
.accordion-header:hover { background: #f3f4f6; }
.accordion-arrow { margin-left: auto; font-size: 10px; color: #9ca3af; }
.accordion-body { display: none; padding: 12px 16px; }
.accordion-section.open .accordion-body { display: block; }
.accordion-badge { background: #ef4444; color: white; font-size: 11px; padding: 1px 7px; border-radius: 10px; font-weight: 600; }
.accordion-badge:empty { display: none; }
/* DB一覧テーブル */
.db-overview-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.db-overview-table th { background: #f3f4f6; padding: 6px 8px; text-align: left; font-weight: 600; color: #374151; border-bottom: 2px solid #e5e7eb; white-space: nowrap; }
.db-overview-table td { padding: 5px 8px; border-bottom: 1px solid #f3f4f6; vertical-align: top; }
.db-overview-table tr:hover td { background: #f9fafb; }
.db-overview-table .db-table-list { color: #6b7280; font-family: monospace; font-size: 10px; }
.db-overview-table .db-tool-chip { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 10px; margin: 1px 2px; background: #e0e7ff; color: #3730a3; }
.db-overview-table .db-schema-link { color: #2563eb; cursor: pointer; text-decoration: underline; font-size: 10px; }
.db-overview-table .db-schema-link:hover { color: #1d4ed8; }
.db-overview-table .db-no-schema { color: #9ca3af; font-style: italic; font-size: 10px; }
/* プロンプト管理用 */
.prompt-category-header { font-size: 13px; font-weight: 700; color: #374151; padding: 8px 0 4px; border-bottom: 1px solid #e5e7eb; margin-bottom: 4px; }
.prompt-item { border: 1px solid #e5e7eb; border-radius: 6px; overflow: hidden; }
.prompt-item-header { display: flex; align-items: center; padding: 8px 12px; background: #f9fafb; cursor: pointer; font-size: 12px; gap: 6px; user-select: none; }
.prompt-item-header:hover { background: #f3f4f6; }
.prompt-item-header .arrow { font-size: 9px; color: #9ca3af; transition: transform 0.15s; }
.prompt-item.open .prompt-item-header .arrow { transform: rotate(90deg); }
.prompt-item-body { display: none; padding: 8px 12px; background: #fff; }
.prompt-item.open .prompt-item-body { display: block; }
.prompt-item-name { font-weight: 600; flex: 1; }
.prompt-modified-dot { width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; display: none; }
.prompt-item.modified .prompt-modified-dot { display: inline-block; }
.prompt-textarea { width: 100%; min-height: 120px; resize: vertical; border: 1px solid #d1d5db; border-radius: 4px; padding: 8px; font-family: monospace; font-size: 11px; line-height: 1.5; box-sizing: border-box; }
.prompt-textarea:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37,99,235,.15); }
.prompt-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.prompt-char-count { font-size: 10px; color: #9ca3af; }
.prompt-meta { font-size: 10px; color: #9ca3af; margin-top: 4px; }
.prompt-save-btn { padding: 4px 14px; border: none; background: #2563eb; color: #fff; border-radius: 4px; font-size: 11px; cursor: pointer; }
.prompt-save-btn:hover { background: #1d4ed8; }
.prompt-save-btn:disabled { background: #9ca3af; cursor: default; }
.prompt-reset-btn { padding: 4px 14px; border: 1px solid #d1d5db; background: #fff; color: #374151; border-radius: 4px; font-size: 11px; cursor: pointer; }
.prompt-reset-btn:hover { background: #f3f4f6; }
.prompt-reset-btn:disabled { color: #d1d5db; cursor: default; }
.review-card {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px;
}
.review-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.review-category {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
}
.review-category.image_ocr { background: #dbeafe; color: #1e40af; }
.review-category.feedback_correction { background: #fef3c7; color: #92400e; }
.review-category.ai_suggestion { background: #ede9fe; color: #5b21b6; }
.review-category.chatwork_extraction { background: #d1fae5; color: #065f46; }
.review-title {
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
}
.review-image { margin: 8px 0; }
.review-image img {
  display: block;
  max-width: 100%;
  max-height: 300px;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  cursor: pointer;
}
.review-data-edit {
  display: block;
  width: 100%;
  font-size: 12px;
  font-family: inherit;
  color: #374151;
  background: #f9fafb;
  padding: 8px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  margin: 8px 0;
  white-space: pre-wrap;
  min-height: 80px;
  max-height: 300px;
  overflow-y: auto;
  resize: vertical;
  line-height: 1.5;
}
.review-data-edit:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}
.review-context {
  font-size: 11px;
  color: #6b7280;
  margin-bottom: 8px;
}
.review-actions {
  display: flex;
  gap: 8px;
}
.review-actions button {
  flex: 1;
  padding: 8px;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  font-weight: 500;
}
.review-approve { background: #22c55e; color: white; }
.review-approve:hover { background: #16a34a; }
.review-skip { background: #e5e7eb; color: #374151; }
.review-skip:hover { background: #d1d5db; }
.review-reject { background: #ef4444; color: white; }
.review-reject:hover { background: #dc2626; }
.review-empty {
  text-align: center;
  color: #9ca3af;
  font-size: 13px;
  padding: 40px 0;
}
.review-stats {
  display: flex;
  gap: 12px;
  margin-bottom: 4px;
}
.review-stat {
  font-size: 12px;
  color: #6b7280;
}
.review-stat strong {
  color: #1f2937;
}

/* デバッグパネル */
.debug-toggle {
  margin-top: 6px;
  background: none;
  border: none;
  color: #9ca3af;
  font-size: 11px;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}
.debug-toggle:hover { color: #6b7280; }
.debug-toggle .arrow {
  display: inline-block;
  transition: transform 0.2s;
  font-size: 9px;
}
.debug-toggle.open .arrow { transform: rotate(90deg); }
.debug-panel {
  display: none;
  margin-top: 6px;
  padding: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 11px;
  line-height: 1.5;
  color: #475569;
  max-height: 300px;
  overflow-y: auto;
}
.debug-panel.open { display: block; }
.debug-row {
  display: flex;
  gap: 8px;
  padding: 3px 0;
  border-bottom: 1px solid #f1f5f9;
}
.debug-row:last-child { border-bottom: none; }
.debug-step {
  flex-shrink: 0;
  font-weight: 600;
  color: #334155;
  min-width: 140px;
}
.debug-detail {
  color: #64748b;
  word-break: break-all;
}

/* 統合顧客対応パネル */
.customer-support-panel {
  display: none;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}
.customer-support-panel.active { display: flex; }

/* サブタブバー */
.sub-tab-bar {
  display: none !important;
}
.sub-tab-btn {
  padding: 5px 14px;
  border: 1px solid #d1d5db;
  background: #fff;
  font-size: 12px;
  cursor: pointer;
  color: #6b7280;
  border-radius: 14px;
  transition: all 0.15s;
}
.sub-tab-btn.active {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
  font-weight: 600;
}

/* サブパネル */
.sub-panel {
  display: none;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  gap: 12px;
}
.sub-panel.active { display: flex; }

/* お客様への返金台帳。仕入返金の画面とは視覚・語彙とも分離する。 */
#customerRefundsSubPanel {
  min-height: 0;
  overflow: hidden;
  padding: 0;
  gap: 0;
}

.customer-refunds-root {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.customer-refunds-domain-note {
  margin: var(--space-2) var(--space-3);
}

.customer-refunds-toolbar {
  height: auto;
  min-height: var(--toolbar-height);
  flex-wrap: wrap;
}

.customer-refunds-toolbar .input[type="search"] {
  min-width: 180px;
}

.customer-refunds-root > .table-container {
  flex: 1;
  min-height: 0;
  border-right: 0;
  border-left: 0;
  border-radius: 0;
}

/* 表のセル内に置くツールバー。table-layout:fixed で列幅が固定のため、
   はみ出して押せなくなるのを防ぐ（横スクロールもできない構造のため折り返す）。 */
.toolbar.cs-case-cell-toolbar {
  height: auto;
  flex-wrap: wrap;
  padding: 0;
  gap: var(--space-1);
  background: transparent;
  border-bottom: none;
}

/* 宿題を「いま自動で閉じられない理由」。バッジの下に小さく添える。
   ⚠️ 表の列幅は固定なので、折り返さないと途中で切れて理由が読めなくなる。 */
.cs-case-close-blocker {
  width: 100%;
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
  text-overflow: clip;
  overflow: visible;
}

/* 列幅（table-layout:fixed なので th に幅を与える）。
   実測（1728px幅・サイドバー展開時）で表の表示領域は約1490px。
   「約束」「次の対応」に各210px前後を残すため、他の8列は合計1060pxに収める。
   操作列のボタンは .cs-case-cell-toolbar が折り返すので、幅を詰めても押せなくならない。 */
.cs-case-board-table th:last-child,
.cs-case-board-table td:last-child {
  width: 200px;
}
.cs-case-board-table th:nth-child(1) { width: 150px; }
.cs-case-board-table th:nth-child(2) { width: 100px; }
.cs-case-board-table th:nth-child(3) { width: 130px; }
.cs-case-board-table th:nth-child(4) { width: 90px; }
.cs-case-board-table th:nth-child(5) { width: 110px; }
.cs-case-board-table th:nth-child(6) { width: 130px; }
.cs-case-board-table th:nth-child(9) { width: 150px; }
.cs-case-board-table td {
  vertical-align: top;
}

/* 「約束」「次の対応」に読める幅を残すための下限（他8列 1060px ＋ この2列に各190px）。
   画面がこれより狭いときは横スクロールで読む。
   ⚠️ 下限は枠（.table-container）側に与えること。表（width:100%）は枠の幅に追随する。
      枠を width:max-content にすると、表が「1行に収まる幅」まで際限なく広がり折り返さなくなる。 */
.cs-case-board-container {
  min-width: 1440px;
}

/* 「約束」「次の対応」の本文。
   ⚠️ 共通の .table td は1行で切る（nowrap + ellipsis）ため、そのままだと途中で「…」になり読めない。
      このセルだけ折り返しを許し、中の div を2行までに抑える（続きはホバーの title で全文が出る）。
   ⚠️ td 自体に display:-webkit-box を当てないこと（テーブルのセルでなくなり列がずれる）。 */
.cs-case-board-table td.cs-case-long-text {
  white-space: normal;
  text-overflow: clip;
  text-align: left;
}
/* 窓口のように「語彙が決まっているのに列幅へ収まらない」セル。
   切り詰めると『インスタコメント』『取引先メール』がどの窓口か読めなくなるので折り返す。 */
.cs-case-board-table td.cs-case-wrap-cell {
  white-space: normal;
  text-overflow: clip;
  overflow-wrap: anywhere;
}
.cs-case-board-table .cs-case-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  line-height: 1.5;
}

.customer-refunds-table th:nth-child(1) { width: 14%; }
.customer-refunds-table th:nth-child(2) { width: 8%; }
.customer-refunds-table th:nth-child(3) { width: 12%; }
.customer-refunds-table th:nth-child(4),
.customer-refunds-table th:nth-child(5) { width: 9%; }
.customer-refunds-table th:nth-child(6) { width: 12%; }
.customer-refunds-table th:nth-child(7) { width: 10%; }
.customer-refunds-table th:nth-child(8),
.customer-refunds-table th:nth-child(9) { width: 13%; }

.customer-refunds-row-actions .btn + .btn {
  margin-left: var(--space-1);
}

.customer-refunds-order-check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}

/* 050電話IVR 着信一覧 */
#phoneInquiriesSubPanel {
  min-height: 0;
  overflow: hidden;
  padding: 0;
  gap: 0;
}

.phone-inquiries-root {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.toolbar.phone-inquiries-toolbar {
  height: auto;
  min-height: var(--toolbar-height);
  flex-wrap: wrap;
}

.phone-inquiries-period-buttons {
  display: flex;
  gap: var(--space-1);
}

.phone-inquiries-forward-panel {
  margin: var(--space-3);
}

.phone-inquiries-forward-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.phone-inquiries-forward-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.phone-inquiries-forward-note {
  font-size: var(--font-size-sm);
}

.phone-inquiries-forward-error {
  margin-top: var(--space-3);
}

.phone-inquiries-summary {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3);
  flex-wrap: wrap;
  background: var(--bg-muted);
  border-bottom: 1px solid var(--border-default);
}

.phone-inquiries-summary-card {
  min-width: 140px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.phone-inquiries-summary-label {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}

.phone-inquiries-summary-value {
  color: var(--text-primary);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
}

.phone-inquiries-table-container {
  flex: 1;
  min-height: 0;
  border-right: 0;
  border-left: 0;
  border-radius: 0;
}

.phone-inquiries-table-container[hidden] {
  display: none;
}

.phone-inquiries-table {
  min-width: 1040px;
}

.phone-inquiries-table th:nth-child(1) { width: 14%; }
.phone-inquiries-table th:nth-child(2) { width: 15%; }
.phone-inquiries-table th:nth-child(3) { width: 31%; }
.phone-inquiries-table th:nth-child(4) { width: 8%; }
.phone-inquiries-table th:nth-child(5) { width: 11%; }
.phone-inquiries-table th:nth-child(6) { width: 11%; }
.phone-inquiries-table th:nth-child(7) { width: 10%; }

.phone-inquiries-table td.phone-inquiries-customer-cell {
  text-align: left;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.phone-inquiries-customer-match,
.phone-inquiries-customer-list li {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.phone-inquiries-customer-list {
  margin: var(--space-1) 0 0;
  padding-left: var(--space-4);
}

.phone-inquiries-customer-list li + li {
  margin-top: var(--space-1);
}

.phone-inquiries-customer-meta,
.phone-inquiries-muted {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.phone-inquiries-badge-neutral {
  background: var(--bg-subtle);
  color: var(--text-tertiary);
}

.phone-inquiries-error {
  margin: var(--space-3);
}

.customer-refunds-order-check .alert {
  flex: 1;
}

.customer-refunds-modal[hidden],
.customer-refunds-order-check .alert[hidden],
.customer-refunds-modal .form-field[hidden] {
  display: none;
}

.customer-refunds-modal h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-lg);
}

.customer-refunds-modal form {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

/* CS返信定型文 管理UI */
#csReplyTemplatesSubPanel {
  min-height: 0;
  overflow: hidden;
  padding: 0;
}

.csrt-root {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  width: 100%;
  height: 100%;
  min-height: 0;
  background: var(--bg-body);
}

.csrt-sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--border-default);
  background: var(--bg-surface);
}

.csrt-search {
  padding: var(--space-3);
  border-bottom: 1px solid var(--border-default);
}

.csrt-search .input { width: 100%; }

.csrt-template-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-2) 0 var(--space-5);
}

.csrt-category {
  padding: 11px var(--space-4) 4px;
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.03em;
}

.csrt-template {
  width: 100%;
  padding: 7px var(--space-4);
  border: 0;
  border-left: 2px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--font-size-base);
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
}

.csrt-template:hover { background: var(--bg-muted); }

.csrt-template.is-selected {
  border-left-color: var(--color-primary);
  background: var(--color-primary-bg);
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
}

.csrt-list-empty.empty-state {
  padding: var(--space-6) var(--space-3);
  font-size: var(--font-size-sm);
}

.csrt-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.csrt-header {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-3);
  padding: 10px var(--space-5);
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-surface);
}

.csrt-title {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

.csrt-spacer { margin-left: auto; }

.csrt-save-note {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.csrt-channel-bar {
  display: flex;
  flex: none;
  align-items: center;
  gap: 2px;
  padding: 0 var(--space-5);
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-surface);
}

.csrt-channel-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px 8px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-tertiary);
  font: inherit;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

.csrt-channel-tab:hover { color: var(--text-primary); }

.csrt-channel-tab.is-selected {
  border-bottom-color: var(--color-primary);
  color: var(--color-primary);
}

.csrt-channel-dot {
  width: 5px;
  height: 5px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
}

.csrt-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-5) 0 60px;
}

.csrt-document {
  max-width: 840px;
  margin: 0 auto;
  padding: 0 var(--space-5);
}

.csrt-condition-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: var(--space-4);
}

.csrt-condition-label {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.csrt-chip {
  padding: 3px 11px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  color: var(--text-tertiary);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}

.csrt-chip:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.csrt-chip.is-selected {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--text-inverse);
  font-weight: var(--font-weight-semibold);
}

.csrt-optional-chip {
  display: inline-flex;
  align-items: stretch;
}

.csrt-optional-chip .csrt-chip {
  border-radius: var(--radius-full) 0 0 var(--radius-full);
}

.csrt-optional-chip-menu {
  min-width: 28px;
  padding: 0 7px;
  border: 1px solid var(--border-default);
  border-left: 0;
  border-radius: 0 var(--radius-full) var(--radius-full) 0;
  background: var(--bg-surface);
  color: var(--text-tertiary);
  font: inherit;
  cursor: pointer;
}

.csrt-optional-chip-menu:hover,
.csrt-optional-chip-menu[aria-expanded="true"] {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
  color: var(--color-primary);
}

.csrt-paper {
  overflow: hidden;
  padding: 0;
}

.csrt-paper-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px var(--space-4);
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-muted);
}

.csrt-paper-title {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}

.csrt-character-count {
  margin-left: auto;
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}

.csrt-dummy-warning {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: var(--space-3) var(--space-4) var(--space-1);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-md);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.csrt-dummy-warning-title {
  font-weight: var(--font-weight-semibold);
}

.csrt-paragraph {
  position: relative;
  padding: 8px 44px 8px 17px;
  border-left: 3px solid transparent;
  color: var(--text-primary);
  font-size: var(--font-size-base);
  line-height: 1.62;
}

.csrt-paragraph:hover { background: var(--bg-muted); }

.csrt-paragraph.is-replaced { border-left-color: var(--color-primary); }

.csrt-paragraph.is-hidden {
  color: var(--text-muted);
  background: repeating-linear-gradient(
    135deg,
    var(--bg-surface),
    var(--bg-surface) 8px,
    var(--bg-muted) 8px,
    var(--bg-muted) 16px
  );
}

.csrt-paragraph.is-hidden .csrt-paragraph-text {
  text-decoration: line-through;
  text-decoration-color: var(--border-medium);
}

.csrt-paragraph-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.csrt-paragraph-label {
  display: inline-flex;
  align-items: center;
  margin-bottom: 2px;
  padding: 1px 7px;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: var(--font-weight-semibold);
}

.csrt-paragraph-label.is-info {
  background: var(--color-info-subtle);
  color: var(--color-primary);
}

.csrt-paragraph-label.is-neutral {
  background: var(--bg-subtle);
  color: var(--text-tertiary);
}

.csrt-paragraph-actions {
  position: absolute;
  top: 6px;
  right: 8px;
  opacity: 0;
}

.csrt-paragraph:hover .csrt-paragraph-actions,
.csrt-paragraph:focus-within .csrt-paragraph-actions {
  opacity: 1;
}

.csrt-menu-button {
  display: grid;
  width: 26px;
  height: 26px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  color: var(--text-tertiary);
  font: inherit;
  cursor: pointer;
}

.csrt-menu-button:hover,
.csrt-menu-button[aria-expanded="true"] {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
  color: var(--color-primary);
}

.csrt-run-phrase,
.csrt-run-variable {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border: 1px solid;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  vertical-align: 1px;
}

.csrt-run-phrase {
  border-color: var(--color-info-subtle);
  background: var(--color-primary-bg);
  color: var(--color-primary);
}

.csrt-run-variable {
  border-color: var(--color-warning-subtle);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}

.csrt-add-row {
  position: relative;
  height: 0;
}

.csrt-add-button {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 50%;
  padding: 2px 12px;
  transform: translate(-50%, -50%);
  border: 1px dashed var(--border-medium);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  color: var(--text-muted);
  font: inherit;
  font-size: var(--font-size-xs);
  white-space: nowrap;
  cursor: pointer;
  opacity: 0;
}

.csrt-add-row:hover .csrt-add-button,
.csrt-add-button:focus {
  opacity: 1;
}

.csrt-add-button:hover {
  border-color: var(--color-primary);
  border-style: solid;
  color: var(--color-primary);
}

.csrt-ready-status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: 9px var(--space-4);
  border: 1px solid;
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
}

.csrt-ready-status.is-ok {
  border-color: var(--color-success-subtle);
  background: var(--color-success-subtle);
  color: var(--color-success-text);
}

.csrt-ready-status.is-error {
  border-color: var(--color-danger-subtle);
  background: var(--color-danger-subtle);
  color: var(--color-danger-text);
}

.csrt-collapsibles {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.csrt-collapsible {
  flex: 1;
  overflow: hidden;
  padding: 0;
}

.csrt-collapsible-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 0;
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-muted);
  color: var(--text-tertiary);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  text-align: left;
  cursor: pointer;
}

.csrt-collapse-count {
  margin-left: auto;
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
}

.csrt-chevron {
  color: var(--text-muted);
  font-size: 10px;
  transition: transform var(--transition-fast);
}

.csrt-collapsible.is-closed .csrt-chevron { transform: rotate(-90deg); }
.csrt-collapsible.is-closed .csrt-collapsible-body { display: none; }

.csrt-collapsible-body {
  padding: 10px 14px;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.7;
}

.csrt-checklist-item { padding: 2px 0; }

.csrt-none {
  color: var(--text-muted);
  padding: 2px 0;
}

.csrt-copy-button { margin-top: var(--space-2); }
.csrt-paper-header .csrt-paper-copy { margin-top: 0; }

.csrt-copy-button.is-copied {
  border-color: var(--color-success-subtle);
  background: var(--color-success-subtle);
  color: var(--color-success-text);
}

.csrt-boss-row {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-2);
  padding: 4px 0;
}

.csrt-boss-key {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.csrt-boss-value {
  overflow-wrap: anywhere;
  color: var(--text-secondary);
}

.csrt-boss-value.is-empty { color: var(--text-muted); }
.csrt-boss-row .csrt-copy-button { margin-top: 0; }

.csrt-popover {
  position: fixed;
  z-index: calc(var(--z-modal-backdrop) - 1);
  min-width: 248px;
  padding: 5px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-xl);
}

.csrt-popover-heading {
  padding: 6px 10px 4px;
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.03em;
}

.csrt-popover-item {
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: 9px;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.csrt-popover-item:hover,
.csrt-popover-item:focus {
  outline: 0;
  background: var(--color-primary-bg);
}

.csrt-popover-item.is-danger,
.csrt-popover-item.is-danger .csrt-popover-title {
  color: var(--color-danger);
}

.csrt-popover-icon {
  flex: none;
  width: 18px;
  font-size: var(--font-size-md);
  line-height: 1.4;
  text-align: center;
}

.csrt-popover-copy {
  display: flex;
  flex-direction: column;
}

.csrt-popover-title {
  color: var(--text-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}

.csrt-popover-detail {
  margin-top: 1px;
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.csrt-popover-separator {
  height: 1px;
  margin: 4px 0;
  background: var(--border-default);
}

.csrt-modal { max-width: 560px; }
.csrt-compare-modal { max-width: 980px; }
.csrt-edit-modal { max-width: 760px; }
.csrt-modal-title { margin: 0; font-size: var(--font-size-lg); }

.csrt-edit-impact {
  margin-bottom: var(--space-4);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-info-border);
  border-radius: var(--radius-md);
  background: var(--color-info-bg);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.csrt-confirm-copy {
  margin: 0 0 var(--space-4);
  color: var(--text-primary);
  line-height: var(--line-height-relaxed);
}

.csrt-optional-label-input { width: 100%; }

.csrt-optional-warning {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-warning-subtle);
  border-radius: var(--radius-md);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.csrt-edit-label,
.csrt-variable-heading {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.csrt-edit-textarea {
  width: 100%;
  min-height: 220px;
  resize: vertical;
  white-space: pre-wrap;
}

.csrt-variable-section { margin-top: var(--space-4); }

.csrt-variable-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.csrt-variable-button { white-space: nowrap; }

.csrt-edit-status {
  min-height: 22px;
  margin-top: var(--space-3);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.csrt-edit-status.is-warning { color: var(--color-warning-text); }
.csrt-edit-status.is-error { color: var(--color-danger-text); }

.csrt-conflict-intro {
  margin-bottom: var(--space-3);
  color: var(--color-danger-text);
  font-weight: var(--font-weight-semibold);
}

.csrt-conflict-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.csrt-conflict-card {
  min-width: 0;
  padding: var(--space-3);
}

.csrt-conflict-title {
  margin: 0 0 var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.csrt-conflict-body {
  max-height: 260px;
  margin: 0;
  overflow: auto;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.csrt-compare-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.csrt-compare-card {
  min-width: 0;
  padding: var(--space-3);
}

.csrt-compare-card.is-current { border-color: var(--color-primary); }

.csrt-compare-channel {
  margin: 0 0 var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--font-size-base);
}

.csrt-compare-card.is-current .csrt-compare-channel { color: var(--color-primary); }

.csrt-compare-text {
  max-height: 220px;
  overflow: auto;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.csrt-publish-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
  font-size: var(--font-size-base);
  line-height: 1.6;
}

.csrt-publish-check:last-child { border-bottom: 0; }

.csrt-publish-check-icon {
  flex: none;
  font-size: var(--font-size-md);
  line-height: 1.4;
}

.csrt-publish-check.is-pass .csrt-publish-check-icon { color: var(--color-success); }
.csrt-publish-check.is-warning .csrt-publish-check-icon { color: var(--color-warning); }
.csrt-publish-check.is-error .csrt-publish-check-icon { color: var(--color-danger); }

.csrt-publish-check-title {
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
}

.csrt-publish-check-detail {
  margin-top: 2px;
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.csrt-toast {
  position: fixed;
  z-index: calc(var(--z-modal-backdrop) + 2);
  right: var(--space-5);
  bottom: var(--space-5);
  max-width: 420px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: var(--text-primary);
  box-shadow: var(--shadow-lg);
  color: var(--text-inverse);
  font-size: var(--font-size-base);
}

.csrt-toast.is-success { background: var(--color-success-dark); }
.csrt-toast.is-warning { background: var(--color-warning-text); }
.csrt-toast.is-error { background: var(--color-danger); }

.csrt-copy-fallback {
  position: fixed;
  left: -9999px;
  opacity: 0;
}

@media (max-width: 900px) {
  .csrt-root { grid-template-columns: 200px minmax(0, 1fr); }
  .csrt-channel-bar { overflow-x: auto; }
  .csrt-collapsibles { flex-direction: column; }
  .csrt-collapsible { width: 100%; }
  .csrt-compare-grid { grid-template-columns: 1fr; }
  .csrt-conflict-grid { grid-template-columns: 1fr; }
}

/* 高さは親（#gmailSubPanel = .sub-panel）から受け取る。
   `calc(100vh - 120px)` のように上の余白を定数で引くと、ヘッダーやツールバーの
   高さが変わるたびに画面下に隙間が出る（実測1040pxの画面で78px余っていた）。 */
.gmail-inbox-root {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  background: var(--bg-surface);
  color: var(--text-primary);
}

.gmail-inbox-heading {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-muted);
}

.gmail-inbox-heading h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
}

.gmail-inbox-heading p {
  margin: 0;
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

/* メール分類が追いついているかの1行表示（ツールバーの件数の右） */
.gmail-classification-status {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  white-space: nowrap;
}

.gmail-classification-status[data-tone="ok"] {
  color: var(--color-success);
}

.gmail-classification-status[data-tone="stale"] {
  color: var(--color-warning-text);
}

.gmail-classification-status[data-tone="idle"] {
  color: var(--text-tertiary);
}

.gmail-spam-rescue-count {
  display: inline-flex;
  min-width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  margin-left: var(--space-1);
  padding: 0 var(--space-1);
  border-radius: 999px;
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  font-weight: var(--font-weight-semibold);
}

.gmail-spam-rescue-backdrop[hidden] {
  display: none !important;
}

#gmailSpamRescueModal .gmail-spam-rescue-modal {
  width: min(1120px, 96vw);
  max-width: 1120px;
  max-height: 90vh;
}

.gmail-spam-rescue-modal .modal-header h3,
.gmail-spam-rescue-modal .modal-header p {
  margin: 0;
}

.gmail-spam-rescue-modal .modal-header p {
  margin-top: var(--space-1);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.gmail-spam-rescue-result {
  min-height: 0;
  padding: 0 var(--space-4);
  color: var(--text-secondary);
}

.gmail-spam-rescue-result:not(:empty) {
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-default);
}

.gmail-spam-rescue-result[data-tone="ok"] { color: var(--color-success); }
.gmail-spam-rescue-result[data-tone="error"] { color: var(--color-danger-text); }

.gmail-spam-rescue-layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.8fr);
  gap: 0;
  padding: 0;
  min-height: 480px;
}

.gmail-spam-rescue-list {
  overflow-y: auto;
  border-right: 1px solid var(--border-default);
}

.gmail-spam-rescue-row {
  display: grid;
  width: 100%;
  gap: var(--space-1);
  padding: var(--space-3);
  border: 0;
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-surface);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}

.gmail-spam-rescue-row:hover,
.gmail-spam-rescue-row:focus-visible {
  background: var(--bg-muted);
}

.gmail-spam-rescue-row span,
.gmail-spam-rescue-row time {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.gmail-spam-rescue-detail {
  min-width: 0;
  overflow-y: auto;
  padding: var(--space-4);
}

.gmail-spam-rescue-meta {
  display: grid;
  gap: var(--space-2);
}

.gmail-spam-rescue-field {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: var(--space-2);
  overflow-wrap: anywhere;
}

.gmail-spam-rescue-body {
  margin: var(--space-4) 0;
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-muted);
  color: var(--text-primary);
  font: inherit;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.gmail-spam-rescue-attachments { color: var(--text-secondary); }
.gmail-spam-rescue-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

@media (max-width: 800px) {
  .gmail-spam-rescue-layout { grid-template-columns: 1fr; }
  .gmail-spam-rescue-list {
    max-height: 220px;
    border-right: 0;
    border-bottom: 1px solid var(--border-default);
  }
}


.gmail-inbox-toolbar {
  height: auto;
  min-height: var(--toolbar-height);
  flex-wrap: wrap;
}

.gmail-inbox-direction-group {
  display: flex;
}

.gmail-inbox-direction-group .btn {
  border-radius: 0;
}

.gmail-inbox-direction-group .btn:first-child {
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.gmail-inbox-direction-group .btn:last-child {
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.gmail-inbox-direction-group .btn + .btn {
  border-left: 0;
}

.gmail-inbox-search {
  width: 180px;
}

.gmail-inbox-count {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.gmail-inbox-layout {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.gmail-inbox-list-pane {
  width: 340px;
  min-width: 200px;
  flex-shrink: 0;
  overflow-y: auto;
  border-right: 1px solid var(--border-default);
  background: var(--bg-muted);
}

/* 番兵はカードと区別し、読み込み状況だけを控えめに伝える。 */
.gmail-inbox-list-sentinel {
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  padding: var(--space-3);
}

.gmail-inbox-reading-pane {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  background: var(--bg-surface);
}

.gmail-inbox-action-pane {
  width: 360px;
  min-width: 240px;
  flex-shrink: 0;
  overflow-y: auto;
  border-left: 1px solid var(--border-default);
  background: var(--bg-muted);
}

.gmail-inbox-action-pane[hidden],
.gmail-inbox-reply-area[hidden] {
  display: none;
}

.gmail-inbox-centered-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.gmail-inbox-error-state {
  color: var(--color-danger-text);
}

.gmail-inbox-card {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-default);
  border-left: 3px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.gmail-inbox-card:hover {
  background: var(--bg-hover);
}

.gmail-inbox-card.is-selected {
  background: var(--color-primary-bg);
}

.gmail-inbox-card.is-unread {
  border-left-color: var(--color-primary);
}

/* スターは全スタッフ共通の印。未読の青線と同時に付くので、内側にもう1本引いて両方見えるようにする。 */
.gmail-inbox-card.is-starred {
  border-left-color: var(--color-warning);
}

.gmail-inbox-card.is-unread.is-starred {
  border-left-color: var(--color-primary);
  box-shadow: inset 3px 0 0 var(--color-warning);
}

.gmail-inbox-card:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: -2px;
}

.gmail-inbox-star {
  flex-shrink: 0;
  margin-left: auto;
  color: var(--color-warning);
  font-size: var(--font-size-xs);
}

.gmail-inbox-star[hidden] {
  display: none;
}

.gmail-star-filter-btn.active {
  border-color: var(--color-warning);
  color: var(--color-warning-text);
}

.gmail-inbox-context-menu {
  position: fixed;
  z-index: var(--z-dropdown);
  display: grid;
  min-width: 180px;
  padding: var(--space-1);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-lg);
}

.gmail-inbox-context-item {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: var(--font-size-sm);
  text-align: left;
  cursor: pointer;
}

.gmail-inbox-context-item:hover {
  background: var(--bg-hover);
}

.gmail-inbox-context-item:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: -2px;
}

/* ⚠️ このまとまりに新しいセレクタを差し込まないこと。
   2026-09-09 に「返信対象の印」をこの並びの途中へ入れてしまい、一覧カードの
   見出し・脚から display:flex が消えて本文プレビューが縮まなくなり、一覧に横スクロールが出た。
   さらに青い縦棒が全カードに付いて「点線」に見えていた。 */
.gmail-inbox-card-header,
.gmail-inbox-card-footer,
.gmail-inbox-thread-tags,
.gmail-inbox-message-header {
  display: flex;
  align-items: center;
}

.gmail-inbox-card-header {
  justify-content: space-between;
  gap: var(--space-1);
  margin-bottom: var(--space-1);
}

.gmail-inbox-from,
.gmail-inbox-subject,
.gmail-inbox-preview {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gmail-inbox-from {
  color: var(--text-primary);
  font-size: var(--font-size-base);
}

.gmail-inbox-from.is-unread,
.gmail-inbox-subject.is-unread {
  font-weight: var(--font-weight-semibold);
}

.gmail-inbox-outbound-icon,
.gmail-inbox-date,
.gmail-inbox-preview {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}

.gmail-inbox-outbound-icon {
  margin-right: var(--space-1);
}

.gmail-inbox-date {
  flex-shrink: 0;
}

.gmail-inbox-subject {
  margin-bottom: var(--space-1);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.gmail-inbox-card-footer {
  gap: var(--space-1);
}

.gmail-inbox-preview {
  flex: 1;
}

.gmail-inbox-tags {
  display: flex;
  flex-shrink: 0;
  gap: var(--space-1);
}

.badge.gmail-inbox-tag {
  gap: var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--bg-active);
  color: var(--text-secondary);
}

/* 取引先タグ。手動で付ける他のタグと見分けが付くよう色を変える
   （このタグは台帳から導かれるもので、スレッドに保存されていない） */
.badge.gmail-inbox-tag.gmail-inbox-tag-partner {
  background: var(--color-warning-bg, #fef3c7);
  color: var(--color-warning-text, #92400e);
  font-weight: 600;
}

/* 書きかけの印。誰かが下書きを持っているスレッドに出す（サーバ保存の下書き） */
.badge.gmail-inbox-tag.gmail-inbox-tag-draft {
  background: var(--color-info-subtle);
  color: var(--color-info);
  font-weight: 600;
}

/* 「下書き」タブの一覧。行そのものは通常のメールカード（.gmail-inbox-card）を使い、
   ここでは「これより古いものがある」の注記だけを持つ。 */
.gmail-draft-note {
  margin: var(--space-3) var(--space-3) 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.gmail-inbox-thread-header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-default);
}

.gmail-inbox-thread-header h3 {
  margin: 0 0 var(--space-2);
  color: var(--text-primary);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
}

.gmail-inbox-thread-tags {
  flex-wrap: wrap;
  gap: var(--space-1);
}

.gmail-inbox-tag-remove {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: var(--font-size-md);
  line-height: 1;
  cursor: pointer;
}

.gmail-inbox-add-tag {
  min-width: 100px;
}

.gmail-inbox-thread {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-5);
}

.card.gmail-inbox-message {
  padding: var(--space-3);
  background: var(--bg-muted);
}

.gmail-inbox-message.is-store {
  border-color: var(--color-info-border);
  background: var(--color-primary-bg);
}

.gmail-inbox-message-header {
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}

/* 返信・転送の対象だけを示す。共通カードの選択状態とは分ける。 */
.card.gmail-inbox-message.gmail-inbox-message-target {
  border-color: var(--color-primary);
  box-shadow: inset 3px 0 0 var(--color-primary);
}

.gmail-inbox-message-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.gmail-inbox-message-date {
  margin-left: auto;
  white-space: nowrap;
}

.gmail-inbox-message-sender {
  color: var(--text-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}

.gmail-inbox-message.is-store .gmail-inbox-message-sender {
  color: var(--color-primary);
}

.gmail-inbox-message pre {
  margin: 0;
  color: var(--text-secondary);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  white-space: pre-wrap;
  word-break: break-word;
}

/* HTMLメール本文（安全な枠＝iframe sandbox の中に描画する） */
.gmail-inbox-message-html {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.gmail-inbox-message-html-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.gmail-inbox-message-html-notice {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}

/* ⚠️ 枠の中身の高さは親から測れない（allow-scripts / allow-same-origin を使わない方針）。
   そのため自動調整はせず、妥当な高さ＋枠内スクロールにしている。 */
.gmail-inbox-message-frame {
  width: 100%;
  height: 55vh;
  min-height: 240px;
  max-height: 640px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}

.gmail-inbox-message-html.is-expanded .gmail-inbox-message-frame {
  height: 85vh;
  max-height: none;
}

.gmail-inbox-message-attachments {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-default);
}

.gmail-inbox-attachment-heading {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.gmail-inbox-attachment-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.gmail-inbox-attachment-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}

.gmail-inbox-attachment-details {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-1);
}

.gmail-inbox-attachment-name {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  overflow-wrap: anywhere;
}

.gmail-inbox-attachment-metadata,
.gmail-inbox-attachment-status {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
}

.gmail-inbox-attachment-status.is-error {
  color: var(--color-danger-text);
}

.gmail-inbox-attachment-download {
  max-width: 100%;
  white-space: normal;
}

.gmail-inbox-attachment-thumbnail-button {
  grid-column: 1 / -1;
  max-width: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  cursor: zoom-in;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.gmail-inbox-attachment-thumbnail-button:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.gmail-inbox-attachment-thumbnail-button:focus-visible {
  border-color: var(--border-focus);
  box-shadow: var(--shadow-focus);
  outline: none;
}

.gmail-inbox-attachment-thumbnail {
  display: block;
  width: auto;
  max-width: 240px;
  height: auto;
  max-height: 180px;
  object-fit: contain;
}

.gmail-inbox-inline-attachments summary {
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  cursor: pointer;
}

.gmail-inbox-inline-attachments[open] summary {
  margin-bottom: var(--space-2);
}

.gmail-inbox-attachment-modal {
  width: min(920px, calc(100% - var(--space-8)));
  max-width: none;
  max-height: calc(100vh - var(--space-8));
}

.gmail-inbox-attachment-modal-title {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
}

.gmail-inbox-attachment-modal-close {
  color: var(--text-secondary);
  font-size: var(--font-size-xl);
}

.gmail-inbox-attachment-modal-body {
  display: flex;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  background: var(--bg-muted);
}

.gmail-inbox-attachment-modal-image {
  display: block;
  max-width: 100%;
  max-height: calc(80vh - 120px);
  object-fit: contain;
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-md);
}

.gmail-inbox-attachment-modal-caption {
  max-width: 100%;
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  overflow-wrap: anywhere;
}

.gmail-inbox-action-content {
  padding: var(--space-4);
}

/* AI返信案（ローカルモデル）セクション。右カラムの先頭に置く。 */
.gmail-local-ai {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-default);
}

.gmail-local-ai h4,
.gmail-local-ai p {
  margin: 0;
}

.gmail-local-ai p,
.gmail-local-ai label,
.gmail-local-ai-status {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.gmail-local-ai-status.is-success {
  color: var(--color-success-text);
}

.gmail-local-ai-status.is-error {
  color: var(--color-danger-text);
}

.gmail-local-ai-result-area {
  display: grid;
  gap: var(--space-2);
}

.gmail-local-ai-result-area[hidden] {
  display: none;
}

.gmail-local-ai-text {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-family);
}

.gmail-local-ai-actions {
  display: flex;
  gap: var(--space-2);
}

.gmail-local-ai-actions .btn {
  flex: 1;
}

.gmail-inbox-full-button {
  width: 100%;
}

.gmail-inbox-reply-area {
  margin-top: var(--space-3);
}

/* 「見た目そのままで出せなかった理由」（管理者にだけ出る1行）。 */
.gmail-inbox-plain-fallback-note {
  margin: 0 0 var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.gmail-inbox-reply-area label,
.gmail-inbox-send-status {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.gmail-inbox-reply-area label {
  display: block;
  margin-bottom: var(--space-1);
}

.gmail-inbox-reply-text {
  width: 100%;
  margin-bottom: var(--space-2);
  box-sizing: border-box;
  font-family: var(--font-family);
}

.gmail-inbox-reply-block-notice {
  margin: 0 0 var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-sm);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.gmail-inbox-send-status {
  margin-top: var(--space-1);
}

.gmail-inbox-send-status.is-success {
  color: var(--color-success-text);
}

.gmail-inbox-send-status.is-error {
  color: var(--color-danger-text);
}

/* --- その他メール: 返信の作成欄（composer） ------------------------------- */
/* 中央カラムの下にインラインで生やし、「⤢」で右下の小窓へ切り離す。
   小窓は同時に1つだけ。全画面モーダルは作らない（オーナー決定 2026-09-07）。 */

.gmail-inbox-center {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
  position: relative;
}

.gmail-inbox-center .gmail-inbox-reading-pane {
  flex: 1;
  min-height: 0;
}

.gmail-compose {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  position: relative;
}

.gmail-compose[hidden] {
  display: none;
}

.gmail-compose-dock {
  flex-shrink: 0;
  max-height: 62%;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  border-top: 2px solid var(--color-primary);
  box-shadow: var(--shadow-md);
}

/* 高さの上限は共通リサイザーが中央カラムの広さから決める。 */
.gmail-compose-dock.msg-composer-resizable {
  max-height: none;
}

.gmail-compose-dock.msg-composer-resizable .gmail-compose-text {
  flex: 1 0 64px;
  min-height: 64px;
  resize: none;
}

.gmail-compose-dock .gmail-compose-body {
  overflow-y: auto;
}

.gmail-compose-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-muted);
}

.gmail-compose-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.gmail-compose-fields {
  padding: 0 var(--space-3);
}

.gmail-compose-field {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 30px;
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--border-light);
}

/* ⚠️ `display: flex` は `[hidden]` の `display: none` に勝つ。折りたたみ（Cc欄など）が
   効かなくなるので、flex を持つ枠には必ず [hidden] を書き添える。 */
.gmail-compose-field[hidden] {
  display: none;
}

.gmail-compose-field-label {
  width: 52px;
  flex-shrink: 0;
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.gmail-compose-field-value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
  font-size: var(--font-size-base);
}

.gmail-compose-field .input,
.gmail-compose-field .select {
  flex: 1;
  min-width: 0;
  font-size: var(--font-size-base);
}

.gmail-compose-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
  min-height: 0;
  padding: var(--space-2) var(--space-3);
}

.gmail-compose-text {
  width: 100%;
  min-height: 160px;
  box-sizing: border-box;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
}

.gmail-compose-quote {
  border-left: 2px solid var(--border-medium);
  padding-left: var(--space-2);
}

.gmail-compose-quote summary {
  cursor: pointer;
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.gmail-compose-quote pre {
  margin: var(--space-1) 0 0;
  color: var(--text-muted);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  white-space: pre-wrap;
}

.gmail-compose-footer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--border-default);
  background: var(--bg-muted);
}

.gmail-compose-footer .toolbar-spacer {
  flex: 1;
}

/* 「署名 ▾」メニュー。作成欄の最下部にあるので上向きに開く。 */
.gmail-compose-signature {
  position: relative;
  display: inline-flex;
}

.gmail-compose-signature-menu {
  position: absolute;
  bottom: calc(100% + var(--space-1));
  left: 0;
  z-index: var(--z-dropdown);
  display: flex;
  flex-direction: column;
  min-width: 220px;
  padding: var(--space-1) 0;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  box-shadow: var(--shadow-lg);
}

.gmail-compose-signature-menu[hidden] {
  display: none;
}

.gmail-compose-signature-heading {
  padding: var(--space-1) var(--space-3);
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}

.gmail-compose-signature-item {
  padding: var(--space-2) var(--space-3);
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.gmail-compose-signature-item:hover,
.gmail-compose-signature-item:focus {
  background: var(--bg-hover);
  outline: none;
}

/* コピーの古い方法で一瞬だけ使う入力欄（画面には出さない）。 */
.gmail-compose-signature-clipboard {
  position: fixed;
  top: -1000px;
  left: -1000px;
  opacity: 0;
}

.gmail-compose-notice {
  margin: 0 var(--space-3) var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-sm);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.gmail-compose-notice[hidden] {
  display: none;
}

.gmail-compose-status {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.gmail-compose-status.is-success {
  color: var(--color-success-text);
}

.gmail-compose-status.is-error {
  color: var(--color-danger-text);
}

/* 右下の小窓（切り離し）。同時に1つだけ出す。 */
/* 転送で引き継ぐ添付の一覧（既定で全部チェック・個別に外せる） */
.gmail-compose-attachments {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: 0 var(--space-3) var(--space-2);
  flex-shrink: 0;
}

.gmail-compose-attachments[hidden] {
  display: none;
}

.gmail-compose-attachments-label {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.gmail-compose-attachment {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  font-size: var(--font-size-base);
  cursor: pointer;
}

.gmail-compose-attachment-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-secondary);
}

.gmail-compose-attachment-size {
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.gmail-compose-attachment-notice {
  margin: 0;
  color: var(--color-danger);
  font-size: var(--font-size-sm);
}

/* アップロード中・失敗などの短い状態表示（添付1件の右端） */
.gmail-compose-attachment-status {
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

/* ファイルを本文欄へドラッグしているあいだの目印 */
.gmail-compose-body.is-dragover {
  outline: 2px dashed var(--color-primary);
  outline-offset: -4px;
}

.gmail-compose-attachment-notice[hidden] {
  display: none;
}

/* 添付欄に置く小さな操作ボタン（縦並びの枠の中で横いっぱいに伸ばさない） */
.gmail-compose-attachment-action {
  align-self: flex-start;
}

/* AIの添付は出所と確認操作を近くに置き、見落としを防ぐ。 */
.gmail-compose-attachment-agt-badge {
  color: var(--color-primary);
  background: var(--bg-subtle);
}

.gmail-compose-attachment-ack {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.gmail-compose-attachment-open,
.gmail-compose-attachment-remove {
  flex-shrink: 0;
}

.gmail-compose-hint {
  margin: var(--space-1) 0 0;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.gmail-compose-window {
  position: absolute;
  right: var(--space-3);
  bottom: 0;
  width: 520px;
  max-width: calc(100% - var(--space-4));
  max-height: 560px;
  z-index: 60;
  border: 1px solid var(--border-default);
  border-bottom: 0;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}

.gmail-compose-window .gmail-compose-body {
  overflow-y: auto;
}

/* 送信前の確認 */
.gmail-compose-confirm {
  position: absolute;
  right: var(--space-3);
  bottom: 52px;
  width: 340px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-xl);
  text-align: left;
}

.gmail-compose-confirm[hidden] {
  display: none;
}

.gmail-compose-confirm h5 {
  margin: 0;
  font-size: var(--font-size-lg);
}

.gmail-compose-confirm-line {
  display: flex;
  gap: var(--space-2);
  font-size: var(--font-size-base);
}

.gmail-compose-confirm-line[hidden] {
  display: none;
}

.gmail-compose-confirm-key {
  width: 44px;
  flex-shrink: 0;
  color: var(--text-muted);
}

.gmail-compose-confirm-value {
  color: var(--text-secondary);
  word-break: break-all;
}

.gmail-compose-confirm-actions {
  display: flex;
  gap: var(--space-1);
  justify-content: flex-end;
}

/* Yahoo顧客対応ハブ */
#csHubSubPanel {
  min-height: 0;
  overflow: hidden;
  padding: var(--space-3);
}
.cs-hub-root {
  display: grid;
  grid-template-columns: minmax(300px, 344px) minmax(340px, 1.3fr) minmax(280px, 1fr);
  gap: var(--space-3);
  width: 100%;
  height: 100%;
  min-height: 0;
}
.cs-hub-section {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: var(--space-3);
  overflow: hidden;
}
.cs-hub-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-default);
}
.cs-hub-detail-section > .cs-hub-section-header {
  flex-wrap: wrap;
}
.cs-hub-detail-heading {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.cs-hub-detail-relation {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
}
.cs-hub-detail-relation:empty {
  display: none;
}
/* 選択スレッドのURLコピー（BOSSの倉庫備考やChatworkに貼るため） */
.cs-hub-copy-inquiry-url {
  flex: 0 0 auto;
  white-space: nowrap;
}
.cs-hub-copy-inquiry-url.is-copied {
  color: var(--color-success);
}
.cs-hub-copy-fallback {
  position: fixed;
  left: -9999px;
  top: 0;
}
.cs-hub-section-title {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}
.cs-hub-channel-label,
.cs-hub-order-marketplace {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}
.cs-hub-toolbar {
  height: auto;
  min-height: var(--toolbar-height);
  margin: 0;
  padding-right: var(--space-3);
  padding-left: var(--space-3);
}
.cs-hub-filter-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}
.cs-hub-filter-label[hidden] { display: none; }
.cs-hub-status-filter { color: var(--text-primary); }
.cs-hub-list-section {
  position: relative;
  padding: 0;
}
.cs-hub-list-section .cs-hub-section-header {
  padding: var(--space-3) var(--space-4);
}
.cs-hub-list-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}
.cs-hub-list-section .cs-hub-toolbar {
  height: auto;
  flex-wrap: wrap;
  row-gap: var(--space-2);
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-muted);
}
.cs-hub-search-input {
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
}
.cs-hub-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  min-width: 0;
}
.cs-hub-thread-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.cs-hub-thread-items {
  display: flex;
  flex-direction: column;
}
.cs-hub-thread-row {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-bottom: 1px solid var(--border-light);
  border-radius: 0;
  background: var(--bg-surface);
  color: var(--text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.cs-hub-thread-row::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--space-1);
  background: transparent;
  content: "";
  transition: background var(--transition-fast);
}
.cs-hub-thread-row:hover { background: var(--bg-hover); }
.cs-hub-thread-row:focus-visible {
  box-shadow: var(--shadow-focus);
  outline: none;
}
.cs-hub-thread-row.is-selected {
  background: var(--color-primary-bg);
}
.cs-hub-thread-row.is-needs-response::before { background: var(--color-primary); }
.cs-hub-thread-row-top {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.cs-hub-thread-unread-dot {
  width: var(--space-2);
  height: var(--space-2);
  flex: none;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  box-shadow: var(--shadow-focus);
}
.cs-hub-thread-row.is-responded .cs-hub-thread-unread-dot {
  background: transparent;
  box-shadow: none;
}
.cs-hub-thread-customer {
  overflow: hidden;
  color: var(--text-secondary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cs-hub-thread-row.is-needs-response .cs-hub-thread-customer {
  color: var(--text-primary);
  font-weight: var(--font-weight-bold);
}
.cs-hub-thread-date {
  margin-left: auto;
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}
.cs-hub-thread-row.is-needs-response .cs-hub-thread-date {
  color: var(--color-primary-hover);
  font-weight: var(--font-weight-semibold);
}
.cs-hub-inquiry-chip {
  display: inline-flex;
  align-self: flex-start;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  white-space: nowrap;
}
.cs-hub-inquiry-chip.is-ship {
  border-color: var(--color-info-border);
  background: var(--color-info-bg);
  color: var(--color-info);
}
.cs-hub-inquiry-chip.is-return {
  border-color: var(--color-warning);
  background: var(--color-warning-subtle);
  color: var(--color-warning-text);
}
.cs-hub-inquiry-chip.is-order {
  border-color: var(--color-primary-subtle);
  background: var(--color-primary-bg);
  color: var(--color-primary-active);
}
.cs-hub-inquiry-chip.is-other {
  border-color: var(--border-default);
  background: var(--bg-subtle);
  color: var(--text-secondary);
}
.cs-hub-thread-preview {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text-tertiary);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.cs-hub-thread-row.is-needs-response .cs-hub-thread-preview { color: var(--text-primary); }
.cs-hub-thread-footer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.cs-hub-thread-status {
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-tight);
}
.cs-hub-thread-ai-badge { flex: none; }
/* 「未対応」の理由が返金であることを示す小さなチップ（状態バッジは1つのまま）。 */
.cs-hub-thread-refund-badge {
  flex: none;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-tight);
}
.cs-hub-thread-order-chip {
  max-width: 65%;
  margin-left: auto;
  padding: var(--space-1) var(--space-2);
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  background: var(--bg-muted);
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cs-hub-list-sentinel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--space-8);
  padding: var(--space-4);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  text-align: center;
}
.cs-hub-list-spinner {
  width: var(--space-4);
  height: var(--space-4);
  flex: none;
  border: 2px solid var(--border-default);
  border-top-color: var(--color-primary);
  border-radius: var(--radius-full);
  animation: cs-hub-spin 0.7s linear infinite;
}
.cs-hub-list-sentinel-status { line-height: var(--line-height-normal); }
.cs-hub-list-retry,
.cs-hub-list-fallback { flex: none; }
.cs-hub-list-sentinel[hidden],
.cs-hub-list-spinner[hidden],
.cs-hub-list-retry[hidden],
.cs-hub-list-fallback[hidden] { display: none; }
.cs-hub-error { color: var(--color-danger-text); }
@keyframes cs-hub-spin {
  to { transform: rotate(360deg); }
}
.cs-hub-detail-body,
.cs-hub-orders-body {
  min-height: 0;
  padding-top: var(--space-3);
}
.cs-hub-orders-body { overflow-y: auto; }
.cs-hub-detail-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
}
.cs-hub-detail-section { min-width: 0; }
.cs-hub-thread-history {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
}
.cs-hub-thread-summary {
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--bg-muted);
}
.cs-hub-conversation-siblings {
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  border: 1px solid var(--color-info-border);
  border-radius: var(--radius-xl);
  background: var(--color-info-bg);
}
.cs-hub-conversation-siblings-title {
  margin-bottom: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}
.cs-hub-conversation-siblings-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.cs-hub-conversation-sibling-row {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-2);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.cs-hub-conversation-sibling-row:hover { background: var(--bg-hover); }
.cs-hub-conversation-sibling-row:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 1px;
}
.cs-hub-conversation-sibling-subject {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  color: var(--color-info);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cs-hub-conversation-sibling-date {
  flex: none;
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  white-space: nowrap;
}
.cs-hub-thread-title {
  margin: 0 0 var(--space-2);
  color: var(--text-primary);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-relaxed);
  overflow-wrap: anywhere;
}
.cs-hub-thread-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  flex-wrap: wrap;
}
.cs-hub-thread-detail-customer { font-weight: var(--font-weight-semibold); }
.cs-hub-thread-detail-id {
  color: var(--text-tertiary);
  overflow-wrap: anywhere;
}
.cs-hub-thread-product {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.cs-hub-thread-product-thumb {
  width: calc(var(--space-8) + var(--space-2));
  height: calc(var(--space-8) + var(--space-2));
  flex: none;
  /* 白い商品写真が白背景に沈んで「画像が出ていない」ように見えるのを防ぐ。 */
  background: var(--bg-muted);
  object-fit: contain;
  border-radius: var(--radius-md);
}
.cs-hub-thread-product-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}
.cs-hub-thread-product-label,
.cs-hub-thread-product-code {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}
.cs-hub-thread-product-name,
.cs-hub-thread-product-body .cs-hub-thread-item-link {
  display: block;
  overflow: hidden;
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  text-overflow: ellipsis;
  text-decoration: none;
  white-space: nowrap;
}
.cs-hub-thread-product-body .cs-hub-thread-item-link {
  color: var(--color-primary);
}
.cs-hub-thread-product-body .cs-hub-thread-item-link:hover,
.cs-hub-thread-product-body .cs-hub-thread-item-link:focus-visible {
  text-decoration: underline;
}
.cs-hub-messages {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.cs-hub-message {
  width: 80%;
  position: relative;
}
.cs-hub-message.customer {
  align-self: flex-start;
}
.cs-hub-message.store {
  align-self: flex-end;
}
.cs-hub-message-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}
.cs-hub-message.store .cs-hub-message-header { justify-content: flex-end; }
.cs-hub-message-sender { font-weight: var(--font-weight-semibold); }
.cs-hub-message-date { flex: none; }
.cs-hub-message.store .cs-hub-message-sender { color: var(--color-primary-hover); }
.cs-hub-message-bubble {
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm) var(--radius-xl) var(--radius-xl) var(--radius-xl);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}
.cs-hub-message.store .cs-hub-message-bubble {
  border-color: var(--color-primary-subtle);
  border-radius: var(--radius-xl) var(--radius-sm) var(--radius-xl) var(--radius-xl);
  background: var(--color-primary-bg);
}
/* 未送信の当社発信（outbound-pending）。送信済みと同じ見た目にしない。
   実線・塗りつぶしのままだと「もう送った」と読まれ、連絡が落ちる（2026-09-08 本番）。 */
.cs-hub-message.store.unsent .cs-hub-message-bubble {
  border-style: dashed;
  border-color: var(--color-warning);
  background: var(--color-warning-bg);
}
.cs-hub-message.store.unsent .cs-hub-message-sender {
  color: var(--color-warning-text);
}
.cs-hub-message-unsent-notice {
  margin-bottom: var(--space-2);
  color: var(--color-warning-text);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}
.cs-hub-message-body {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.cs-hub-quote-button {
  margin-left: auto;
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
}
.cs-hub-message.store .cs-hub-quote-button { margin-left: 0; }
.cs-hub-message-receipt {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-1);
  margin-top: var(--space-1);
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}
.cs-hub-message-receipt.is-read { color: var(--color-success-dark); }
.cs-hub-message-receipt.is-unread { color: var(--color-warning-text); }
.cs-hub-message-receipt.is-unknown { color: var(--text-muted); }
.cs-hub-template-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
  border-left: var(--space-1) solid var(--color-primary);
  background: var(--bg-surface);
}
.cs-hub-template-title {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}
.cs-hub-template-form,
.cs-hub-template-variable,
.cs-hub-template-return-items,
.cs-hub-template-result {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.cs-hub-template-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}
.cs-hub-template-label,
.cs-hub-template-output-title {
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}
.cs-hub-template-hint {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-relaxed);
}
.cs-hub-template-hint.is-warning { color: var(--color-warning-text); }
.cs-hub-template-select { width: 100%; }
.cs-hub-template-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  margin: 0;
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}
.cs-hub-template-choice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}
.cs-hub-template-variable {
  padding: var(--space-3);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--bg-muted);
}
.cs-hub-template-inline-error {
  color: var(--color-danger-text);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}
.cs-hub-template-return-row {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) 52px 28px;
  gap: var(--space-1);
  align-items: center;
}
.cs-hub-template-render-button { align-self: flex-end; }
.cs-hub-template-feedback,
.cs-hub-template-warning {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}
.cs-hub-template-feedback.is-success {
  border-color: var(--color-success);
  background: var(--color-success-bg);
  color: var(--color-success-text);
}
.cs-hub-template-feedback.is-warning,
.cs-hub-template-warning {
  border-color: var(--color-warning);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}
.cs-hub-template-feedback.is-error,
.cs-hub-template-warning.is-strong {
  border-color: var(--color-danger);
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
}
.cs-hub-template-warning.is-strong {
  font-weight: var(--font-weight-bold);
}
.cs-hub-template-warning-detail {
  margin-top: var(--space-1);
  font-weight: var(--font-weight-medium);
  white-space: pre-wrap;
}
.cs-hub-template-output {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-light);
}
.cs-hub-template-output-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.cs-hub-template-output-text {
  width: 100%;
  resize: vertical;
  white-space: pre-wrap;
}
.cs-hub-template-overlay {
  position: absolute;
  z-index: var(--z-sticky);
  inset: 0;
  overflow-y: auto;
  background: var(--bg-surface);
}
.cs-hub-template-overlay[hidden] { display: none; }
.cs-hub-template-panel {
  width: 100%;
  height: 100%;
  min-height: 0;
  gap: 0;
  margin: 0;
  overflow: hidden;
  border-left: var(--space-1) solid var(--color-primary);
  background: var(--bg-surface);
}
.cs-hub-template-slot .cs-hub-template-variable {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--space-1);
  align-items: start;
  padding: 0;
  border: 0;
  background: transparent;
}
.cs-hub-template-variable-value {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-1);
  min-width: 0;
}
.cs-hub-template-variable-value.has-prefill {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}
.cs-hub-template-variable-value.is-multiline {
  grid-template-columns: minmax(0, 1fr);
}
.cs-hub-template-variable-value > *,
.cs-hub-template-variable > * { min-width: 0; }
.cs-hub-template-panel-header {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-default);
}
.cs-hub-template-close {
  flex: none;
  color: var(--text-tertiary);
  font-size: var(--font-size-xl);
}
.cs-hub-template-pop-body {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: var(--space-2);
  overflow-y: auto;
  padding: var(--space-2);
}
.cs-hub-template-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-1);
}
.cs-hub-template-accordion {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
}
.cs-hub-template-accordion-header {
  display: flex;
  min-width: 0;
  align-items: stretch;
  gap: var(--space-1);
  flex-wrap: wrap;
  background: var(--bg-muted);
}
.cs-hub-template-accordion-toggle {
  display: flex;
  min-width: 0;
  flex: 1 1 240px;
  min-height: 36px;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding: var(--space-1) var(--space-2);
  border: 0;
  background: var(--bg-muted);
  color: var(--text-primary);
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.cs-hub-template-accordion-toggle:disabled {
  color: var(--text-muted);
  cursor: not-allowed;
}
.cs-hub-template-accordion-toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}
.cs-hub-template-accordion-icon {
  color: var(--text-tertiary);
  font-size: var(--font-size-lg);
  line-height: 1;
  transform: rotate(0deg);
  transition: transform var(--transition-fast);
}
.cs-hub-template-accordion-toggle.is-open .cs-hub-template-accordion-icon {
  transform: rotate(90deg);
}
.cs-hub-template-accordion-title {
  flex: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}
.cs-hub-template-accordion-summary {
  min-width: 0;
  flex: 1 1 140px;
  margin-left: auto;
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-align: right;
  white-space: normal;
}
.cs-hub-template-accordion-summary.is-warning { color: var(--color-warning-text); }
.cs-hub-template-accordion-action {
  flex: none;
  padding: 0 var(--space-2);
  border: 0;
  border-left: 1px solid var(--border-default);
  background: transparent;
  color: var(--color-primary);
  cursor: pointer;
  font: inherit;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}
.cs-hub-template-accordion-action:hover { background: var(--color-primary-subtle); }
.cs-hub-template-accordion-action:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}
.cs-hub-template-accordion-action:disabled {
  color: var(--text-muted);
  cursor: not-allowed;
}
.cs-hub-template-accordion-body {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-1);
  padding: var(--space-1);
  border-top: 1px solid var(--border-default);
}
.cs-hub-template-accordion-body[hidden] { display: none; }
.cs-hub-template-slot[hidden],
.cs-hub-template-slot.is-compact[hidden] { display: none; }
.cs-hub-template-slot {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
}
.cs-hub-template-slot.is-compact {
  display: grid;
  height: 38px;
  min-height: 38px;
  grid-template-columns: minmax(112px, 0.28fr) minmax(0, 1fr) auto;
  grid-template-rows: 28px;
  align-items: center;
  gap: var(--space-1);
  overflow: hidden;
  padding: var(--space-1) var(--space-2);
  box-sizing: border-box;
}
.cs-hub-template-slot.is-compact .cs-hub-template-slot-header { display: contents; }
.cs-hub-template-slot.is-compact .cs-hub-template-label {
  grid-column: 1;
  grid-row: 1;
}
.cs-hub-template-slot.is-compact .cs-hub-template-slot-content {
  width: 100%;
  height: 28px;
  min-width: 0;
  grid-column: 2;
  grid-row: 1;
  overflow: hidden;
}
.cs-hub-template-slot.is-compact.is-flow {
  height: auto;
  min-height: 38px;
  grid-template-rows: minmax(28px, auto);
  align-items: start;
  overflow: visible;
}
.cs-hub-template-slot.is-compact.is-flow .cs-hub-template-slot-content {
  height: auto;
  min-height: 28px;
  overflow: visible;
}
.cs-hub-template-slot.is-compact.is-disabled .cs-hub-template-slot-content {
  visibility: hidden;
  pointer-events: none;
}
.cs-hub-template-slot.is-compact .cs-hub-template-slot-status {
  max-width: 160px;
  grid-column: 3;
  grid-row: 1;
  overflow: hidden;
}
.cs-hub-template-slot.is-compact .cs-hub-template-slot-status .cs-hub-template-hint {
  max-width: 104px;
}
.cs-hub-template-slot.is-compact.is-required-missing {
  border-color: var(--color-warning);
  background: var(--color-warning-bg);
}
.cs-hub-template-slot.is-full { grid-column: 1 / -1; }
.cs-hub-template-slot.is-primary,
.cs-hub-template-slot.is-secondary,
.cs-hub-template-slot.is-unused { min-width: 0; }
.cs-hub-template-slot.is-disabled {
  border-style: dashed;
  background: var(--bg-muted);
}
.cs-hub-template-slot.is-disabled .cs-hub-template-label { color: var(--text-muted); }
.cs-hub-template-slot-header {
  display: flex;
  height: 24px;
  min-height: 24px;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
  overflow: hidden;
  line-height: var(--line-height-tight);
}
.cs-hub-template-slot-header .cs-hub-template-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cs-hub-template-slot-status {
  display: flex;
  min-width: 0;
  flex: none;
  align-items: center;
  gap: var(--space-1);
  white-space: nowrap;
}
.cs-hub-template-slot-status .cs-hub-template-hint {
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: var(--line-height-tight);
}
.cs-hub-template-unused-badge {
  display: inline-flex;
  height: 22px;
  flex: none;
  align-items: center;
  padding: 0 var(--space-2);
  box-sizing: border-box;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  background: var(--bg-subtle);
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}
.cs-hub-template-option-groups,
.cs-hub-template-choice-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
}
.cs-hub-template-choice {
  min-height: 28px;
  align-items: center;
}
.cs-hub-template-slot .input,
.cs-hub-template-slot .select {
  min-height: 28px;
  padding: var(--space-1) var(--space-2);
}
.cs-hub-template-slot.is-compact .input,
.cs-hub-template-slot.is-compact .select,
.cs-hub-template-slot.is-compact .textarea,
.cs-hub-template-slot.is-compact .btn {
  height: 28px;
  min-height: 28px;
  max-height: 28px;
  box-sizing: border-box;
}
.cs-hub-template-slot.is-compact .textarea {
  resize: none;
}
.cs-hub-template-slot .btn { min-height: 28px; }
.cs-hub-template-slot > .textarea,
.cs-hub-template-variable-value .textarea {
  min-height: 52px;
  padding: var(--space-1) var(--space-2);
}
.cs-hub-template-return-control,
.cs-hub-template-return-items {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-1);
}
.cs-hub-template-return-row > * {
  width: 100%;
  min-width: 0;
}
.cs-hub-template-return-remove {
  width: 28px;
  min-width: 28px;
  padding: 0;
}
.cs-hub-template-return-add {
  align-self: flex-start;
}
.cs-hub-template-footer {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2);
  border-top: 1px solid var(--border-default);
  background: var(--bg-muted);
}
.cs-hub-template-footer .cs-hub-template-hint { flex: 1; }
.cs-hub-template-conflict-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.cs-hub-template-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.cs-hub-template-trigger.is-open {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
  color: var(--color-primary);
}
.cs-hub-template-trigger-icon {
  width: var(--space-4);
  height: var(--space-4);
  flex: none;
}
.cs-hub-template-trigger-reason {
  align-self: center;
  max-width: 240px;
  color: var(--color-warning-text);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
}
.cs-hub-reply-composer {
  position: sticky;
  bottom: 0;
  z-index: var(--z-sticky);
  display: flex;
  max-height: 100%;
  flex: none;
  flex-direction: column;
  align-self: stretch;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  overflow-y: auto;
  border-top: 1px solid var(--border-default);
  background: var(--bg-surface);
}

/* Shared message composer height control (CS Hub / LINE / Instagram DM / comments). */
.msg-composer-resize-handle {
  position: relative;
  width: 100%;
  height: 14px;
  min-height: 14px;
  flex: 0 0 14px;
  align-self: stretch;
  border-radius: var(--radius-sm);
  cursor: ns-resize;
  touch-action: none;
}
.msg-composer-resize-handle::before {
  position: absolute;
  top: 5px;
  left: 50%;
  width: 44px;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--border-medium);
  content: "";
  transform: translateX(-50%);
}
.msg-composer-resize-handle:hover::before,
.msg-composer-resize-handle:focus-visible::before {
  background: var(--color-primary);
}
.msg-composer-resize-handle:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: -2px;
}
.cs-hub-reply-composer > .msg-composer-resize-handle {
  margin-top: calc(-1 * var(--space-3));
}
.lc-compose > .msg-composer-resize-handle,
.igdm-compose > .msg-composer-resize-handle,
.ci-compose > .msg-composer-resize-handle {
  width: calc(100% + 20px);
  margin: -10px -10px 0;
}
body.msg-composer-is-resizing {
  cursor: ns-resize !important;
  user-select: none !important;
}
.msg-composer-resizable {
  box-sizing: border-box;
  min-height: 0;
}
.msg-composer-resizable.lc-compose,
.msg-composer-resizable.igdm-compose,
.msg-composer-resizable.ci-compose {
  display: flex;
  flex-direction: column;
}
.msg-composer-resizable[hidden] { display: none !important; }
.msg-composer-restore-bar {
  width: 100%;
  min-height: 28px;
  flex: 0 0 28px;
  padding: 0 var(--space-3);
  border: 0;
  border-top: 1px solid var(--border-default);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-align: center;
  cursor: pointer;
}
.msg-composer-restore-bar:hover {
  background: var(--bg-hover);
  color: var(--color-primary);
}
.msg-composer-restore-bar:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: -2px;
}
.msg-composer-restore-bar[hidden] { display: none; }
.msg-composer-resizable .lc-compose-row,
.msg-composer-resizable .igdm-compose-row,
.msg-composer-resizable .ci-compose-row {
  min-height: 0;
  flex: 1 1 auto;
}
.msg-composer-resizable > .cs-hub-reply-textarea,
.msg-composer-resizable .lc-compose-row textarea,
.msg-composer-resizable .igdm-compose-row textarea,
.msg-composer-resizable .ci-compose-row textarea {
  height: 100%;
  min-height: 0;
  max-height: none;
  flex: 1 1 auto;
  resize: none;
}
.cs-hub-reply-composer.is-attachment-dragover {
  outline: 2px dashed var(--color-primary);
  outline-offset: -4px;
}
.cs-hub-reply-composer.is-attachment-dragover-multi {
  outline: 2px dashed var(--color-danger);
  outline-offset: -4px;
}
.cs-hub-reply-composer.is-attachment-dragover::after,
.cs-hub-reply-composer.is-attachment-dragover-multi::after {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--bg-surface) 82%, transparent);
  color: var(--color-primary);
  content: "ここにドロップして添付";
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  pointer-events: none;
}
.cs-hub-reply-composer.is-attachment-dragover-multi::after {
  background: color-mix(in srgb, var(--color-danger-bg) 88%, transparent);
  color: var(--color-danger-text);
  content: "画像・PDFは1件ずつアップロードしてください";
}
.cs-hub-rr-wait-card {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-info-border);
  border-radius: var(--radius-md);
  background: var(--color-info-bg);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  overflow-wrap: anywhere;
}
.cs-hub-rr-wait-line { margin: 0; }
/* ローカルAIが返信案を作れなかったときの案内（2026-09-19）。引き継ぎ先が無いので目立たせる。 */
.cs-hub-review-local-failure-card {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-danger-subtle);
  border-radius: var(--radius-md);
  background: var(--color-danger-bg);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  overflow-wrap: anywhere;
}
.cs-hub-review-local-failure-title {
  margin: 0;
  color: var(--color-danger-text);
  font-weight: var(--font-weight-bold);
}
.cs-hub-review-local-failure-line { margin: 0; }
.cs-hub-agt-wait-card {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-info-border);
  border-radius: var(--radius-md);
  background: var(--color-info-bg);
  color: var(--text-primary);
}
.cs-hub-agt-wait-title {
  color: var(--color-info);
  font-size: var(--font-size-sm);
}
.cs-hub-agt-wait-description {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}
.cs-hub-agt-wait-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.cs-hub-agt-wait-retry[aria-busy="true"],
.cs-hub-agt-wait-override[aria-busy="true"] { cursor: progress; }
.cs-hub-reply-heading,
.cs-hub-reply-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.cs-hub-reply-route {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  overflow-wrap: anywhere;
}
.cs-hub-reply-title {
  color: var(--text-primary);
  font-size: var(--font-size-sm);
}
.cs-hub-reply-safety {
  color: var(--color-warning-text);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}
.cs-hub-reply-safety.is-live { color: var(--color-danger-text); }
.cs-hub-reply-textarea {
  width: 100%;
  min-height: 54px;
  max-height: 340px;
  align-self: stretch;
  overflow-y: auto;
  resize: vertical;
}
.cs-hub-reply-counter {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}
.cs-hub-reply-footer { flex-wrap: wrap; }
.cs-hub-reply-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-left: auto;
}
.cs-hub-attach-input { display: none; }
.cs-hub-attach-btn {
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0;
}
.cs-hub-emoji-btn {
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0;
}
.cs-hub-attach-btn svg {
  width: var(--space-4);
  height: var(--space-4);
}
.cs-hub-attach-preview {
  display: flex;
  min-width: 0;
  align-items: center;
  align-self: flex-start;
  gap: var(--space-2);
  max-width: 100%;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-muted);
}
.cs-hub-attach-name {
  min-width: 0;
  overflow: hidden;
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cs-hub-attach-remove {
  width: 26px;
  height: 26px;
  min-width: 26px;
  padding: 0;
}
.cs-hub-reply-button { flex-shrink: 0; }
.cs-hub-reply-feedback {
  padding: var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}
.cs-hub-reply-feedback.is-success {
  border-color: var(--color-success);
  background: var(--color-success-bg);
  color: var(--color-success-text);
}
.cs-hub-reply-feedback.is-warning {
  border-color: var(--color-warning);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}
.cs-hub-reply-feedback.is-error {
  border-color: var(--color-danger);
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
}
.cs-hub-draft-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
  border-left: var(--space-1) solid var(--color-primary);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}
.cs-hub-draft-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.cs-hub-draft-title {
  color: var(--color-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
}
.cs-hub-draft-chip { flex: none; }
.cs-hub-draft-meta {
  margin-left: auto;
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}
.cs-hub-draft-toggle { flex: none; margin-left: var(--space-2); }
/* 監査記録（送信済み）を畳んだとき。見出しだけ残し、本文・起票記録・注意書きは隠す。 */
.cs-hub-draft-card.is-collapsed { gap: 0; }
.cs-hub-draft-card.is-collapsed > *:not(.cs-hub-draft-header) { display: none; }
.cs-hub-review-draft {
  display: grid;
  gap: var(--space-2);
}
/* 台帳とAI返信案の食い違い（AIの修正提案・未反映）。承認カード内で点検結果と並べる。 */
.cs-hub-ledger-corrections, .cs-hub-ledger-correction {
  display: grid;
  gap: var(--space-2);
}
.cs-hub-ledger-corrections {
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-muted);
}
.cs-hub-draft-body {
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--bg-muted);
  color: var(--text-primary);
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.cs-hub-agt-summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.cs-hub-agt-summary-chip {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--bg-muted);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
}
/* 設定 > AI参照リンク先（読み取り専用の一覧） */
/* .table td は既定で1行に切り詰める（nowrap + ellipsis）。理由文は全文を読ませたいので折り返す。
   ⚠️ `.cs-external-ref-hosts-reason` 単独では `.table td` に優先度で負ける（クラスのみ < クラス+要素）。 */
.table td.cs-external-ref-hosts-reason {
  white-space: normal;
  overflow: visible;
  text-align: left;
  line-height: var(--line-height-relaxed);
}

.cs-external-ref-hosts-note {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

/* AIが根拠に読んだ社外の公開ページ（承認カード上のボタン列と詳細欄） */
.cs-hub-external-refs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}
.cs-hub-external-refs-label {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}
.cs-hub-external-ref {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  max-width: 100%;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
  color: var(--color-primary);
  font-size: var(--font-size-xs);
  text-decoration: none;
}
.cs-hub-external-ref:hover {
  background: var(--bg-muted);
  text-decoration: underline;
}
.cs-hub-external-ref-title {
  overflow-wrap: anywhere;
}
/* 行き先をAIの付けた名前だけで判断させない。実ホスト名を必ず併記する。 */
.cs-hub-external-ref-host {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  overflow-wrap: anywhere;
}
.cs-hub-external-refs-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.cs-hub-external-refs-empty {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}
.cs-hub-external-refs-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cs-hub-external-ref-used-for {
  margin-top: var(--space-1);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  overflow-wrap: anywhere;
}
.cs-hub-agt-summary-hint,
.cs-hub-ball-proposal-note {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}
.cs-hub-ball-proposal {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-info-border);
  border-radius: var(--radius-md);
  background: var(--color-info-bg);
}
.cs-hub-ball-proposal-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
}
.cs-hub-ball-proposal-checkbox { flex: none; }
.cs-hub-ball-proposal-details {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: var(--space-2);
  row-gap: var(--space-1);
  width: 100%;
  font-size: var(--font-size-sm);
}
.cs-hub-ball-proposal-detail {
  display: contents;
}
.cs-hub-ball-proposal-detail-label {
  color: var(--text-tertiary);
  font-weight: var(--font-weight-bold);
}
.cs-hub-ball-proposal-detail-value {
  min-width: 0;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.cs-hub-ball-proposal-notice {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-relaxed);
}
.cs-hub-ball-proposal-notice.is-warning {
  color: var(--color-warning-text);
}
.cs-hub-return-tracking-auto {
  display: grid;
  gap: var(--space-1);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-success);
  border-radius: var(--radius-md);
  background: var(--color-success-bg);
}
.cs-hub-return-tracking-auto.is-warning {
  border-color: var(--color-warning);
  background: var(--color-warning-bg);
}
.cs-hub-return-tracking-auto-title {
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}
.cs-hub-return-tracking-auto-message {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}
.cs-hub-return-tracking-auto.is-warning .cs-hub-return-tracking-auto-message {
  color: var(--color-warning-text);
}
/* 起票案の注意書き（承認前に見せる但し書き・期限切れ等の警告）。
   楽天の起票案カードとSNS窓口のカードで同じ見た目にする。 */
.cs-hub-action-proposal-notice {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-relaxed);
}
.cs-hub-action-proposal-notice.is-warning {
  color: var(--color-warning-text);
}
.cs-hub-external-inquiry-proposal {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid color-mix(in srgb, #7c3aed 45%, var(--border-default));
  border-left: var(--space-1) solid #7c3aed;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, #7c3aed 8%, var(--bg-surface));
}
.cs-hub-external-inquiry-title {
  color: color-mix(in srgb, #7c3aed 82%, var(--text-primary));
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
}
.cs-hub-external-inquiry-title-row,
.cs-hub-external-inquiry-target-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.cs-hub-external-inquiry-target-summary {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}
.cs-hub-external-inquiry-target-summary.is-unavailable {
  border-color: var(--color-danger-subtle);
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
}
.cs-hub-external-inquiry-target-label {
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
}
.cs-hub-external-inquiry-room-id { overflow-wrap: anywhere; }
.cs-hub-external-inquiry-audience {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  background: var(--bg-muted);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}
.cs-hub-external-inquiry-audience.is-external {
  border-color: var(--color-danger-subtle);
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
}
.cs-hub-external-inquiry-target-warning {
  color: var(--color-danger-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}
.cs-hub-confirm-audience { display: flex; align-items: center; }
.cs-hub-external-inquiry-details {
  display: grid;
  gap: var(--space-1);
}
.cs-hub-external-inquiry-detail {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}
.cs-hub-external-inquiry-detail-label {
  color: var(--text-tertiary);
  font-weight: var(--font-weight-semibold);
}
.cs-hub-external-inquiry-detail-value { overflow-wrap: anywhere; }
.cs-hub-external-inquiry-preview {
  max-height: 240px;
  margin: 0;
  padding: var(--space-3);
  overflow: auto;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.cs-hub-external-inquiry-status {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}
.cs-hub-external-inquiry-status.is-delivery_unknown { color: var(--color-danger); }
.cs-hub-external-inquiry-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.cs-hub-external-inquiry-modal { width: min(640px, calc(100vw - var(--space-6))); }
.cs-hub-external-inquiry-field {
  display: grid;
  gap: var(--space-2);
}
.cs-hub-external-inquiry-field-label {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}
.cs-hub-external-inquiry-message {
  width: 100%;
  min-height: 160px;
  resize: vertical;
}
.cs-hub-external-inquiry-due-at,
.cs-hub-external-inquiry-message-id-input,
.cs-hub-external-inquiry-reject-reason { width: 100%; }
.cs-hub-external-inquiry-message-id[hidden] { display: none !important; }
.cs-hub-external-inquiry-validation {
  min-height: 1.4em;
  color: var(--color-danger);
  font-size: var(--font-size-sm);
}
.cs-hub-action-proposal,
.cs-hub-action-history {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-muted);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}
/* 起票案の詳細・明細は、従来のブラウザ既定表示と同じ値を明示する。
   専用クラスを未定義のままにせず、将来の共通スタイル追加による意図しない変化を防ぐ。 */
.cs-hub-action-proposal-details,
.cs-hub-action-proposal-detail,
.cs-hub-action-proposal-items {
  display: block;
}
.cs-hub-action-proposal-detail-label,
.cs-hub-action-proposal-detail-value,
.cs-hub-action-proposal-item {
  display: inline;
}
.cs-hub-action-history { display: grid; gap: var(--space-1); }
.cs-hub-action-omission { display: grid; gap: var(--space-1); }
.cs-hub-action-omission.is-warning {
  border-color: var(--color-warning);
  background: var(--color-warning-bg);
  color: var(--text-primary);
}
.cs-hub-action-omission-heading { font-weight: var(--font-weight-medium); }
.cs-hub-action-omission-manual { color: var(--color-danger); }
.cs-hub-action-history-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.cs-hub-action-owner-reason { color: var(--text-secondary); }
.cs-hub-action-owner-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.cs-hub-action-owner-note { width: 220px; }
.cs-hub-action-proposal-form {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-3);
}
.cs-hub-action-proposal-field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-1);
}
.cs-hub-action-proposal-field > .input,
.cs-hub-action-proposal-field > .select,
.cs-hub-action-proposal-field > .textarea { width: 100%; }
/* 誤配送の「返送する誤品」行: 返送予定SKU / 品名(任意) / 数量 / 削除 */
.cs-hub-misdelivery-wrong-items {
  display: grid;
  gap: var(--space-2);
}
.cs-hub-misdelivery-wrong-item {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(180px, 1.3fr) 96px auto;
  align-items: end;
  gap: var(--space-2);
}
.cs-hub-misdelivery-wrong-sku {
  font-family: var(--font-mono, monospace);
}
.cs-hub-exchange-pairs {
  display: grid;
  gap: var(--space-3);
}
.cs-hub-exchange-pair {
  display: grid;
  grid-template-columns: minmax(180px, 1.3fr) 96px minmax(180px, 1fr) auto;
  align-items: end;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-muted);
}
.cs-hub-exchange-pair-field {
  display: grid;
  min-width: 0;
  gap: var(--space-1);
}
/* 返金の手動起票は「チェック欄＋対象SKU＋返品数量」の3要素。
   4列前提の既定のままだと商品名が狭い列に押し込まれて縦一列に折り返される。 */
.cs-hub-exchange-pair:has(> [data-refund-line-pick]) {
  grid-template-columns: auto minmax(0, 1fr) 96px;
  align-items: center;
}
.cs-hub-exchange-pair:has(> [data-refund-line-pick]) .cs-hub-action-proposal-detail-value {
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.cs-hub-exchange-pair-field > .input,
.cs-hub-exchange-pair-field > .select,
.cs-hub-exchange-pair-field > .textarea { width: 100%; }
.cs-hub-exchange-pair-label {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}
.cs-hub-exchange-pair-add { justify-self: start; }
.cs-hub-partial-exchange-toggle {
  grid-column: 1 / -1;
  order: 5;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
}
.cs-hub-partial-exchange-editor {
  grid-column: 1 / -1;
  order: 6;
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}
.cs-hub-partial-exchange-status {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}
.cs-hub-partial-exchange-status.is-warning { color: var(--color-warning-text); }
.cs-hub-partial-component-list {
  display: grid;
  gap: var(--space-2);
}
.cs-hub-partial-component-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) 88px auto;
  align-items: end;
  gap: var(--space-2);
}
.cs-hub-partial-component-add { justify-self: start; }
@media (max-width: 760px) {
  .cs-hub-exchange-pair {
    grid-template-columns: minmax(0, 1fr) 88px;
  }
  .cs-hub-exchange-pair-field:not(.is-quantity) { grid-column: 1 / -1; }
  .cs-hub-exchange-pair-remove { justify-self: end; }
  .cs-hub-partial-component-row {
    grid-template-columns: minmax(0, 1fr) 88px;
  }
  .cs-hub-partial-component-row .cs-hub-exchange-pair-field:not(.is-quantity) {
    grid-column: 1 / -1;
  }
}
.cs-hub-action-picker { position: relative; display: inline-flex; }
.cs-hub-action-popover {
  position: fixed;
  z-index: 1200;
  display: grid;
  gap: var(--space-2);
  min-width: 300px;
  /* 起票の種類が増えて画面の高さを超えるため、画面内に収めて中をスクロールさせる */
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-3);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  box-shadow: var(--shadow-lg);
}
.cs-hub-action-popover-heading { color: var(--text-muted); font-size: var(--font-size-xs); }
.cs-hub-action-option { width: 100%; justify-content: flex-start; }
.cs-hub-action-decision {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}
.cs-hub-action-decision-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}
.cs-hub-action-reject-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-end;
}
.cs-hub-action-flow {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-left: var(--space-1) solid var(--color-primary);
  background: var(--color-primary-bg);
  color: var(--text-secondary);
}
.cs-hub-action-flow-title {
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}
.cs-hub-action-flow-list {
  display: grid;
  gap: var(--space-1);
  margin: var(--space-1);
  padding-left: var(--space-5);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}
.cs-hub-action-flow-step[aria-current="step"] {
  color: var(--color-primary-active);
  font-weight: var(--font-weight-semibold);
}
@media (max-width: 760px) {
  .cs-hub-action-decision-actions { grid-template-columns: minmax(0, 1fr); }
}
.cs-hub-action-decision-badge { justify-self: start; }
.cs-hub-action-reject-popover { min-width: 340px; }
.cs-hub-action-reject-input,
.cs-hub-action-waiver-reason,
.cs-hub-action-waiver-evidence { width: 100%; }
.cs-hub-action-reject-validation,
.cs-hub-action-waiver-validation {
  color: var(--color-danger-text);
  font-size: var(--font-size-xs);
}
.cs-hub-action-waiver {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-default);
}
.cs-hub-action-unknown-resolution {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-default);
}
.cs-hub-action-unknown-note {
  color: var(--color-danger-text);
  font-size: var(--font-size-sm);
}
.cs-hub-action-unknown-field {
  display: grid;
  gap: var(--space-1);
}
.cs-hub-action-unknown-label {
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
}
.cs-hub-action-unknown-select,
.cs-hub-action-unknown-evidence { width: 100%; }
.cs-hub-action-unknown-validation {
  color: var(--color-danger-text);
  font-size: var(--font-size-xs);
}
.cs-hub-action-unknown-submit { justify-self: end; }
.cs-hub-action-waiver-note {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}
.cs-hub-draft-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.cs-hub-draft-execution,
.cs-hub-draft-feedback {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}
.cs-hub-draft-execution.is-running {
  border-color: var(--color-info-border);
  background: var(--color-info-bg);
  color: var(--color-info);
}
.cs-hub-draft-execution.is-unknown,
.cs-hub-draft-feedback.is-error {
  border-color: var(--color-danger);
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
}
.cs-hub-delivery-bounce-banner {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-md);
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-relaxed);
}
.cs-hub-delivery-bounce-banner[hidden] { display: none; }
.cs-hub-draft-feedback.is-success {
  border-color: var(--color-success);
  background: var(--color-success-bg);
  color: var(--color-success-text);
}
.cs-hub-draft-feedback.is-warning {
  border-color: var(--color-warning);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}
/* 返送品の相違。承認の直前に必ず目に入るよう、他の注記より一段強く出す。 */
.cs-hub-draft-return-discrepancy {
  font-weight: var(--font-weight-medium);
}
.cs-hub-confirm-modal { max-width: 640px; }
.cs-hub-confirm-modal.is-action-proposal { max-width: 920px; }
.cs-hub-confirm-title,
.cs-hub-draft-report-title {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}
.cs-hub-confirm-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.cs-hub-case-registration-fields,
.cs-hub-case-registration-text-fields {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-3);
}
.cs-hub-case-registration-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
.cs-hub-case-registration-field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-1);
}
.cs-hub-case-registration-field.is-wide { grid-column: 1 / -1; }
.cs-hub-case-registration-field > .input,
.cs-hub-case-registration-field > .select,
.cs-hub-case-registration-field > .textarea { width: 100%; }
@media (max-width: 640px) {
  .cs-hub-case-registration-grid { grid-template-columns: minmax(0, 1fr); }
  .cs-hub-case-registration-field.is-wide { grid-column: auto; }
}
.cs-hub-confirm-details {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-2) var(--space-3);
  margin: 0;
}
.cs-hub-confirm-label {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}
.cs-hub-confirm-value {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  overflow-wrap: anywhere;
}
.cs-hub-confirm-preview {
  max-height: 260px;
  padding: var(--space-3);
  overflow-y: auto;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-muted);
  color: var(--text-primary);
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.cs-hub-confirm-warning { margin: 0; }
#csAgtDraftReportSubPanel {
  min-height: 0;
  overflow: hidden;
  padding: var(--space-5) var(--space-6);
  background: var(--bg-body);
}
.cs-hub-draft-report {
  display: flex;
  height: 100%;
  min-height: 0;
  flex-direction: column;
  gap: var(--space-4);
  overflow-y: auto;
  padding-bottom: var(--space-4);
}
.cs-hub-draft-report-title {
  font-size: var(--font-size-2xl);
}
.cs-hub-draft-report-toolbar {
  min-height: var(--toolbar-height);
  flex: none;
  margin: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
}
.cs-hub-draft-report-field {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-base);
}
.cs-hub-draft-report-content {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: var(--space-4);
}
/* 返送カンバン起点の承認待ち。親（.cs-hub-draft-report）が flex column なので、
   flex: none が無いと高さを潰されて後続のツールバー・統計カードと重なる
   （2026-09-05 本番で実際に重なり、中身が読めなかった）。
   ツールバー（.cs-hub-draft-report-toolbar）が既に同じ理由で flex: none を持つ。 */
.cs-hub-draft-report-rr-pending {
  flex: none;
}
.cs-hub-draft-report-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}
.cs-hub-draft-report-kpi {
  min-width: 0;
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}
.cs-hub-draft-report-kpi-label {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}
.cs-hub-draft-report-kpi-value {
  margin-top: var(--space-1);
  color: var(--text-primary);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  line-height: var(--line-height-tight);
}
.cs-hub-draft-report-kpi.is-approve .cs-hub-draft-report-kpi-value {
  color: var(--color-success-text);
}
.cs-hub-draft-report-kpi.is-edit .cs-hub-draft-report-kpi-value {
  color: var(--color-primary);
}
.cs-hub-draft-report-kpi.is-reject .cs-hub-draft-report-kpi-value,
.cs-hub-draft-report-kpi.is-unknown .cs-hub-draft-report-kpi-value {
  color: var(--color-danger-text);
}
/* 取引先からの連絡の表。判断の文章が主役なので、中央寄せにせず左から読ませる。 */
#partnerReportsSubPanel .table th,
#partnerReportsSubPanel .table td {
  text-align: left;
  vertical-align: top;
  white-space: normal;
  word-break: break-word;
}
/* 「AIの判断」列に文章が入るので、そこを広く取る（日時と手がかりは短い） */
#partnerReportsSubPanel .table th:nth-child(1),
#partnerReportsSubPanel .table td:nth-child(1) { width: 12%; white-space: nowrap; }
#partnerReportsSubPanel .table th:nth-child(2),
#partnerReportsSubPanel .table td:nth-child(2) { width: 14%; }
#partnerReportsSubPanel .table th:nth-child(4),
#partnerReportsSubPanel .table td:nth-child(4) { width: 18%; white-space: normal; }

.partner-report-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-1);
}

.partner-report-actions a,
.partner-report-actions .btn {
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}

/* 取引先からの連絡（顧客対応の3つ目の起点）の補助テキスト */
.partner-report-note {
  margin-top: var(--space-1);
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
}

.cs-hub-draft-report-kpi-help {
  margin-top: var(--space-1);
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
}
.cs-hub-draft-report-table-card { padding: var(--space-4); }
.cs-hub-draft-report-section-title {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
}
.cs-hub-draft-report-help {
  margin: var(--space-1) 0 0;
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}
.cs-hub-draft-report-table-wrap {
  margin-top: var(--space-3);
  overflow-x: auto;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
}
.cs-hub-draft-report-table {
  width: 100%;
  min-width: 1160px;
  border-collapse: collapse;
  font-size: var(--font-size-base);
  font-variant-numeric: tabular-nums;
}
.cs-hub-draft-report-table th,
.cs-hub-draft-report-table td {
  padding: var(--space-2);
  border-bottom: 1px solid var(--border-default);
  text-align: right;
  white-space: nowrap;
}
.cs-hub-draft-report-table th {
  background: var(--bg-muted);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}
.cs-hub-draft-report-table th:first-child,
.cs-hub-draft-report-table td:first-child { text-align: left; }
.cs-hub-draft-report-main-row:hover { background: var(--bg-muted); }
.cs-hub-draft-report-main-row.is-expanded { background: var(--color-primary-bg); }
.cs-hub-draft-report-month { font-weight: var(--font-weight-semibold); }
.cs-hub-draft-report-expand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}
.cs-hub-draft-report-expand:focus-visible {
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-focus);
  outline: none;
}
.cs-hub-draft-report-expand-icon {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  transition: transform var(--transition-normal);
}
.cs-hub-draft-report-expand-icon.is-open { transform: rotate(90deg); }
.cs-hub-draft-report-rate { font-weight: var(--font-weight-bold); }
.cs-hub-draft-report-rate.is-approve { color: var(--color-success-text); }
.cs-hub-draft-report-rate.is-edit { color: var(--color-primary); }
.cs-hub-draft-report-rate.is-reject { color: var(--color-danger-text); }
.cs-hub-draft-report-muted { color: var(--text-muted); }
.cs-hub-draft-report-compose-cell { min-width: 180px; }
.cs-hub-draft-report-compose {
  display: flex;
  min-width: 160px;
  height: var(--space-2);
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--bg-subtle);
}
.cs-hub-draft-report-compose-segment {
  height: 100%;
  flex: 0 0 auto;
}
.cs-hub-draft-report-compose-segment.is-plain,
.cs-hub-draft-report-legend-dot.is-plain { background: var(--color-success); }
.cs-hub-draft-report-compose-segment.is-edited,
.cs-hub-draft-report-legend-dot.is-edited { background: var(--color-primary); }
.cs-hub-draft-report-compose-segment.is-rejected,
.cs-hub-draft-report-legend-dot.is-rejected { background: var(--color-danger); }
.cs-hub-draft-report-compose-segment.is-pending,
.cs-hub-draft-report-legend-dot.is-pending { background: var(--border-medium); }
.cs-hub-draft-report-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-3);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}
.cs-hub-draft-report-legend-dot {
  display: inline-block;
  width: var(--space-2);
  height: var(--space-2);
  margin-right: var(--space-1);
  border-radius: var(--radius-full);
  vertical-align: middle;
}
.cs-hub-draft-report-footnote {
  margin: var(--space-3) 0 0;
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}
.cs-hub-draft-report-detail-row > td {
  padding: 0;
  background: var(--bg-muted);
}
.cs-hub-draft-report-detail-row[hidden] { display: none; }
.cs-hub-draft-report-detail-wrap {
  padding: var(--space-3) var(--space-4) var(--space-4) var(--space-8);
}
.cs-hub-draft-report-detail-title {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}
.cs-hub-draft-report-detail-table {
  width: 100%;
  margin-top: var(--space-2);
  border-collapse: collapse;
  table-layout: fixed;
}
.cs-hub-draft-report-detail-table th,
.cs-hub-draft-report-detail-table td {
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-subtle);
  text-align: right;
}
.cs-hub-draft-report-detail-note {
  margin: var(--space-2) 0 0;
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-relaxed);
  white-space: normal;
}
.cs-hub-draft-report-action-card {
  border-color: var(--color-primary);
}
.cs-hub-draft-report-gate-note {
  margin: var(--space-3) 0 0;
  padding: var(--space-3);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-lg);
  background: var(--color-primary-bg);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-relaxed);
}
.cs-hub-draft-report-action-table {
  min-width: 1660px;
}
.cs-hub-draft-report-action-table th:nth-child(2),
.cs-hub-draft-report-action-table td:nth-child(2),
.cs-hub-draft-report-action-table th:nth-child(12),
.cs-hub-draft-report-action-table td:nth-child(12),
.cs-hub-draft-report-action-table th:nth-child(13),
.cs-hub-draft-report-action-table td:nth-child(13) {
  text-align: left;
}
.cs-hub-draft-report-action-row:hover {
  background: var(--bg-muted);
}
.cs-hub-draft-report-action-row.is-no-proposal {
  background: var(--bg-subtle);
}
.cs-hub-draft-report-action-type strong,
.cs-hub-draft-report-action-code {
  display: block;
}
.cs-hub-draft-report-action-code {
  margin-top: var(--space-1);
  color: var(--text-muted);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
}
.cs-hub-draft-report-table td.cs-hub-draft-report-breakdown {
  max-width: 260px;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  white-space: normal;
}
.cs-hub-draft-report-no-proposal {
  color: var(--text-secondary);
  font-weight: var(--font-weight-bold);
}
.cs-hub-draft-report-action-empty {
  margin: var(--space-4) 0 0;
  padding: var(--space-5);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-lg);
  color: var(--text-tertiary);
  text-align: center;
}
.cs-hub-draft-report-state { padding: var(--space-6); }
@media (max-width: 980px) {
  .cs-hub-draft-report-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-hub-list-header-actions {
    align-items: flex-end;
    flex-direction: column;
  }
}
.cs-hub-message-attachments {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.cs-hub-attachment-item {
  display: flex;
  max-width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-muted);
}
.cs-hub-attachment-name {
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
  overflow-wrap: anywhere;
}
.cs-hub-attachment-status {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
}
.cs-hub-attachment-status.is-error {
  color: var(--color-danger-text);
}
.cs-hub-attachment-thumbnail-button {
  max-width: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  cursor: zoom-in;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.cs-hub-attachment-thumbnail-button:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}
.cs-hub-attachment-thumbnail-button:focus-visible {
  border-color: var(--border-focus);
  box-shadow: var(--shadow-focus);
  outline: none;
}
.cs-hub-attachment-thumbnail {
  display: block;
  width: auto;
  max-width: 240px;
  height: auto;
  max-height: 180px;
  object-fit: contain;
}
.cs-hub-attachment-download {
  max-width: 100%;
  white-space: normal;
}
.cs-hub-attachment-modal {
  width: min(920px, calc(100% - var(--space-8)));
  max-width: none;
  max-height: calc(100vh - var(--space-8));
}
.cs-hub-attachment-modal-title {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
}
.cs-hub-attachment-modal-close {
  color: var(--text-secondary);
  font-size: var(--font-size-xl);
}
.cs-hub-attachment-modal-body {
  display: flex;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  background: var(--bg-muted);
}
.cs-hub-attachment-modal-image {
  display: block;
  max-width: 100%;
  max-height: calc(80vh - 120px);
  object-fit: contain;
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-md);
}
.cs-hub-attachment-modal-caption {
  max-width: 100%;
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  overflow-wrap: anywhere;
}
.cs-hub-orders-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-2);
}
.cs-hub-order-card {
  padding: 10px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-muted);
}
.cs-hub-order-card.is-missing { border-style: dashed; }
.cs-hub-order-header,
.cs-hub-order-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.cs-hub-order-number {
  color: var(--text-primary);
  font-size: var(--font-size-base);
  overflow-wrap: anywhere;
}
.cs-hub-order-meta {
  margin-top: var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}
.cs-hub-order-items {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-5);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}
.cs-hub-order-missing {
  margin: var(--space-2) 0 0;
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}
.cs-hub-placeholders {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-default);
}
.cs-hub-placeholder {
  padding: var(--space-2);
  border: 1px dashed var(--border-medium);
  border-radius: var(--radius-lg);
  background: var(--bg-muted);
}
.cs-hub-placeholder-title {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}
.cs-hub-placeholder-text {
  margin: var(--space-1) 0 0;
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-relaxed);
}
.cs-hub-customer-section { padding: 0; }
.cs-hub-customer-section > .cs-hub-section-header {
  padding: 0;
  border-bottom: 0;
}
.cs-hub-customer-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.cs-hub-customer-profile {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-surface);
}
.cs-hub-customer-avatar {
  display: flex;
  width: var(--space-8);
  height: var(--space-8);
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xl);
  background: var(--color-primary);
  color: var(--text-inverse);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
}
.cs-hub-customer-profile-main { min-width: 0; }
.cs-hub-customer-profile-name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  flex-wrap: wrap;
}
.cs-hub-customer-verified {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-success-subtle);
  color: var(--color-success-text);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}
.cs-hub-customer-masked-id {
  margin-top: var(--space-1);
  overflow-wrap: anywhere;
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}
.cs-hub-customer-accordion {
  border-bottom: 1px solid var(--border-default);
}
.cs-hub-customer-accordion-summary,
.cs-hub-customer-order-summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.cs-hub-customer-accordion-summary {
  padding: var(--space-3) var(--space-4);
}
.cs-hub-customer-accordion-summary::-webkit-details-marker,
.cs-hub-customer-order-summary::-webkit-details-marker { display: none; }
.cs-hub-customer-arrow,
.cs-hub-customer-order-arrow {
  flex: none;
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  transition: transform var(--transition-normal);
}
.cs-hub-customer-accordion[open] > .cs-hub-customer-accordion-summary .cs-hub-customer-arrow,
.cs-hub-customer-order[open] > .cs-hub-customer-order-summary .cs-hub-customer-order-arrow {
  transform: rotate(90deg);
}
.cs-hub-customer-section-dot {
  width: var(--space-2);
  height: var(--space-2);
  flex: none;
  border-radius: var(--radius-sm);
  background: var(--text-muted);
}
.cs-hub-customer-accordion.is-purchases .cs-hub-customer-section-dot { background: var(--color-primary); }
.cs-hub-customer-accordion.is-inquiries .cs-hub-customer-section-dot { background: var(--color-info); }
.cs-hub-customer-accordion.is-reviews .cs-hub-customer-section-dot { background: var(--color-warning); }
.cs-hub-customer-accordion.is-novelties .cs-hub-customer-section-dot { background: var(--color-warning); }
.cs-hub-customer-accordion.is-instagram .cs-hub-customer-section-dot { background: var(--color-danger); }
.cs-hub-customer-accordion.is-line .cs-hub-customer-section-dot { background: var(--color-line-brand); }
.cs-hub-customer-accordion.is-ai-judgement .cs-hub-customer-section-dot { background: var(--color-info); }
.cs-hub-customer-section-label {
  color: var(--text-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
}
.cs-hub-customer-section-summary {
  margin-left: auto;
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-align: right;
}
.cs-hub-customer-accordion-body {
  padding: var(--space-1) var(--space-4) var(--space-4);
}
.cs-hub-ai-judgement-grid {
  display: grid;
  grid-template-columns: 5.5em minmax(0, 1fr);
  gap: var(--space-1) var(--space-2);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
}
.cs-hub-ai-review {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  flex-wrap: wrap;
  min-width: 0;
  color: var(--text-secondary);
}
.cs-hub-ai-review-unavailable { color: var(--color-danger-text); }
.cs-hub-ai-review-reasons {
  flex-basis: 100%;
  margin: 0;
  padding-left: var(--space-5);
  color: var(--color-danger-text);
  overflow-wrap: anywhere;
}
.cs-hub-review-danger { white-space: nowrap; }
.cs-hub-ai-judgement-block { margin-top: var(--space-3); }
.cs-hub-ai-judgement-accordion { margin-top: var(--space-3); }
.cs-hub-ai-judgement-accordion-summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.cs-hub-ai-judgement-accordion-summary::-webkit-details-marker { display: none; }
.cs-hub-ai-judgement-arrow {
  flex: none;
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  transition: transform var(--transition-normal);
}
.cs-hub-ai-judgement-accordion[open]
  > .cs-hub-ai-judgement-accordion-summary
  .cs-hub-ai-judgement-arrow {
  transform: rotate(90deg);
}
.cs-hub-ai-judgement-title {
  color: var(--text-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
}
.cs-hub-ai-judgement-accordion-body { padding-top: var(--space-1); }
.cs-hub-ai-reasoning-list {
  margin: 0;
  padding-left: var(--space-5);
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
}
.cs-hub-ai-reasoning-empty {
  color: var(--text-tertiary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
}
.cs-hub-ai-clause-quote {
  margin-top: var(--space-1);
  padding: var(--space-2);
  border-left: 3px solid var(--color-info);
  border-radius: var(--radius-md);
  background: var(--bg-muted);
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  white-space: pre-wrap;
}
.cs-hub-customer-empty {
  padding: var(--space-3);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--bg-muted);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}
.cs-hub-customer-target-label,
.cs-hub-customer-inferred-target-label,
.cs-hub-customer-history-label {
  color: var(--color-warning-text);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}
.cs-hub-customer-inferred-target-label {
  color: var(--color-info);
}
.cs-hub-customer-inferred-target-description {
  margin-top: var(--space-1);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}
.cs-hub-customer-inferred-target-actions {
  display: flex;
  margin-top: var(--space-2);
}
.cs-hub-customer-history-label {
  margin-top: var(--space-3);
  color: var(--text-muted);
}
.cs-hub-customer-inquiry-row.is-linked {
  color: inherit;
  text-decoration: none;
}
.cs-hub-customer-inquiry-row.is-linked:hover {
  background: var(--bg-hover);
}
.cs-hub-customer-inquiry-channel {
  padding: 0 var(--space-1);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}
.cs-hub-customer-unlink {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
}
.cs-hub-customer-unlink-feedback {
  color: var(--color-warning-text);
  font-size: var(--font-size-xs);
}
.cs-hub-customer-manual-link {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
}
.cs-hub-customer-manual-link-title {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}
.cs-hub-customer-manual-link-note {
  margin-top: var(--space-1);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}
.cs-hub-customer-manual-link-row {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.cs-hub-customer-manual-link-select {
  flex: 0 0 auto;
}
.cs-hub-customer-manual-link-input {
  flex: 1 1 auto;
  min-width: 0;
}
.cs-hub-customer-manual-link-feedback {
  margin-top: var(--space-2);
  color: var(--color-warning-text);
  font-size: var(--font-size-xs);
}
.cs-hub-customer-manual-link-reason {
  margin-top: var(--space-2);
}
.cs-hub-customer-manual-link-force {
  margin-top: var(--space-2);
}
.cs-hub-customer-order {
  margin-top: var(--space-2);
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
}
.cs-hub-customer-order.is-target {
  border-color: var(--color-warning);
  box-shadow: var(--shadow-focus);
}
.cs-hub-customer-order.is-inferred {
  border-color: var(--color-info);
}
.cs-hub-customer-order-summary {
  padding: var(--space-2) var(--space-3);
}
.cs-hub-customer-marketplace {
  display: flex;
  min-width: var(--space-5);
  height: var(--space-5);
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--text-tertiary);
  color: var(--text-inverse);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}
.cs-hub-customer-marketplace.is-yahoo,
.cs-hub-customer-marketplace.is-rakuten { background: var(--color-danger); }
.cs-hub-customer-marketplace.is-shopify { background: var(--color-success-dark); }
.cs-hub-customer-marketplace.is-amazon { background: var(--color-warning); }
.cs-hub-customer-marketplace.is-aupay { background: var(--color-info); }
.cs-hub-customer-order-date {
  flex: none;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}
.cs-hub-customer-order-number {
  min-width: 0;
  overflow: hidden;
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cs-hub-customer-order-status {
  margin-left: auto;
  flex: none;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-warning-subtle);
  color: var(--color-warning-text);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}
.cs-hub-customer-order-amount {
  flex: none;
  color: var(--text-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
}
.cs-hub-customer-boss-link {
  display: inline-flex;
  text-decoration: none;
}
.cs-hub-customer-order-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
/* 払込票を確認（KOMOJU コンビニ決済） */
.cs-hub-komoju {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.cs-hub-komoju-slot,
.cs-hub-komoju-result {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-self: stretch;
}
.cs-hub-customer-lship-picker {
  position: relative;
}
.cs-hub-customer-lship-popover {
  position: fixed;
  z-index: var(--z-tooltip);
  display: grid;
  min-width: 180px;
  max-width: calc(100vw - var(--space-4));
  max-height: calc(100vh - var(--space-4));
  gap: var(--space-1);
  padding: var(--space-2);
  overflow-y: auto;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-xl);
}
.cs-hub-customer-lship-heading {
  padding: 0 var(--space-1);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}
.cs-hub-customer-lship-option {
  width: 100%;
  justify-content: flex-start;
  white-space: nowrap;
}
.cs-hub-customer-order-detail {
  padding: var(--space-3);
  border-top: 1px solid var(--border-light);
  background: var(--bg-muted);
}
.cs-hub-customer-priority-group {
  margin-top: var(--space-3);
}
.cs-hub-customer-priority-title {
  margin: 0 0 var(--space-1);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}
.cs-hub-customer-amazon-returns {
  overflow-wrap: anywhere;
}
.cs-hub-customer-return-request + .cs-hub-customer-return-request {
  border-top: 1px solid var(--border-default);
  padding-top: var(--space-3);
}
.cs-hub-customer-return-fields {
  margin: var(--space-2) 0 var(--space-3);
}
.cs-hub-customer-return-fields > dd {
  margin: 0;
}
.cs-hub-customer-return-notice {
  margin: var(--space-2) 0;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}
.cs-hub-customer-field-grid {
  display: grid;
  grid-template-columns: minmax(calc(var(--space-8) + var(--space-8)), 0.35fr) minmax(0, 1fr);
  gap: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
}
.cs-hub-customer-field-label {
  color: var(--text-tertiary);
  font-weight: var(--font-weight-semibold);
}
.cs-hub-customer-field-value {
  overflow-wrap: anywhere;
  color: var(--text-primary);
  white-space: pre-wrap;
}
.cs-hub-customer-subheading {
  margin: var(--space-3) 0 var(--space-1);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}
.cs-hub-customer-order-items {
  overflow: hidden;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
}
.cs-hub-customer-order-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--border-light);
}
.cs-hub-customer-order-item:first-child { border-top: 0; }
.cs-hub-customer-item-thumbnail {
  width: calc(var(--space-8) + var(--space-2));
  height: calc(var(--space-8) + var(--space-2));
  flex: none;
  border-radius: var(--radius-lg);
  background: var(--bg-muted);
  object-fit: contain;
}
.cs-hub-customer-item-icon {
  display: flex;
  width: var(--space-8);
  height: var(--space-8);
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  background: var(--bg-active);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}
.cs-hub-customer-item-main {
  min-width: 0;
  flex: 1;
}
.cs-hub-customer-item-name {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}
.cs-hub-customer-item-link {
  color: var(--color-primary);
  text-decoration: none;
}
.cs-hub-customer-item-link:hover,
.cs-hub-customer-item-link:focus-visible {
  text-decoration: underline;
}
.cs-hub-customer-item-sku {
  margin-top: var(--space-1);
  overflow-wrap: anywhere;
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}
.cs-hub-customer-item-fallback {
  margin-top: var(--space-1);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}
.cs-hub-customer-item-quantity {
  flex: none;
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}
.cs-hub-customer-item-price {
  flex: none;
  color: var(--text-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}
.cs-hub-customer-order-extra {
  margin-top: var(--space-3);
  border-top: 1px solid var(--border-light);
}
.cs-hub-customer-order-extra-summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.cs-hub-customer-order-extra-summary::-webkit-details-marker { display: none; }
.cs-hub-customer-order-extra[open] > .cs-hub-customer-order-extra-summary .cs-hub-customer-order-arrow {
  transform: rotate(90deg);
}
.cs-hub-customer-order-extra-label {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}
.cs-hub-customer-order-extra-fields {
  padding: var(--space-2) 0;
}
.cs-hub-customer-total-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--border-light);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}
.cs-hub-customer-total-row.is-emphasis {
  color: var(--text-primary);
  font-weight: var(--font-weight-bold);
}
.cs-hub-customer-total-label { color: var(--text-tertiary); }
.cs-hub-customer-total-value {
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
}
.cs-hub-customer-more-note {
  padding-top: var(--space-2);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  text-align: center;
}
.cs-hub-customer-inquiry-row,
.cs-hub-customer-review-row,
.cs-hub-customer-novelty-row,
.cs-hub-customer-phone-row,
.cs-hub-customer-line-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--border-light);
}
.cs-hub-customer-inquiry-row:first-child,
.cs-hub-customer-review-row:first-child,
.cs-hub-customer-novelty-row:first-child,
.cs-hub-customer-phone-row:first-child,
.cs-hub-customer-line-row:first-child { border-top: 0; }
.cs-hub-customer-inquiry-dot {
  width: var(--space-2);
  height: var(--space-2);
  margin-top: var(--space-1);
  flex: none;
  border-radius: var(--radius-full);
  background: var(--color-danger);
}
.cs-hub-customer-inquiry-dot.is-done { background: var(--color-success); }
.cs-hub-customer-inquiry-main,
.cs-hub-customer-review-main,
.cs-hub-customer-novelty-main,
.cs-hub-customer-phone-main,
.cs-hub-customer-line-main,
.cs-hub-customer-instagram-main {
  min-width: 0;
  flex: 1;
}
.cs-hub-customer-inquiry-subject {
  margin-top: var(--space-1);
  overflow: hidden;
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cs-hub-customer-inquiry-meta {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
}
.cs-hub-customer-inquiry-date,
.cs-hub-customer-review-date {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}
.cs-hub-customer-review-score {
  flex: none;
  color: var(--text-muted);
  text-align: center;
}
.cs-hub-customer-review-stars {
  color: var(--color-warning);
  font-size: var(--font-size-md);
  white-space: nowrap;
}
.cs-hub-customer-review-number { font-size: var(--font-size-xs); }
.cs-hub-customer-review-title,
.cs-hub-customer-novelty-code,
.cs-hub-customer-phone-time,
.cs-hub-customer-line-name {
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}
.cs-hub-customer-review-comment,
.cs-hub-customer-instagram-bio {
  display: -webkit-box;
  margin-top: var(--space-1);
  overflow: hidden;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.cs-hub-customer-review-source,
.cs-hub-customer-novelty-date,
.cs-hub-customer-phone-meta,
.cs-hub-customer-line-since,
.cs-hub-customer-instagram-name {
  margin-top: var(--space-1);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}
.cs-hub-customer-novelty-row,
.cs-hub-customer-phone-row,
.cs-hub-customer-line-row { align-items: center; }
.cs-hub-customer-novelty-icon,
.cs-hub-customer-phone-icon,
.cs-hub-customer-line-icon,
.cs-hub-customer-instagram-icon {
  display: flex;
  width: var(--space-8);
  height: var(--space-8);
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xl);
  background: var(--color-warning-subtle);
  color: var(--color-warning-text);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
}
.cs-hub-customer-phone-icon {
  background: var(--color-info-subtle);
  color: var(--color-info);
}
.cs-hub-customer-novelty-status {
  flex: none;
  color: var(--color-success-text);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}
.cs-hub-customer-instagram {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.cs-hub-customer-instagram-icon {
  background: var(--color-danger-subtle);
  color: var(--color-danger-text);
  font-size: var(--font-size-xl);
}
.cs-hub-customer-instagram-account {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  flex-wrap: wrap;
}
.cs-hub-customer-pro-badge {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-warning-subtle);
  color: var(--color-warning-text);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}
.cs-hub-customer-instagram-stats {
  margin-top: var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}
.cs-hub-customer-line-icon {
  background: var(--color-line-brand);
  color: var(--text-inverse);
}
.cs-hub-customer-line-icon.is-off {
  background: var(--bg-active);
  color: var(--text-muted);
}
.cs-hub-customer-line-status {
  flex: none;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}
.cs-hub-customer-line-status.is-following {
  background: var(--color-success-subtle);
  color: var(--color-success-text);
}
.cs-hub-customer-line-status.is-not-following {
  background: var(--bg-subtle);
  color: var(--text-muted);
}
.cs-hub-customer-stub {
  margin: var(--space-3) var(--space-4) var(--space-4);
  padding: var(--space-3);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--bg-muted);
}
.cs-hub-customer-stub-title {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}
.cs-hub-customer-stub-text {
  margin: var(--space-1) 0 0;
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-relaxed);
}
@media (max-width: 1180px) {
  .cs-hub-root { grid-template-columns: minmax(300px, 344px) minmax(360px, 1.4fr); }
  .cs-hub-customer-section { grid-column: 1 / -1; min-height: 300px; }
}
@media (max-width: 760px) {
  #csHubSubPanel { overflow-y: auto; }
  .cs-hub-root { display: flex; flex-direction: column; height: auto; }
  .cs-hub-section { min-height: 360px; }
  .cs-hub-customer-section { min-height: 320px; }
}

.inquiry-empty {
  text-align: center;
  color: #9ca3af;
  font-size: 13px;
  padding: 40px 16px;
}
.inquiry-empty-icon {
  font-size: 32px;
  margin-bottom: 12px;
}
.inquiry-hint {
  font-size: 11px;
  color: #d1d5db;
  margin-top: 8px;
}

.inquiry-error {
  background: #fef2f2;
  color: #991b1b;
  padding: 12px;
  border-radius: 8px;
  font-size: 12px;
  border: 1px solid #fecaca;
}

.inquiry-header {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.inquiry-category-badge {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 600;
  background: #dbeafe;
  color: #1e40af;
}
.inquiry-type-badge {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  background: #f3f4f6;
  color: #374151;
}

.inquiry-meta {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  color: #374151;
  line-height: 1.8;
}
.inquiry-number {
  font-size: 11px;
  color: #6b7280;
  word-break: break-all;
}

/* 注文サマリー */
.inq-order-summary {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid #e5e7eb;
  font-size: 11px;
  color: #374151;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.inq-os-row {
  display: flex;
  gap: 6px;
  align-items: baseline;
  flex-wrap: wrap;
}
.inq-os-label {
  color: #9ca3af;
  flex-shrink: 0;
  min-width: 52px;
}
.inq-os-items {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.inq-os-notes {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.inq-os-note {
  color: #b45309;
  word-break: break-all;
}
.inq-os-notes-row .inq-os-label {
  color: #b45309;
}

.inquiry-thread {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.inquiry-msg {
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.inquiry-msg.user {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-bottom-left-radius: 4px;
}
.inquiry-msg.merchant {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-bottom-right-radius: 4px;
}
.inquiry-msg-header {
  font-size: 11px;
  color: #6b7280;
  margin-bottom: 4px;
  display: flex;
  justify-content: space-between;
}
.inquiry-msg-from {
  font-weight: 600;
  color: #374151;
}
.inquiry-msg-from.merchant {
  color: #1e40af;
}
.inquiry-attachments {
  margin-top: 6px;
}
.inquiry-attachment-img {
  margin-top: 4px;
}
.inquiry-attachment-image {
  max-width: 100%;
  max-height: 200px;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  cursor: pointer;
}
.inquiry-attachment-image:hover {
  opacity: 0.85;
}
.inquiry-attachment-file {
  font-size: 11px;
  color: #6b7280;
  padding: 4px 8px;
  background: #f3f4f6;
  border-radius: 4px;
  margin-top: 4px;
  display: inline-block;
}

.inquiry-generate-btn {
  width: 100%;
  padding: 12px;
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.inquiry-generate-btn:hover { background: #1d4ed8; }
.inquiry-generate-btn:disabled {
  background: #9ca3af;
  cursor: not-allowed;
}

.inquiry-draft-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.inquiry-draft-header h4 {
  font-size: 13px;
  color: #1f2937;
  margin: 0;
}
.inquiry-char-count {
  font-size: 11px;
  color: #6b7280;
}
.inquiry-char-count.over {
  color: #ef4444;
  font-weight: 600;
}

.inquiry-draft {
  width: 100%;
  min-height: 160px;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  line-height: 1.6;
  resize: vertical;
  color: #1f2937;
}
.inquiry-draft:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.inquiry-draft-actions {
  display: flex;
  gap: 8px;
}
.inquiry-send-btn {
  flex: 1;
  padding: 10px;
  background: #22c55e;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.inquiry-send-btn:hover { background: #16a34a; }
.inquiry-send-btn:disabled {
  background: #9ca3af;
  cursor: not-allowed;
}
.inquiry-regenerate-btn {
  padding: 10px 16px;
  background: #e5e7eb;
  color: #374151;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
}
.inquiry-regenerate-btn:hover { background: #d1d5db; }
.inquiry-regenerate-btn:disabled {
  color: #9ca3af;
  cursor: not-allowed;
}

#inqSendStatus {
  font-size: 12px;
  padding: 4px 0;
}

/* --- 明示的フィードバック UI --- */
.inquiry-feedback-section {
  margin-top: 8px;
  border-top: 1px solid #e5e7eb;
  padding-top: 8px;
}
.inquiry-feedback-toggle-btn {
  background: none;
  border: none;
  color: #6b7280;
  font-size: 12px;
  cursor: pointer;
  padding: 2px 4px;
}
.inquiry-feedback-toggle-btn:hover { color: #374151; }
.inquiry-feedback-form {
  margin-top: 8px;
  flex-direction: column;
  gap: 6px;
}
.inquiry-feedback-label {
  font-size: 12px;
  color: #374151;
}
.inquiry-feedback-textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 12px;
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
  color: #1f2937;
  box-sizing: border-box;
}
.inquiry-feedback-textarea:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99,102,241,0.15);
}
.inquiry-feedback-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.inquiry-feedback-save-btn {
  padding: 6px 14px;
  background: #6366f1;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.inquiry-feedback-save-btn:hover { background: #4f46e5; }
.inquiry-feedback-save-btn:disabled { background: #9ca3af; cursor: not-allowed; }
.inquiry-feedback-cancel-btn {
  font-size: 12px;
  color: #9ca3af;
  cursor: pointer;
}
.inquiry-feedback-cancel-btn:hover { color: #6b7280; }
.inquiry-feedback-status {
  font-size: 12px;
  color: #6b7280;
  min-height: 16px;
}

.send-success {
  color: #16a34a;
  font-weight: 500;
}
.send-error {
  color: #dc2626;
}

/* 相談パネル */
.inq-analysis-summary {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  color: #1e40af;
  line-height: 1.5;
  margin-bottom: 10px;
}
.inq-stage-badge {
  display: inline-block;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 12px;
  margin-bottom: 10px;
}
.inq-proposals {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}
.inq-proposal-card {
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  transition: all 0.15s;
  background: #fff;
}
.inq-proposal-card:hover {
  border-color: #93c5fd;
  background: #f0f9ff;
}
.inq-proposal-card.selected {
  border-color: #2563eb;
  background: #eff6ff;
}
.inq-proposal-card .proposal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.inq-proposal-card .proposal-label {
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
}
.inq-proposal-card .proposal-confidence {
  font-size: 11px;
  color: #6b7280;
  background: #f3f4f6;
  padding: 2px 6px;
  border-radius: 8px;
}
.inq-proposal-card .proposal-template {
  font-size: 11px;
  color: #6b7280;
  margin-bottom: 2px;
}
.inq-proposal-card .proposal-reasoning {
  font-size: 12px;
  color: #4b5563;
  line-height: 1.4;
}
.inq-proposal-generate-btn {
  width: 100%;
  padding: 10px;
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 8px;
}
.inq-proposal-generate-btn:hover { background: #1d4ed8; }
.inq-proposal-generate-btn:disabled {
  background: #9ca3af;
  cursor: not-allowed;
}
.inq-custom-direction {
  margin-bottom: 10px;
}
.inq-custom-input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 12px;
  resize: vertical;
  font-family: inherit;
  margin-bottom: 6px;
}
.inq-custom-input:focus {
  outline: none;
  border-color: #7c3aed;
  box-shadow: 0 0 0 2px rgba(124,58,237,0.15);
}
.inq-custom-submit {
  width: 100%;
  padding: 8px;
  background: #7c3aed;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.inq-custom-submit:hover { background: #6d28d9; }
.inq-custom-submit:disabled {
  background: #9ca3af;
  cursor: not-allowed;
}
#inqKnowledgeArea {
  margin-bottom: 8px;
}

/* ログインオーバーレイ */
#loginOverlay {
  position: fixed;
  inset: 0;
  background: #f9fafb;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
#maintenanceOverlay {
  position: fixed;
  inset: 0;
  background: #f9fafb;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
}
#authWaitOverlay {
  position: fixed;
  inset: 0;
  background: var(--bg-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1050;
}
.auth-wait-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.maintenance-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 32px 36px;
  width: min(360px, calc(100vw - 32px));
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  text-align: center;
}
.maintenance-card h2 {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 14px;
}
.maintenance-card p {
  font-size: 13px;
  color: #374151;
  margin: 6px 0;
}
.maintenance-card .maintenance-sub {
  color: #6b7280;
  font-size: 12px;
  margin-top: 18px;
}
.login-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 32px 28px;
  width: 280px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
.login-card h2 {
  font-size: 18px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 4px;
}
.login-card .login-subtitle {
  font-size: 12px;
  color: #6b7280;
  margin: 0 0 20px;
}
.login-step[hidden] {
  display: none;
}
.login-otp-message {
  margin: 0 0 var(--space-3);
  color: var(--text-secondary);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
}
.login-otp-code {
  letter-spacing: var(--space-1);
  text-align: center;
}
.login-remember-device {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  cursor: pointer;
}
.login-remember-device input {
  margin: 0;
  cursor: pointer;
}
.login-remember-device-reason {
  margin: 0 0 var(--space-3);
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
}
.login-input {
  width: 100%;
  padding: 9px 10px;
  font-size: 14px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  margin-bottom: 10px;
  box-sizing: border-box;
  color: #111827;
}
.login-input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37,99,235,0.15);
}
.login-btn {
  width: 100%;
  padding: 10px;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 4px;
}
.login-btn:hover { background: #1d4ed8; }
.login-btn:disabled { background: #9ca3af; cursor: not-allowed; }
.login-error {
  margin-top: 10px;
  padding: 8px 10px;
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: 6px;
  font-size: 12px;
  color: #dc2626;
}
/* ヘッダーユーザー情報 */
.header-user {
  font-size: 11px;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 6px;
}
.header-logout-btn {
  font-size: 11px;
  padding: 2px 8px;
  border: 1px solid #d1d5db;
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
  color: #374151;
}
.header-logout-btn:hover { background: #f3f4f6; }

/* 同期中スピナー（管理タブボタン横） */
.admin-sync-spinner {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 2px solid #d1d5db;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: admin-spin 0.8s linear infinite;
  margin-left: 4px;
  vertical-align: middle;
}
@keyframes admin-spin {
  to { transform: rotate(360deg); }
}

/* 通関ファイルアップロード中スピナー */
.cc-upload-spinner {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 2px solid #c7d2fe;
  border-top-color: #4f46e5;
  border-radius: 50%;
  animation: cc-spin 0.6s linear infinite;
}
@keyframes cc-spin {
  to { transform: rotate(360deg); }
}

/* 管理タブ サブタブ */
.admin-sub-tab-bar {
  display: none !important;
}
.admin-sub-tab-btn {
  padding: 5px 12px;
  border: 1px solid #d1d5db;
  background: #fff;
  font-size: 12px;
  cursor: pointer;
  color: #6b7280;
  border-radius: 14px;
  transition: all 0.15s;
}
.admin-sub-tab-btn.active {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
  font-weight: 600;
}
.admin-sub-panel {
  display: none;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
}
.admin-sub-panel.active { display: flex; }

.backup-admin {
  padding: 16px;
  gap: 14px;
}
.backup-admin-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.backup-admin-header h3 {
  margin: 0 0 4px;
  font-size: 18px;
  color: #111827;
}
.backup-muted {
  font-size: 12px;
  color: #6b7280;
}
.backup-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.backup-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.backup-card {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}
.backup-card-label {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 6px;
}
.backup-card-value {
  font-size: 18px;
  font-weight: 700;
  color: #111827;
}
.backup-card-sub {
  font-size: 12px;
  color: #4b5563;
  margin-top: 6px;
  line-height: 1.45;
}
.backup-section-title {
  font-size: 13px;
  font-weight: 700;
  color: #374151;
  margin: 14px 0 6px;
}
.backup-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid #e5e7eb;
  font-size: 12px;
}
.backup-table th,
.backup-table td {
  border-bottom: 1px solid #e5e7eb;
  padding: 7px 8px;
  text-align: left;
  vertical-align: top;
}
.backup-table th {
  background: #f9fafb;
  color: #374151;
  font-weight: 700;
}
.backup-status {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #374151;
  font-size: 11px;
  font-weight: 700;
}
.backup-status.ok {
  background: #dcfce7;
  color: #166534;
}
.backup-status.warn {
  background: #fef3c7;
  color: #92400e;
}
.backup-status.bad {
  background: #fee2e2;
  color: #991b1b;
}
.backup-uri {
  display: inline-block;
  max-width: 520px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.backup-row-muted td {
  color: #6b7280;
  background: #fafafa;
}

.maintenance-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.maintenance-admin-card {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.maintenance-service-name {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
}
.maintenance-service-host {
  font-size: 11px;
  color: #6b7280;
  margin-top: 3px;
}
.maintenance-admin-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.maintenance-state {
  min-width: 78px;
  font-size: 12px;
  font-weight: 600;
  color: #059669;
  text-align: right;
}
.maintenance-state.is-on {
  color: #dc2626;
}
.maintenance-switch {
  position: relative;
  width: 42px;
  height: 24px;
  flex: 0 0 auto;
}
.maintenance-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.maintenance-switch span {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #d1d5db;
  border-radius: 999px;
  transition: background 0.15s;
}
.maintenance-switch span::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform 0.15s;
}
.maintenance-switch input:checked + span {
  background: #dc2626;
}
.maintenance-switch input:checked + span::before {
  transform: translateX(18px);
}

/* 集計パネル */
.analytics-panel {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: none;
}
.analytics-panel.active { display: block; }
.analytics-panel.analytics-full-bleed {
  padding: 0;
  overflow: hidden;
}
.rakuten-sales-panel {
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.rakuten-sales-section {
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  margin-bottom: 0;
}
.analytics-sub-tab-bar {
  display: none !important;
}
.analytics-sub-tab-btn {
  padding: 5px 12px;
  border: 1px solid #d1d5db;
  background: #fff;
  font-size: 12px;
  cursor: pointer;
  color: #6b7280;
  border-radius: 14px;
  transition: all 0.15s;
}
.analytics-sub-tab-btn.active {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
  font-weight: 600;
}

/* データパネル */
.data-panel {
  flex: 1;
  overflow-y: auto;
  display: none;
}
.data-panel.active { display: block; }

/* ホーム */
.home-dashboard {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-4);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  align-content: start;
}

.home-card {
  min-width: 0;
}

.home-section {
  min-width: 0;
}

.home-card-wide {
  grid-column: 1 / -1;
}

.home-card-header,
.home-list-heading,
.home-stat-value,
.home-shortcuts {
  display: flex;
  align-items: center;
}

.home-card-header {
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-default);
}

.home-card-title {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
}

.home-card .loading-state,
.home-card .empty-state {
  padding: var(--space-4) 0;
}

.home-card > .alert {
  margin-top: var(--space-3);
}

.home-list {
  list-style: none;
}

.home-list-item {
  padding: var(--space-3) 0;
}

.home-list-item + .home-list-item {
  border-top: 1px solid var(--border-light);
}

.home-list-heading {
  gap: var(--space-2);
  min-width: 0;
  color: var(--text-primary);
  font-size: var(--font-size-md);
}

.home-list-heading strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-list-text {
  margin-top: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
  white-space: pre-wrap;
  word-break: break-word;
}

.home-list-meta {
  margin-left: auto;
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

.home-work-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  padding-top: var(--space-3);
}

.home-work-stat {
  min-width: 0;
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--bg-muted);
}

.home-stat-label {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.home-stat-value {
  gap: var(--space-2);
  color: var(--text-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

.home-stat-total {
  display: block;
  color: var(--color-primary);
  font-size: var(--font-size-2xl);
}

.home-shortcuts {
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-top: var(--space-3);
}

.home-shortcut {
  min-width: 112px;
}

.data-sub-tab-bar {
  display: none !important;
}
.data-sub-tab-btn {
  padding: 5px 12px;
  border: 1px solid #d1d5db;
  background: #fff;
  font-size: 12px;
  cursor: pointer;
  color: #6b7280;
  border-radius: 14px;
  transition: all 0.15s;
}
.data-sub-tab-btn.active {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
  font-weight: 600;
}
.data-sub-panel { display: none; }
.data-sub-panel.active { display: block; }

/* Yahoo! ストアパフォーマンス */
#dataYahooPerformancePanel.active {
  height: 100%;
  overflow: auto;
  background: var(--bg-body);
}

.ysp-shell {
  min-height: 100%;
  padding: var(--space-5) var(--space-6) 48px;
  color: var(--text-primary);
  font-size: var(--font-size-base);
}

.ysp-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.ysp-page-title {
  margin: 0;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.3px;
}

.ysp-store {
  margin-top: 2px;
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.ysp-fetch-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--space-2) 14px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
  box-shadow: var(--shadow-md);
}

.ysp-fetch-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-success);
  box-shadow: 0 0 0 3px var(--color-success-subtle);
}

.ysp-fetch-dot.ysp-is-partial {
  background: var(--color-warning);
  box-shadow: 0 0 0 3px var(--color-warning-subtle);
}

.ysp-fetch-main {
  font-weight: var(--font-weight-bold);
}

.ysp-fetch-sub {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}

.ysp-legacy-note {
  margin-bottom: var(--space-4);
  padding: 9px 14px;
  border: 1px solid var(--color-warning-subtle);
  border-radius: var(--radius-md);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  font-size: var(--font-size-sm);
}

.ysp-timeline-wrap {
  margin-bottom: var(--space-4);
  padding: 18px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
  box-shadow: var(--shadow-lg);
}

.ysp-timeline-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
}

.ysp-timeline-head h2 {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

.ysp-timeline-sub {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.ysp-timeline {
  display: grid;
  grid-template-columns: 1fr 24px 1fr 24px 1.25fr;
  align-items: stretch;
}

.ysp-timeline-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: var(--font-size-xl);
}

.ysp-tl-month {
  position: relative;
  padding: 13px 15px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
}

.ysp-tl-month.ysp-good {
  border-color: var(--color-success);
  background: linear-gradient(180deg, var(--color-success-bg), var(--bg-surface));
}

.ysp-tl-month.ysp-bad {
  border-color: var(--color-danger);
  background: linear-gradient(180deg, var(--color-danger-bg), var(--bg-surface));
}

.ysp-tl-month.ysp-pending {
  background: linear-gradient(180deg, var(--color-primary-bg), var(--bg-surface));
}

.ysp-tl-month.ysp-now {
  border: 2px solid var(--color-primary);
  box-shadow: var(--shadow-lg);
}

.ysp-today-tag {
  position: absolute;
  top: -11px;
  right: var(--space-3);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--text-inverse);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  box-shadow: var(--shadow-md);
}

.ysp-today-tag::before {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 5px;
  border-radius: var(--radius-full);
  background: var(--text-inverse);
  content: "";
  animation: ysp-pulse 1.6s infinite;
}

@keyframes ysp-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.ysp-month-name {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.5px;
}

.ysp-month-phase {
  font-weight: var(--font-weight-normal);
}

.ysp-month-verdict {
  margin: 3px 0 2px;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
}

.ysp-good .ysp-month-verdict { color: var(--color-success-dark); }
.ysp-bad .ysp-month-verdict { color: var(--color-danger-text); }
.ysp-pending .ysp-month-verdict { color: var(--color-primary); }

.ysp-month-window {
  color: var(--text-tertiary);
  font-size: 10.5px;
}

.ysp-month-progress {
  margin-top: var(--space-2);
}

.ysp-progress-bar {
  height: 7px;
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--bg-subtle);
}

.ysp-progress-fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-full);
}

.ysp-fill-good { background: var(--color-success); }
.ysp-fill-bad { background: var(--color-danger); }
.ysp-fill-pending { background: var(--color-primary); }

.ysp-progress-caption {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-1);
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}

.ysp-conditions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 10px;
}

.ysp-ring-card {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  overflow: hidden;
  padding: var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
  box-shadow: var(--shadow-md);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
  box-sizing: border-box;
  transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.ysp-ring-card:hover {
  box-shadow: var(--shadow-lg);
}

.ysp-ring-card:focus-visible {
  outline: 3px solid var(--border-focus);
  outline-offset: 2px;
}

.ysp-ring-card.ysp-selected {
  border: 2px solid var(--color-primary);
  box-shadow: var(--shadow-lg);
}

.ysp-ring-card::before {
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  content: "";
}

.ysp-ring-card.ysp-ng::before {
  background: linear-gradient(90deg, var(--color-danger), var(--color-danger-subtle));
}

.ysp-ring-card.ysp-near::before {
  background: linear-gradient(90deg, var(--color-warning), var(--color-warning-subtle));
}

.ysp-ring-card.ysp-ok::before {
  background: linear-gradient(90deg, var(--color-success), var(--color-success-subtle));
}

.ysp-ring-box {
  position: relative;
  width: 104px;
  height: 104px;
  flex-shrink: 0;
}

.ysp-ring-box svg {
  transform: rotate(-90deg);
}

.ysp-ring-track {
  stroke: var(--bg-subtle);
}

.ysp-ring-card.ysp-ng .ysp-ring-value { stroke: var(--color-danger); }
.ysp-ring-card.ysp-near .ysp-ring-value { stroke: var(--color-warning); }
.ysp-ring-card.ysp-ok .ysp-ring-value { stroke: var(--color-success); }

.ysp-ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.ysp-ring-main {
  font-size: 19px;
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
}

.ysp-ring-baseline {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}

.ysp-condition-number {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.5px;
}

.ysp-condition-name {
  margin: 2px 0 var(--space-1);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
}

.ysp-condition-state {
  font-size: 11.5px;
  font-weight: var(--font-weight-bold);
}

.ysp-ng .ysp-condition-state { color: var(--color-danger-text); }
.ysp-near .ysp-condition-state { color: var(--color-warning-text); }
.ysp-ok .ysp-condition-state { color: var(--color-success-dark); }

.ysp-condition-note {
  margin-top: var(--space-1);
  color: var(--text-tertiary);
  font-size: 10.5px;
  line-height: var(--line-height-normal);
}

.ysp-cond-panel {
  margin-bottom: var(--space-4);
  padding: 14px var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
  box-shadow: var(--shadow-md);
}

.ysp-cond-subtitle {
  margin: 14px 0 var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}

.ysp-cond-note,
.ysp-cond-empty {
  margin-top: 10px;
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.ysp-cond-empty {
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--bg-muted);
}

.ysp-cond-kpi-chips {
  margin-bottom: var(--space-1);
}

.ysp-chips-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.ysp-chips-title {
  font-size: 12.5px;
  font-weight: var(--font-weight-bold);
}

.ysp-chip-counts {
  display: flex;
  gap: 5px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

.ysp-chip-counts span {
  padding: 2px 9px;
  border-radius: var(--radius-full);
}

.ysp-count-ok {
  background: var(--color-success-subtle);
  color: var(--color-success-text);
}

.ysp-count-ng {
  background: var(--color-danger-subtle);
  color: var(--color-danger-text);
}

.ysp-count-na {
  background: var(--bg-subtle);
  color: var(--text-muted);
}

.ysp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.ysp-chip-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px var(--space-3);
  border: 1px solid;
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}

.ysp-chip-item.ysp-ok {
  border-color: var(--color-success-subtle);
  background: var(--color-success-bg);
  color: var(--color-success-text);
}

.ysp-chip-item.ysp-ng {
  border-color: var(--color-danger-subtle);
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
}

.ysp-chip-item.ysp-na {
  border-color: var(--border-default);
  background: var(--bg-muted);
  color: var(--text-muted);
}

.ysp-chip-item.ysp-yellow {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 2px var(--color-danger-subtle);
}

.ysp-chip-item.ysp-chip-yellow {
  border-color: var(--color-warning);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  box-shadow: 0 0 0 2px var(--color-warning-subtle);
}

.ysp-chip-value {
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
}

.ysp-chip-gap,
.ysp-yellow-label {
  padding: 1px 7px;
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  font-size: 9.5px;
}

.ysp-yellow-label {
  background: var(--color-danger);
  color: var(--text-inverse);
}

.ysp-chip-yellow .ysp-yellow-label {
  background: var(--color-warning);
  color: var(--color-warning-text);
}

.ysp-delivery-pills {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ysp-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  background: var(--bg-muted);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}

.ysp-pill.ysp-ok {
  border-color: var(--color-success-subtle);
  background: var(--color-success-bg);
  color: var(--color-success-text);
}

.ysp-pill.ysp-warn {
  border-color: var(--color-warning-subtle);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}

.ysp-pill-value {
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
}

.ysp-delivery-link {
  margin-top: 10px;
  color: var(--text-tertiary);
  font-size: 10.5px;
}

.ysp-section-title {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: var(--space-5) 0 var(--space-2);
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: var(--font-weight-bold);
}

.ysp-section-hint {
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: var(--font-weight-normal);
}

.ysp-card {
  padding: 14px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
  box-shadow: var(--shadow-md);
}

.ysp-chart-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.ysp-chart-tab {
  padding: 5px var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

.ysp-chart-tab.ysp-active {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--text-inverse);
}

.ysp-chart {
  display: block;
  min-width: 640px;
}

.ysp-chart-grid {
  stroke: var(--border-light);
}

.ysp-chart-label,
.ysp-chart-x-label,
.ysp-chart-empty {
  fill: var(--text-muted);
  font-size: var(--font-size-xs);
}

.ysp-chart-danger-zone {
  fill: var(--color-danger-bg);
  opacity: 0.55;
}

.ysp-chart-border {
  stroke: var(--color-danger);
  stroke-width: 1.5;
  stroke-dasharray: 6 4;
}

.ysp-chart-border-label {
  fill: var(--color-danger-text);
  font-size: var(--font-size-xs);
}

.ysp-chart-line {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ysp-chart-point {
  fill: var(--color-primary);
}

.ysp-chart-change-marker {
  stroke: var(--color-warning);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
}

.ysp-chart-change-label {
  fill: var(--color-warning-text);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

.ysp-chart-card {
  overflow-x: auto;
}

.ysp-table-card {
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
  box-shadow: var(--shadow-md);
}

.ysp-table-scroll {
  overflow-x: auto;
}

.ysp-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
}

.ysp-history-table th {
  padding: var(--space-2) 10px;
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-muted);
  color: var(--text-tertiary);
  font-weight: var(--font-weight-bold);
  text-align: right;
  white-space: nowrap;
}

.ysp-history-table th:first-child,
.ysp-history-table td:first-child {
  text-align: left;
}

.ysp-history-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border-light);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.ysp-history-table tbody tr:hover {
  background: var(--color-primary-bg);
}

.ysp-numeric-only {
  display: block;
  color: var(--text-muted);
  font-size: 9px;
}

.ysp-badge {
  display: inline-block;
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

.ysp-badge.ysp-ok {
  background: var(--color-success-subtle);
  color: var(--color-success-text);
}

.ysp-badge.ysp-warn {
  background: var(--color-warning-subtle);
  color: var(--color-warning-text);
}

.ysp-badge.ysp-danger {
  background: var(--color-danger-subtle);
  color: var(--color-danger-text);
}

.ysp-more-link {
  width: 100%;
  padding: var(--space-2);
  border: 0;
  background: var(--bg-muted);
  color: var(--color-primary);
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  text-align: center;
  cursor: pointer;
}

.ysp-loading-state,
.ysp-empty-state,
.ysp-error-state {
  margin: var(--space-6);
  padding: var(--space-6);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
  color: var(--text-tertiary);
  text-align: center;
}

.ysp-error-state {
  border-color: var(--color-danger-subtle);
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
}

.ysp-error-title {
  margin-bottom: var(--space-1);
  font-weight: var(--font-weight-bold);
}

.ysp-error-detail {
  font-size: var(--font-size-sm);
}

@media (max-width: 1180px) {
  .ysp-conditions {
    grid-template-columns: 1fr;
  }

  .ysp-timeline {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .ysp-timeline-arrow {
    display: none;
  }
}

/* Staff invoice v2: staff view tabs */
.svt-tabs {
  display: flex;
  flex: 0 0 auto;
  gap: var(--space-1);
  padding: 0 var(--space-3);
  border-bottom: 2px solid var(--border-default);
  background: var(--bg-surface);
}

.svt-tab {
  margin-bottom: -2px;
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-tertiary);
  font: inherit;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}

.svt-tab:hover {
  color: var(--color-primary);
}

.svt-tab.is-active {
  border-bottom-color: var(--color-primary);
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
}

/* Staff payment history / invoice profile */
.sph-root {
  overflow: hidden;
}

.sph-toolbar {
  flex: 0 0 auto;
  gap: var(--space-2);
}

.sph-content {
  min-height: 0;
  overflow: auto;
  padding: var(--space-3);
}

.sph-summary {
  padding: 0 0 var(--space-3);
}

.sph-summary .card {
  padding: var(--space-3);
}

.sph-card-label {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.sph-card-value {
  margin-top: var(--space-1);
  color: var(--text-primary);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
}

.sph-card-note,
.sph-field-hint {
  margin-top: var(--space-1);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}

.sph-warning,
.sph-required {
  color: var(--color-warning-text);
}

.sph-root .badge-muted,
#amazonSaleList .badge-muted {
  background: var(--bg-subtle);
  color: var(--text-tertiary);
}

.sph-history-card,
.sph-profile-card {
  margin-bottom: var(--space-3);
  overflow: hidden;
}

.sph-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  border-bottom: 1px solid var(--border-default);
}

.sph-head h3,
.sph-head h4 {
  margin: 0;
}

.sph-head label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.sph-year {
  width: auto;
}

.sph-table {
  min-width: 1180px;
}

.sph-table td {
  overflow: visible;
}

.sph-num {
  text-align: right !important;
  font-variant-numeric: tabular-nums;
}

.sph-actions,
.sph-seq-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.sph-actions {
  white-space: nowrap;
}

.sph-paid-date {
  width: 142px;
}

.sph-note,
.sph-readonly-bank {
  padding: var(--space-3);
  border: 1px dashed var(--border-medium);
  border-radius: var(--radius-md);
  background: var(--bg-muted);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.sph-card-body {
  padding: var(--space-3);
}

.sph-field-wide {
  grid-column: 1 / -1;
}

.sph-textarea {
  min-height: 96px;
  resize: vertical;
}

.sph-seq-input {
  width: 180px;
}

.sph-num-input {
  min-width: 120px;
  text-align: right;
}

.sph-check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.sph-empty-cell {
  color: var(--text-muted);
  text-align: center !important;
}

/* Staff invoice SYAG paper */
.sinv-modal {
  width: 96%;
  max-width: 1180px;
  max-height: 94vh;
}

.sinv-modal-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--bg-muted);
}

.sinv-paper {
  width: min(860px, 100%);
  margin: 0 auto;
  padding: 46px 52px;
  background: var(--bg-surface);
  box-shadow: var(--shadow-card);
  color: #111;
  font-size: 13px;
  line-height: 1.5;
}

.sinv-title {
  text-align: center;
  text-indent: .4em;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: .4em;
}

.sinv-top-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-top: 36px;
}

.sinv-to {
  display: flex;
  flex: 1;
  align-items: flex-end;
}

.sinv-to-line {
  flex: 1;
  padding-bottom: 4px;
  border-bottom: 1px solid #374151;
}

.sinv-to-line span {
  padding-left: 28px;
  font-size: 20px;
  font-weight: 800;
}

.sinv-to strong {
  flex: 0 0 auto;
  padding: 0 0 4px 14px;
  font-size: 15px;
}

.sinv-meta {
  width: 230px;
  flex: 0 0 auto;
  font-size: 11px;
}

.sinv-meta > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 2px 0;
}

.sinv-meta span:first-child {
  color: #4b5563;
}

.sinv-subject {
  width: 62%;
  margin-top: 26px;
}

.sinv-subject > div {
  padding: 0 0 4px 6px;
  border-bottom: 1px solid #374151;
  font-size: 15px;
  font-weight: 800;
}

.sinv-subject p {
  margin: 4px 0 0;
  padding-left: 6px;
  color: #4b5563;
  font-size: 10.5px;
}

.sinv-total-issuer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-top: 34px;
}

.sinv-total {
  display: flex;
  flex: 1;
  align-items: baseline;
  align-self: center;
  gap: 30px;
  padding: 0 0 5px 6px;
  border-bottom: 2px solid #1f2937;
}

.sinv-total span {
  font-size: 16px;
  font-weight: 800;
}

.sinv-total strong {
  font-size: 24px;
  font-variant-numeric: tabular-nums;
}

.sinv-issuer {
  width: 300px;
  flex: 0 0 auto;
  font-size: 11px;
}

.sinv-issuer > div {
  display: flex;
  gap: 10px;
  padding: 2px 0;
}

.sinv-issuer > div > span:first-child {
  width: 62px;
  flex: 0 0 auto;
  color: #4b5563;
}

.sinv-issuer > div > :last-child {
  overflow-wrap: anywhere;
}

.sinv-table {
  width: 100%;
  margin-top: 18px;
  border-collapse: collapse;
  font-size: 11.5px;
}

.sinv-table th {
  padding: 6px 8px;
  border: 1px solid #6b7280;
  background: #595959;
  color: #fff;
}

.sinv-table td {
  padding: 6px 8px;
  border: 1px solid #6b7280;
}

.sinv-table th:first-child,
.sinv-no {
  width: 34px;
}

.sinv-no {
  background: #d9d9d9;
  text-align: right;
}

.sinv-table th:nth-child(3),
.sinv-qty {
  width: 90px;
}

.sinv-table th:nth-child(4),
.sinv-unit {
  width: 100px;
}

.sinv-table th:nth-child(5),
.sinv-amount {
  width: 120px;
}

.sinv-unit,
.sinv-amount,
.sinv-table tfoot td:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.sinv-table tfoot td:first-child {
  text-align: right;
}

.sinv-foot-total td {
  background: #bfbfbf;
  font-weight: 800;
}

.sinv-note {
  display: flex;
  margin-top: 30px;
  border: 1px solid #6b7280;
}

.sinv-note > div:first-child {
  display: flex;
  width: 104px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  background: #bfbfbf;
  font-weight: 800;
}

.sinv-note > div:last-child {
  flex: 1;
  padding: 12px 16px;
  background: #d9d9d9;
  font-size: 11.5px;
}

.sinv-note p {
  margin: 0;
  white-space: pre-wrap;
}

.sinv-bank {
  margin-top: var(--space-2);
}

.sinv-extra,
.sinv-daily,
.sinv-void,
.sinv-section {
  width: min(860px, 100%);
  margin: 0 auto;
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}

.sinv-extra h4,
.sinv-void h4,
.sinv-section h4 {
  margin: 0 0 var(--space-2);
}

.sinv-extra-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.sinv-extra-grid label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.sinv-extra-grid .input {
  width: 100px;
}

.sinv-extra-total {
  margin-top: var(--space-2);
  text-align: right;
}

.sinv-daily summary {
  cursor: pointer;
  font-weight: var(--font-weight-semibold);
}

.sinv-daily .table-container {
  margin-top: var(--space-2);
}

.sinv-void-row,
.sinv-section-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.sinv-void-row .input {
  flex: 1;
}

.sinv-section-head {
  justify-content: space-between;
}

.sinv-empty {
  padding: var(--space-3);
  color: var(--text-muted);
  text-align: center;
}

@media (max-width: 760px) {
  .svt-tabs {
    overflow-x: auto;
  }

  .svt-tab {
    flex: 0 0 auto;
  }

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

  .sinv-paper {
    padding: 28px 22px;
  }

  .sinv-top-row,
  .sinv-total-issuer {
    align-items: stretch;
    flex-direction: column;
  }

  .sinv-meta,
  .sinv-subject,
  .sinv-issuer {
    width: 100%;
  }

  .sinv-extra-grid {
    grid-template-columns: 1fr;
  }
}

@media print {
  body.inv-printing #staffInvoiceModal .sinv-modal {
    width: 100%;
    max-width: none;
    max-height: none;
    overflow: visible;
    box-shadow: none;
  }

  body.inv-printing #staffInvoiceModal .sinv-modal-body {
    display: block;
    overflow: visible;
    padding: 0;
    background: #fff;
  }

  body.inv-printing #staffInvoiceModal .sinv-paper {
    width: 100%;
    margin: 0;
    padding: 0;
    box-shadow: none;
  }
}

/* Staff invoice manual line editor */
.sinv-editor {
  width: min(860px, 100%);
  margin: 0 auto;
  /* .inv-modal-body(flex列)内で overflow:hidden だと min-height が0になり圧縮されるため固定 */
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}

.sinv-editor-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-muted);
}

.sinv-editor-head h4 {
  flex: 0 0 auto;
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-base);
}

.sinv-editor-head span {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.sinv-editor-body {
  padding: var(--space-3) var(--space-4);
}

.sinv-editor .sinv-editor-scroll {
  overflow-x: auto;
}

.sinv-editor-table {
  min-width: 780px;
  margin: 0;
}

.sinv-editor .sinv-editor-table th,
.sinv-editor .sinv-editor-table td {
  padding: var(--space-2);
  vertical-align: middle;
}

.sinv-editor-kind {
  width: 94px;
}

.sinv-editor-number {
  width: 112px;
  text-align: right !important;
  font-variant-numeric: tabular-nums;
}

.sinv-editor .sinv-editor-actions {
  width: 66px;
  text-align: right;
}

.sinv-editor-label-input {
  width: 100%;
  min-width: 220px;
}

.sinv-editor-qty-input {
  width: 72px;
  text-align: right;
}

.sinv-editor-unit-input,
.sinv-editor-amount-input {
  width: 100px;
  text-align: right;
}

.sinv-editor-amount {
  font-weight: var(--font-weight-bold);
}

.sinv-editor-amount-cell {
  white-space: nowrap;
}

.sinv-editor-calc-note {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}

.sinv-editor-add {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.sinv-editor-error {
  margin-top: var(--space-2);
  color: var(--color-danger-text);
  font-size: var(--font-size-sm);
}

.sinv-editor-totals {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 2px solid var(--border-default);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.sinv-editor-grand {
  color: var(--color-primary);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
}

.sinv-neg {
  color: var(--color-danger-text);
  font-weight: var(--font-weight-bold);
}

@media (max-width: 760px) {
  .sinv-editor-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .sinv-editor-totals {
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .ysp-shell {
    padding: var(--space-4) var(--space-3) var(--space-8);
  }

  .ysp-timeline-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .ysp-ring-card {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Instagram SNS投稿 */
.sns-posts-shell {
  min-height: 100%;
  background: var(--bg-body);
}
.sns-posts-shell:has(> .sns-subpanel.active[data-sns-panel="messages"]),
.sns-posts-shell:has(> .sns-subpanel.active[data-sns-panel="comments"]) {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.sns-subpanel.active[data-sns-panel="messages"],
.sns-subpanel.active[data-sns-panel="comments"] {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.sns-view.sns-dm-view,
.sns-view.sns-comment-inbox-view {
  flex: 1;
  min-height: 0;
}
#snsPostsPanel,
body > .sns-media-detail-layer {
  font-family: "Zen Kaku Gothic New", var(--font-family);
}
#snsPostsPanel .sns-dashboard-number,
#snsPostsPanel .sns-dashboard-donut-total,
#snsPostsPanel .sns-dashboard-legend strong,
#snsPostsPanel .sns-dashboard-top-overlay strong,
body > .sns-media-detail-layer .sns-media-detail-metric strong {
  font-family: "Bricolage Grotesque", "Zen Kaku Gothic New", var(--font-family);
}
.sns-subpanel { display: none; }
.sns-subpanel.active { display: block; }
.sns-settings {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
}
.sns-settings-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}
.sns-settings-header h2,
.sns-sync-runs-card h3 {
  margin: 0;
  color: var(--text-primary);
}
.sns-settings-header p {
  margin: var(--space-1) 0 0;
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}
.sns-settings-actions,
.sns-account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.sns-account-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-3);
}
.sns-account-card,
.sns-sync-runs-card {
  padding: var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}
.sns-admin-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
}
.sns-admin-fieldset {
  margin: 0;
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
}
.sns-admin-fieldset legend,
.sns-admin-rules {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}
.sns-admin-checklist {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.sns-admin-checklist label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.sns-admin-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-default);
}
.sns-admin-room-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-muted);
}
.sns-admin-room-form label,
.sns-admin-rules {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.sns-admin-room-form label:nth-of-type(5),
.sns-admin-room-form .sns-settings-actions {
  grid-column: 1 / -1;
}
.sns-admin-rules textarea {
  margin-top: var(--space-1);
}
.sns-account-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}
.sns-account-username {
  color: var(--text-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}
.sns-account-label {
  margin-top: var(--space-1);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}
.sns-status-badge {
  display: inline-flex;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}
.sns-status-active {
  background: var(--color-success-subtle);
  color: var(--color-success-text);
}
.sns-status-scope-incomplete {
  background: var(--color-warning-subtle);
  color: var(--color-warning-text);
}
.sns-status-token-expired {
  background: var(--color-danger-subtle);
  color: var(--color-danger-text);
}
.sns-status-disconnected {
  background: var(--bg-subtle);
  color: var(--text-tertiary);
}
.sns-account-meta {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-4) 0;
}
.sns-account-meta div {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: var(--space-2);
}
.sns-account-meta dt {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}
.sns-account-meta dd {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}
.sns-engagement-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
}
.sns-engagement-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
}
.sns-engagement-title {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}
.sns-engagement-expiry {
  flex-basis: 100%;
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}
.sns-inline-status {
  min-height: 20px;
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}
/* ステータス未表示時は帯として場所を取らない（ヘッダーとコンテンツ間の不要スペース対策） */
.sns-inline-status:empty {
  display: none;
}
.sns-inline-status.is-error { color: var(--color-danger-text); }
.sns-sync-runs-card h3 { margin-bottom: var(--space-3); }
.sns-table-empty,
.sns-empty-card {
  color: var(--text-muted);
  text-align: center;
}
.sns-hidden { display: none !important; }
.sns-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.sns-account-avatar {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  padding: 2px;
  place-items: center;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--color-warning), var(--color-danger), var(--color-primary));
}
.sns-account-avatar > span {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  border-radius: inherit;
  background: var(--bg-surface);
  color: var(--text-primary);
  font-weight: var(--font-weight-bold);
}
.sns-dashboard,
.sns-dashboard-loading {
  padding: var(--space-5);
}
.sns-dashboard-loading {
  color: var(--text-tertiary);
  text-align: center;
}
.sns-dashboard-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sns-dashboard-eyebrow span,
.sns-dashboard-partial {
  color: var(--color-warning-text);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: normal;
  text-transform: none;
}
.sns-dashboard-eyebrow span {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-warning-subtle);
}
.sns-dashboard-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.sns-dashboard-kpi {
  position: relative;
  min-height: 142px;
  padding: var(--space-4);
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}
.sns-dashboard-kpi:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.sns-dashboard-kpi-label,
.sns-dashboard-kpi-note {
  position: relative;
  z-index: 1;
  display: block;
}
.sns-dashboard-kpi-label {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}
.sns-dashboard-number {
  position: relative;
  z-index: 1;
  display: block;
  margin: var(--space-3) 0 var(--space-1);
  color: var(--text-primary);
  font-size: 30px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.sns-dashboard-kpi-note {
  max-width: 92%;
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}
.sns-dashboard-spark {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 42px;
  opacity: 0.75;
}
.sns-dashboard-spark polyline {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.sns-dashboard-spark-reach polyline { stroke: var(--color-success); }
.sns-dashboard-spark-engagement polyline { stroke: var(--color-danger); }
.sns-dashboard-spark-posts polyline { stroke: var(--color-warning); }
.sns-dashboard-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.sns-dashboard-card {
  min-width: 0;
  padding: var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}
.sns-dashboard-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.sns-dashboard-card-head h3,
.sns-dashboard-card-head p {
  margin: 0;
}
.sns-dashboard-card-head h3 {
  color: var(--text-primary);
  font-size: var(--font-size-md);
}
.sns-dashboard-card-head span,
.sns-dashboard-card-head p {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}
.sns-dashboard-reach-chart {
  display: block;
  width: 100%;
  height: 180px;
}
.sns-dashboard-reach-chart line {
  stroke: var(--border-light);
  stroke-width: 1;
}
.sns-dashboard-reach-chart polyline {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.sns-dashboard-reach-dot {
  r: var(--radius-md);
  fill: var(--color-primary);
  stroke: var(--bg-surface);
  stroke-width: calc(var(--space-1) / 2);
  vector-effect: non-scaling-stroke;
}
.sns-dashboard-chart-summary {
  margin: var(--space-2) 0 0;
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}
.sns-dashboard-data-table {
  margin-top: var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}
.sns-dashboard-data-table summary {
  cursor: pointer;
  color: var(--color-primary);
}
.sns-dashboard-data-table .table-scroll {
  max-height: 230px;
  margin-top: var(--space-2);
}
.sns-dashboard-donut-layout {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.sns-dashboard-donut {
  width: 132px;
  height: 132px;
  flex: 0 0 132px;
  transform: rotate(-90deg);
}
.sns-dashboard-donut-base,
.sns-dashboard-donut-segment {
  fill: none;
  stroke-width: 6;
}
.sns-dashboard-donut-base { stroke: var(--bg-subtle); }
.sns-dashboard-donut-segment { stroke-linecap: round; }
.sns-dashboard-donut-reels { stroke: var(--color-primary); }
.sns-dashboard-donut-carousel { stroke: var(--color-danger); }
.sns-dashboard-donut-image { stroke: var(--color-success); }
.sns-dashboard-donut-other { stroke: var(--color-warning); }
.sns-dashboard-donut-total,
.sns-dashboard-donut-label {
  transform: rotate(90deg);
  transform-origin: center;
  fill: var(--text-primary);
  font-weight: var(--font-weight-bold);
}
.sns-dashboard-donut-total { font-size: 8px; }
.sns-dashboard-donut-label {
  fill: var(--text-muted);
  font-size: 3.5px;
}
.sns-dashboard-legend {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sns-dashboard-legend li {
  display: grid;
  grid-template-columns: 11px minmax(65px, 1fr) auto auto;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}
.sns-dashboard-legend li > span:nth-child(3) { color: var(--text-tertiary); }
.sns-dashboard-legend-swatch {
  width: 11px;
  height: 11px;
  border-radius: var(--radius-sm);
}
.sns-dashboard-legend-reels { background: var(--color-primary); }
.sns-dashboard-legend-carousel { background: var(--color-danger); }
.sns-dashboard-legend-image { background: var(--color-success); }
.sns-dashboard-legend-other { background: var(--color-warning); }
.sns-dashboard-top-card { margin-bottom: var(--space-4); }
.sns-dashboard-top-strip {
  display: grid;
  grid-auto-columns: minmax(180px, 1fr);
  grid-auto-flow: column;
  gap: var(--space-3);
  padding-bottom: var(--space-1);
  overflow-x: auto;
}
.sns-dashboard-top-post {
  position: relative;
  aspect-ratio: 1;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--bg-muted);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.sns-dashboard-top-post:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}
.sns-dashboard-top-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.sns-dashboard-top-post:hover .sns-dashboard-top-image { transform: scale(1.06); }
.sns-dashboard-rank,
.sns-dashboard-kind {
  position: absolute;
  top: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  background: var(--text-secondary);
  color: var(--text-inverse);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}
.sns-dashboard-rank { left: var(--space-2); }
.sns-dashboard-kind { right: var(--space-2); }
.sns-dashboard-top-overlay {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-2) var(--space-2);
  background: linear-gradient(transparent, var(--text-primary));
  color: var(--text-inverse);
}
.sns-dashboard-top-overlay span { font-size: var(--font-size-xs); }

.sns-view {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
}
.sns-dm-layout {
  display: grid;
  min-height: 560px;
  grid-template-columns: minmax(280px, 34%) minmax(0, 1fr);
  gap: var(--space-3);
}
.card.sns-dm-conversations,
.card.sns-dm-thread-card {
  min-width: 0;
  padding: 0;
  overflow: hidden;
}
.sns-dm-conversations {
  display: flex;
  flex-direction: column;
}
.sns-dm-list-header,
.sns-dm-thread-header {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-default);
}
.sns-dm-list-header h3,
.sns-dm-thread-header h3 {
  margin: 0;
  overflow: hidden;
  color: var(--text-primary);
  font-size: var(--font-size-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sns-dm-list-header span {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}
.sns-dm-conversation-list {
  flex: 1;
  overflow-y: auto;
}
.sns-dm-conversation {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 0;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.sns-dm-conversation:hover { background: var(--bg-hover); }
.sns-dm-conversation.active {
  background: var(--color-primary-bg);
  box-shadow: inset 3px 0 0 var(--color-primary);
}
.sns-dm-conversation:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: -2px;
}
.sns-dm-conversation-head {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}
.sns-dm-conversation-head strong,
.sns-dm-conversation-head time,
.sns-dm-preview {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sns-dm-conversation-head strong {
  color: var(--text-primary);
  font-size: var(--font-size-sm);
}
.sns-dm-conversation-head time {
  flex: 0 1 auto;
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}
.sns-dm-preview {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}
.sns-dm-conversation-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.sns-dm-conversation-meta .badge { font-size: var(--font-size-xs); }
.sns-dm-pending-icon {
  margin-left: auto;
  color: var(--color-warning-text);
}
.sns-dm-thread-card {
  display: flex;
  flex-direction: column;
}
.sns-dm-warning {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-warning);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  font-size: var(--font-size-sm);
}
.sns-dm-load-more {
  align-self: center;
  margin: var(--space-3) 0 0;
}
.sns-dm-thread {
  display: flex;
  min-height: 320px;
  flex: 1;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  overflow-y: auto;
  background: var(--bg-muted);
}
.sns-dm-message {
  display: flex;
  width: 100%;
}
.sns-dm-message-outbound { justify-content: flex-end; }
.sns-dm-message-inbound,
.sns-dm-message-unknown { justify-content: flex-start; }
.sns-dm-bubble {
  max-width: min(76%, 560px);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
  color: var(--text-secondary);
  box-shadow: var(--shadow-sm);
}
.sns-dm-message-outbound .sns-dm-bubble {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--text-inverse);
}
.sns-dm-message-unknown .sns-dm-bubble {
  border-color: var(--color-warning);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}
.sns-dm-sender {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--font-size-xs);
}
.sns-dm-message-text,
.sns-dm-placeholder {
  margin: 0;
  line-height: var(--line-height-normal);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.sns-dm-placeholder {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}
.sns-dm-message-outbound .sns-dm-placeholder { color: var(--text-inverse); }
.sns-dm-bubble time {
  display: block;
  margin-top: var(--space-1);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  text-align: right;
}
.sns-dm-message-outbound .sns-dm-bubble time { color: var(--text-inverse); }
.sns-dm-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-2);
  padding: var(--space-3);
  border-top: 1px solid var(--border-default);
  background: var(--bg-surface);
}
.sns-dm-composer .textarea {
  min-height: 72px;
  resize: vertical;
}
.sns-dm-thread-card > .sns-inline-status {
  min-height: 0;
  padding: 0 var(--space-3) var(--space-3);
  background: var(--bg-surface);
}
.sns-compose-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.sns-compose-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 390px);
  align-items: start;
  gap: var(--space-6);
}
.card.sns-compose-card,
.card.sns-publish-jobs {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-4);
}
.sns-compose-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}
.sns-compose-heading h3,
.sns-compose-heading p { margin: 0; }
.sns-compose-heading p {
  margin-top: var(--space-1);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}
.sns-compose-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}
.sns-compose-account {
  min-height: 44px;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}
.sns-caption-input { min-height: 150px; }
.sns-caption-count {
  align-self: flex-end;
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}
.sns-upload-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}
.sns-upload-empty {
  grid-column: 1 / -1;
  padding: var(--space-4);
}
.sns-upload-item {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}
.sns-upload-item img,
.sns-upload-item video {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--bg-muted);
}
.sns-upload-item img { background: #fff; }
.sns-upload-item-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  overflow-wrap: anywhere;
}
.sns-upload-item-meta div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.sns-upload-progress {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}
.sns-upload-progress progress {
  width: 100%;
  accent-color: var(--color-primary);
}
.sns-compose-actions {
  display: flex;
  justify-content: flex-end;
}
.sns-compose-live-preview {
  position: sticky;
  top: 82px;
  min-width: 0;
}
.sns-compose-preview-label {
  margin-bottom: var(--space-3);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}
.sns-compose-phone {
  width: min(100%, 390px);
  margin: 0 auto;
  padding: 10px;
  border-radius: 42px;
  background: var(--bg-nav);
  box-shadow: var(--shadow-xl);
}
.sns-compose-phone-screen {
  overflow: hidden;
  border-radius: 33px;
  background: var(--bg-surface);
}
.sns-compose-phone-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
}
.sns-compose-phone-header .sns-account-avatar {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
}
.sns-compose-phone-header > div {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}
.sns-compose-phone-header strong {
  overflow: hidden;
  color: var(--text-primary);
  font-size: var(--font-size-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sns-compose-phone-header span {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}
.sns-compose-phone-media {
  display: grid;
  width: 100%;
  aspect-ratio: 1;
  place-items: center;
  overflow: hidden;
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}
.sns-compose-phone-media img,
.sns-compose-phone-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sns-compose-phone-media img { background: #fff; }
.sns-compose-phone-actions {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-3) var(--space-1);
  color: var(--text-primary);
  font-size: 24px;
}
.sns-compose-phone-actions span:last-child { margin-left: auto; }
.sns-compose-phone-kind {
  padding: 0 var(--space-3);
  color: var(--text-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}
.sns-compose-phone-caption {
  min-height: 62px;
  padding: var(--space-1) var(--space-3) var(--space-4);
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  overflow-wrap: anywhere;
}
.sns-compose-phone-caption.is-empty { color: var(--text-muted); }
.sns-compose-phone-caption strong { color: var(--text-primary); }
.sns-compose-caption-token {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}
.sns-compose-live-preview > p {
  margin: var(--space-3) 0 0;
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  text-align: center;
}
.sns-publish-jobs .table-container { min-width: 760px; }
.sns-job-note {
  margin-top: var(--space-1);
  color: var(--color-danger-text);
  font-size: var(--font-size-xs);
  white-space: nowrap;
}
.modal.sns-publish-confirm { max-width: 680px; }
.sns-confirm-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.sns-confirm-body dl {
  display: grid;
  gap: var(--space-2);
  margin: 0;
}
.sns-confirm-body dl div {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: var(--space-2);
}
.sns-confirm-body dt { color: var(--text-tertiary); }
.sns-confirm-body dd { margin: 0; }
.sns-confirm-caption {
  max-height: 180px;
  padding: var(--space-3);
  overflow: auto;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-muted);
  line-height: var(--line-height-relaxed);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.sns-account-chips,
.sns-preset-chips,
.sns-insights-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.sns-insights-controls { justify-content: space-between; }
.toolbar.sns-filter-toolbar {
  height: auto;
  min-height: var(--toolbar-height);
  flex-wrap: wrap;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
}
.sns-posts-toolbar-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}
.sns-toolbar-field {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}
.sns-search-field { flex: 1 1 220px; }
.sns-search-field .input { width: 100%; }
.sns-media-grid,
.sns-story-grid {
  display: grid;
  gap: var(--space-3);
}
.sns-media-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.sns-story-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.sns-grid-empty { grid-column: 1 / -1; }
.card.sns-media-card,
.card.sns-story-card {
  min-width: 0;
  overflow: hidden;
}
.card.sns-media-card {
  padding: 0;
  cursor: pointer;
}
.card.sns-media-card:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}
.sns-media-thumb,
.sns-story-image-wrap,
.sns-detail-main-image,
.sns-carousel-item {
  position: relative;
  overflow: hidden;
  background: var(--bg-muted);
}
.sns-media-thumb { aspect-ratio: 1 / 1; }
.sns-story-image-wrap { aspect-ratio: 9 / 16; }
.sns-media-image,
.sns-story-image,
.sns-detail-image,
.sns-carousel-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sns-story-image { object-fit: contain; }
.sns-image-placeholder {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 140px;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  color: var(--text-muted);
  text-align: center;
  background: var(--bg-muted);
}
.sns-media-badges {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.sns-media-card-body,
.sns-story-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.sns-media-card-body { padding: var(--space-3); }
.sns-media-card time,
.sns-story-card time,
.sns-detail-meta time,
.sns-comment time {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}
.sns-media-stats,
.sns-story-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-1) var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}
.sns-pagination {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.modal.sns-media-modal {
  width: min(1100px, 94vw);
  max-width: 1100px;
  max-height: 92vh;
}
.sns-media-modal .modal-header h3,
.sns-detail-section h4,
.sns-chart-card h3,
.sns-section h3,
.sns-coverage-card h3,
.sns-demo-bars h4,
.sns-demo-table h4 { margin: 0; }
.sns-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: var(--space-4);
}
.sns-detail-main-image {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
}
.sns-carousel-strip {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding-bottom: var(--space-1);
  overflow-x: auto;
}
.sns-carousel-item {
  flex: 0 0 150px;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
}
.sns-detail-copy,
.sns-detail-section,
.sns-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.sns-detail-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.sns-caption,
.sns-comment p {
  margin: 0;
  color: var(--text-primary);
  line-height: var(--line-height-relaxed);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.sns-permalink {
  color: var(--color-primary);
  font-size: var(--font-size-sm);
}
.sns-detail-section { margin-top: var(--space-5); }
.sns-comments {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.sns-comment {
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}
.sns-comment-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.sns-comment-replies {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
  margin-left: var(--space-5);
}
.sns-comment-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-2);
}
.sns-comment-reply-disabled {
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  background: var(--bg-muted);
  font-size: var(--font-size-sm);
}
.sns-comment-reply-composer {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-focus);
  border-radius: var(--radius-lg);
  background: var(--color-primary-bg);
}
.sns-comment-reply-composer label,
.sns-comment-reply-footer,
.sns-comment-reply-composer label span {
  display: flex;
  align-items: center;
}
.sns-comment-reply-composer label,
.sns-comment-reply-footer {
  justify-content: space-between;
  gap: var(--space-2);
}
.sns-comment-reply-composer label {
  color: var(--text-primary);
  font-weight: 600;
}
.sns-comment-reply-composer label span,
.sns-comment-reply-help,
.sns-comment-reply-target,
#snsCommentReplyStatus,
#snsMediaCommentReplyStatus {
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
}
.sns-comment-reply-composer textarea {
  width: 100%;
  min-height: 96px;
  resize: vertical;
  padding: var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  background: var(--bg-surface);
  font: inherit;
  line-height: var(--line-height-relaxed);
}
.sns-comment-reply-composer textarea:focus {
  border-color: var(--border-focus);
  outline: 2px solid color-mix(in srgb, var(--border-focus) 22%, transparent);
}
.sns-comment-reply-footer > div:last-child {
  display: flex;
  gap: var(--space-2);
  flex: 0 0 auto;
}
.sns-comment-reply-target {
  margin: 0;
  font-weight: 600;
}
#snsCommentReplyStatus.is-error,
#snsCommentReplyCount.is-error,
#snsMediaCommentReplyStatus.is-error,
#snsMediaCommentReplyCount.is-error {
  color: var(--color-danger);
}
.sns-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}
.sns-kpi-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.sns-kpi-card span {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}
.sns-kpi-card strong {
  color: var(--text-primary);
  font-size: var(--font-size-2xl);
}
.sns-chart-grid,
.sns-demo-tables {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.sns-chart-card,
.sns-demo-bars,
.sns-demo-table,
.sns-coverage-card { min-width: 0; }
.sns-trend-svg {
  display: block;
  width: 100%;
  height: 220px;
}
.sns-trend-axis {
  stroke: var(--border-default);
  stroke-width: 1;
}
.sns-trend-line {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.sns-trend-line-secondary { stroke: var(--color-warning); }
.sns-trend-dot {
  r: var(--radius-md);
  fill: var(--color-primary);
  stroke: var(--bg-surface);
  stroke-width: calc(var(--space-1) / 2);
  vector-effect: non-scaling-stroke;
}
.sns-trend-dot-secondary { fill: var(--color-warning); }
.sns-trend-label {
  fill: var(--text-muted);
  font-size: var(--font-size-xs);
}
.sns-chart-legend {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}
.sns-chart-legend span::before {
  display: inline-block;
  width: var(--space-3);
  height: 3px;
  margin-right: var(--space-1);
  vertical-align: middle;
  background: var(--color-primary);
  content: "";
}
.sns-chart-legend span + span::before { background: var(--color-warning); }
.sns-section,
.sns-coverage-card { margin-top: var(--space-4); }
.sns-demo-bar-row {
  display: grid;
  grid-template-columns: minmax(110px, 0.8fr) minmax(140px, 2fr) auto;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
}
.sns-demo-track {
  height: var(--space-2);
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--bg-muted);
}
.sns-demo-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--color-primary);
}
.sns-story-note {
  margin: 0;
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}
.card.sns-story-card { padding: var(--space-3); }
.sns-story-image-wrap { border-radius: var(--radius-lg); }
.sns-story-image-wrap > .badge {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
}

.sns-media-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-3);
}
.sns-media-card {
  position: relative;
  min-width: 0;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--bg-muted);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}
.sns-media-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.sns-media-card:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}
.sns-media-card .sns-media-thumb { height: 100%; }
.sns-media-card .sns-media-image { transition: transform 0.4s ease; }
.sns-media-card:hover .sns-media-image,
.sns-media-card:focus .sns-media-image { transform: scale(1.07); }
.sns-media-reach-badge,
.sns-media-kind-icon,
.sns-media-deleted-badge {
  position: absolute;
  z-index: 2;
  color: var(--text-inverse);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  box-shadow: var(--shadow-sm);
}
.sns-media-reach-badge {
  top: var(--space-2);
  left: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  background: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.sns-media-kind-icon {
  top: var(--space-2);
  right: var(--space-2);
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--text-secondary);
}
.sns-media-deleted-badge {
  top: 38px;
  left: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-danger);
}
.sns-media-overlay {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-3);
  background: linear-gradient(transparent, var(--text-primary));
  color: var(--text-inverse);
  opacity: 0;
  transition: opacity var(--transition-slow);
}
.sns-media-card:hover .sns-media-overlay,
.sns-media-card:focus .sns-media-overlay,
.sns-media-card:focus-within .sns-media-overlay { opacity: 1; }
.sns-media-overlay time {
  margin-bottom: var(--space-1);
  color: var(--text-inverse);
  font-size: var(--font-size-xs);
  opacity: 0.85;
}
.sns-media-overlay .sns-media-stats {
  display: flex;
  grid-template-columns: none;
  flex-wrap: wrap;
  gap: var(--space-3);
  color: var(--text-inverse);
  font-size: var(--font-size-sm);
}
.sns-media-overlay .sns-media-stats span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.sns-media-detail-scroll-lock { overflow: hidden; }
.sns-media-detail-layer {
  position: fixed;
  z-index: var(--z-modal);
  inset: 0;
}
.sns-media-detail-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 39, 0.4);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.sns-media-detail-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(560px, 92vw);
  overflow-y: auto;
  outline: 0;
  background: var(--bg-surface);
  box-shadow: var(--shadow-xl);
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.sns-media-detail-layer.is-open .sns-media-detail-backdrop { opacity: 1; }
.sns-media-detail-layer.is-open .sns-media-detail-drawer { transform: translateX(0); }
.sns-media-detail-hero {
  position: relative;
  overflow: hidden;
  background: var(--bg-muted);
}
.sns-media-detail-hero .sns-detail-main-image {
  aspect-ratio: 4 / 3;
  border-radius: 0;
}
.sns-media-detail-hero .sns-carousel-strip {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  left: var(--space-3);
  margin: 0;
}
.sns-media-detail-hero .sns-carousel-item {
  flex-basis: 64px;
  border: 2px solid var(--bg-surface);
  box-shadow: var(--shadow-md);
}
.sns-media-detail-close {
  position: absolute;
  z-index: 3;
  top: var(--space-3);
  right: var(--space-3);
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: var(--font-size-2xl);
  box-shadow: var(--shadow-md);
  cursor: pointer;
}
.sns-media-detail-close:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}
.sns-media-detail-body { padding: var(--space-5); }
.sns-media-detail-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.sns-media-detail-heading h3 { margin: 0 0 var(--space-1); }
.sns-media-detail-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.sns-media-detail-metric {
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--bg-muted);
  text-align: center;
}
.sns-media-detail-metric-primary {
  grid-column: span 2;
  background: var(--color-primary-bg);
}
.sns-media-detail-metric strong,
.sns-media-detail-metric span {
  display: block;
}
.sns-media-detail-metric strong {
  color: var(--text-primary);
  font-size: var(--font-size-2xl);
  font-variant-numeric: tabular-nums;
}
.sns-media-detail-metric-primary strong {
  color: var(--color-primary);
  font-size: 26px;
}
.sns-media-detail-metric span {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}
.sns-media-detail-body > .sns-caption {
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--bg-muted);
}
.sns-media-detail-footer {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  background: linear-gradient(transparent, var(--bg-surface) 30%);
}
@media (hover: none) {
  .sns-media-overlay { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .sns-media-detail-backdrop,
  .sns-media-detail-drawer,
  .sns-media-card,
  .sns-media-card .sns-media-image {
    transition: none;
  }
}

/* Instagram DM: LINE個別チャット（line-chat.js の lc-*）由来。
   LINEタブの遅延style注入へ依存させず、igdm-* とCSS変数で独立管理する。 */
.sns-dm-view {
  min-height: 0;
  gap: var(--space-2);
}
.igdm-root {
  --igdm-list-width: 320px;
  --igdm-panel-width: 300px;
  position: relative;
  display: grid;
  grid-template-columns: var(--igdm-list-width) minmax(0, 1fr) var(--igdm-panel-width);
  flex: 1;
  height: auto;
  min-height: 480px;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-muted);
  color: var(--text-primary);
}
.igdm-list {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  border-right: 1px solid var(--border-default);
  background: var(--bg-surface);
}
.igdm-tools {
  display: grid;
  flex-shrink: 0;
  gap: var(--space-2);
  padding: 10px;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-surface);
}
.igdm-tools input[type="search"] {
  box-sizing: border-box;
  width: 100%;
  height: 32px;
  padding: 0 var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--font-size-sm);
}
.igdm-toggles {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.igdm-toggle {
  display: flex;
  min-width: 0;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
}
.igdm-toggle input {
  width: 16px;
  height: 16px;
  margin: 0;
}
.igdm-toggle-sep {
  width: 1px;
  height: 14px;
  background: var(--border-default);
}
.igdm-list-count {
  min-height: 25px;
  padding: 5px 10px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  text-align: right;
}
.igdm-convs {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
}
.igdm-row {
  position: relative;
  display: grid;
  width: 100%;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  padding: 10px;
  border: 0;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-surface);
  color: var(--text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.igdm-row:hover { background: var(--bg-hover); }
.igdm-row:disabled {
  cursor: wait;
  opacity: 0.62;
}
.igdm-row.active { background: var(--color-primary-bg); }
.igdm-row.flagged { background: var(--color-warning-bg); }
.igdm-row.flagged::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--color-warning);
  content: "";
}
.igdm-row:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: -2px;
}
/* 人間フラグ（スタッフの目印・2026-09-26）。送信結果不明の .flagged とは別物 */
.igdm-row.is-staff-flagged {
  background: linear-gradient(90deg, var(--color-danger-bg), var(--bg-surface) 60%);
}
.igdm-row.is-staff-flagged:hover {
  background: linear-gradient(90deg, var(--color-danger-bg), var(--bg-hover) 60%);
}
.igdm-row.is-staff-flagged.active {
  background: linear-gradient(90deg, var(--color-danger-bg), var(--color-primary-bg) 60%);
}
.igdm-row-right-top {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.igdm-name .staff-note-list-badge { flex: 0 0 auto; }
/* 見出しの人間メモは会話名のすぐ右。右端の操作群とは離す */
.igdm-head > .staff-note {
  flex: 0 1 auto;
  margin-right: auto;
}
/* 旗の絞り込みを既存のトグルと同じ1行に収める（改行させない） */
.igdm-toggles:has(.staff-flag-filter) { gap: 6px; }
.igdm-toggles:has(.staff-flag-filter) .igdm-toggle { gap: var(--space-1); }
.igdm-toggles:has(.staff-flag-filter) .igdm-toggle input { width: 14px; height: 14px; }
.igdm-toggles .staff-flag-filter-select {
  padding: 2px 18px 2px var(--space-1);
  background-position: right 4px center;
  font-size: var(--font-size-xs);
}
.igdm-avatar,
.igdm-avatar-msg {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--bg-muted);
  color: var(--text-tertiary);
  object-fit: cover;
}
.igdm-avatar {
  width: 38px;
  height: 38px;
  font-size: var(--font-size-sm);
}
.igdm-avatar-msg {
  width: 30px;
  height: 30px;
  font-size: var(--font-size-xs);
}
.igdm-row-main {
  display: block;
  min-width: 0;
}
.igdm-name {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}
.igdm-name-txt,
.igdm-prev {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.igdm-name-txt { min-width: 0; }
.igdm-flag-ico { flex: 0 0 auto; font-size: var(--font-size-xs); }
.igdm-prev {
  display: block;
  margin-top: 3px;
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}
.igdm-row-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.igdm-unread-badge {
  display: inline-flex;
  min-width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
  padding: 0 5px;
  border-radius: var(--radius-full);
  background: var(--color-danger);
  color: var(--text-inverse);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}
.igdm-time {
  color: var(--text-muted);
  font-size: 11px;
  white-space: nowrap;
}
.igdm-window-chip {
  display: inline-flex;
  align-items: center;
  height: 19px;
  margin-top: 5px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--color-primary-bg);
  color: var(--color-primary);
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}
.igdm-window-chip.pending {
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}
.igdm-window-chip.expired {
  background: var(--bg-muted);
  color: var(--text-muted);
}
.igdm-thread {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  background: var(--bg-muted);
}
.igdm-head {
  display: flex;
  min-height: 54px;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0 14px;
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-surface);
}
.igdm-title {
  min-width: 0;
  overflow: hidden;
  font-weight: var(--font-weight-bold);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.igdm-summary {
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  white-space: nowrap;
}
.igdm-head-actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-2);
}
.igdm-mark-unread {
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}
.igdm-mark-unread:hover { background: var(--bg-hover); }
.igdm-mark-unread:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}
.igdm-mark-unread:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.igdm-context-menu {
  position: fixed;
  z-index: var(--z-dropdown);
  display: grid;
  min-width: 190px;
  padding: var(--space-1);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-lg);
}
.igdm-context-item {
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: var(--font-size-sm);
  text-align: left;
  cursor: pointer;
}
.igdm-context-item:hover { background: var(--bg-hover); }
.igdm-context-item:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: -2px;
}
.igdm-window-banner {
  flex-shrink: 0;
  margin: 0;
  padding: 8px 14px;
  border-bottom: 1px solid var(--color-warning);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}
.igdm-window-banner:not(.expired) {
  border-bottom-color: var(--color-success);
  background: var(--color-success-bg);
  color: var(--color-success-text);
}
.igdm-window-banner.expired {
  border-bottom-color: var(--color-danger);
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
}
.igdm-msgs {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: var(--space-2);
  padding: 14px;
  overflow-y: auto;
  background: var(--bg-muted);
}
.igdm-day {
  margin: 8px 0;
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  text-align: center;
}
.igdm-msg {
  display: flex;
  max-width: 78%;
  align-items: flex-end;
  gap: 7px;
}
.igdm-msg.inbound { align-self: flex-start; }
.igdm-msg.outbound {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.igdm-msg.unknown {
  max-width: 70%;
  align-self: center;
}
.igdm-msg.sending { opacity: .62; }
.igdm-msg.result_unknown .igdm-bubble,
.igdm-msg.retry .igdm-bubble { outline: 1px solid var(--color-warning); }
.igdm-bubble-wrap {
  display: flex;
  min-width: 0;
  max-width: 100%;
  align-items: flex-end;
  gap: 6px;
}
.igdm-bubble {
  position: relative;
  display: grid;
  min-width: 0;
  gap: var(--space-1);
  padding: 8px 10px;
  border: 0;
  border-radius: 16px;
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.igdm-msg.inbound .igdm-bubble { border-top-left-radius: 4px; }
.igdm-msg.inbound .igdm-bubble::before {
  position: absolute;
  top: 7px;
  left: -6px;
  border-top: 6px solid var(--bg-surface);
  border-left: 6px solid transparent;
  content: "";
}
.igdm-msg.outbound .igdm-bubble {
  border-top-right-radius: 4px;
  background: var(--color-primary);
  color: var(--text-inverse);
}
.igdm-msg.outbound .igdm-bubble::after {
  position: absolute;
  top: 7px;
  right: -6px;
  border-top: 6px solid var(--color-primary);
  border-right: 6px solid transparent;
  content: "";
}
.igdm-msg.unknown .igdm-bubble {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  color: var(--text-secondary);
}
.igdm-message-text { white-space: pre-wrap; }
.igdm-media,
.lc-media {
  display: block;
  max-width: 260px;
  max-height: 220px;
  border-radius: 6px;
  object-fit: contain;
}
.igdm-media-placeholder {
  display: grid;
  min-width: 180px;
  min-height: 72px;
  place-items: center;
  padding: var(--space-3);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-muted);
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  text-align: center;
}
.igdm-story-card {
  display: grid;
  gap: var(--space-2);
  min-width: 210px;
  max-width: 300px;
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  color: var(--text-primary);
}
.igdm-story-label {
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: 1.5;
}
.igdm-reaction-badge {
  position: absolute;
  z-index: 2;
  right: -8px;
  bottom: -11px;
  min-width: 24px;
  padding: 2px 6px;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  color: var(--text-primary);
  font-size: 11px;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}
.igdm-reaction-toggle {
  position: absolute;
  z-index: 3;
  top: -13px;
  right: -25px;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border-default);
  border-radius: 50%;
  opacity: 0;
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  color: var(--text-secondary);
  font: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: opacity .12s ease, transform .12s ease;
  transform: scale(.92);
}
.igdm-msg.outbound .igdm-reaction-toggle {
  right: auto;
  left: -25px;
}
.igdm-bubble:hover .igdm-reaction-toggle,
.igdm-bubble:focus-within .igdm-reaction-toggle,
.igdm-reaction-toggle:focus-visible {
  opacity: 1;
  transform: scale(1);
}
.igdm-reaction-toggle:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}
.igdm-reaction-toggle:disabled {
  cursor: wait;
}
.igdm-reaction-pending {
  position: absolute;
  z-index: 2;
  right: 4px;
  bottom: -18px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  font-size: 10px;
  line-height: 1.2;
  white-space: nowrap;
}
.igdm-msg.outbound .igdm-reaction-pending {
  right: auto;
  left: 4px;
}
.igdm-placeholder {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}
.igdm-file {
  padding: 6px 10px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-secondary);
}
.igdm-stamp {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.15;
  white-space: nowrap;
}
.igdm-note { font-size: 10px; }
.igdm-retry {
  padding: 2px 7px;
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-md);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  font: inherit;
  font-size: 10px;
  cursor: pointer;
}
.igdm-load-more {
  align-self: center;
  margin: var(--space-2) 0 0;
  padding: 5px 10px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--font-size-xs);
  cursor: pointer;
}
.igdm-compose {
  position: relative;
  display: grid;
  flex-shrink: 0;
  gap: var(--space-2);
  padding: 10px;
  border-top: 1px solid var(--border-default);
  background: var(--bg-surface);
}
.igdm-compose.igdm-dragover {
  outline: 2px dashed var(--color-primary);
  outline-offset: -4px;
  background: var(--color-primary-bg);
}
.igdm-compose.igdm-dragover-multi {
  outline: 2px dashed var(--color-danger);
  outline-offset: -4px;
  background: var(--color-danger-bg);
}
.igdm-compose.igdm-dragover::after,
.igdm-compose.igdm-dragover-multi::after {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--bg-surface) 72%, transparent);
  content: "ここにドロップして添付";
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  pointer-events: none;
}
.igdm-compose.igdm-dragover-multi::after {
  content: "画像・動画は1件ずつアップロードしてください";
  color: var(--color-danger);
}
.igdm-compose-toolbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
}
.igdm-compose-hint {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 11px;
}
.igdm-tool-btn {
  display: grid;
  width: 34px;
  height: 32px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.igdm-tool-btn:hover { background: var(--bg-hover); }
.igdm-tool-btn:disabled { opacity: .4; cursor: not-allowed; }
.igdm-compose-row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
}
.igdm-compose textarea {
  box-sizing: border-box;
  min-width: 0;
  min-height: 54px;
  max-height: 340px;
  flex: 1;
  padding: var(--space-2);
  overflow-y: auto;
  resize: none;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--font-size-sm);
}
.igdm-compose-row > button {
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: var(--text-inverse);
  font: inherit;
  cursor: pointer;
}
.igdm-compose-row > button:disabled { opacity: .55; cursor: not-allowed; }
.igdm-compose .sns-inline-status { min-height: 0; }
.igdm-attach-preview {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-2);
  padding: 6px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--bg-muted);
}
.igdm-attach-thumb {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  border-radius: var(--radius-sm);
  background: var(--bg-muted);
  object-fit: cover;
}
.igdm-attach-name {
  min-width: 0;
  flex: 1;
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  overflow-wrap: anywhere;
}
.igdm-attach-send {
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: var(--text-inverse);
  font: inherit;
  font-size: var(--font-size-xs);
  cursor: pointer;
}
.igdm-attach-send:disabled {
  opacity: .55;
  cursor: not-allowed;
}
.igdm-attach-remove {
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 18px;
  cursor: pointer;
}
.igdm-attach-remove:hover { color: var(--color-danger); }
.igdm-emoji-pop {
  position: absolute;
  top: auto;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 30;
  width: 280px;
  max-width: min(280px, calc(100vw - 40px));
  max-height: 240px;
  padding: var(--space-2);
  overflow: auto;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-lg);
}
.igdm-emoji-cat {
  margin: 6px 2px 3px;
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: var(--font-weight-bold);
}
.igdm-emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
}
.igdm-emoji-btn {
  padding: 4px 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}
.igdm-emoji-btn:hover { background: var(--color-primary-bg); }
.ig-confirm-overlay,
.igdm-confirm-overlay {
  position: fixed;
  z-index: calc(var(--z-modal) + 2);
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--bg-nav) 40%, transparent);
}
.ig-confirm-dialog,
.igdm-confirm-dialog {
  width: min(480px, calc(100vw - 32px));
  padding: var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
  box-shadow: var(--shadow-xl);
}
.ig-confirm-title {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-xl);
  line-height: var(--line-height-tight);
}
.ig-confirm-title.igdm-confirm-message {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-xl);
  line-height: var(--line-height-tight);
}
.ig-confirm-message,
.igdm-confirm-message {
  margin: var(--space-3) 0 0;
  color: var(--text-secondary);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
}
.ig-confirm-target {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
}
.ig-confirm-target-label,
.ig-confirm-body-label {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}
.ig-confirm-target-value {
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  overflow-wrap: anywhere;
}
.ig-confirm-body-section {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-3);
}
.ig-confirm-body {
  max-height: 260px;
  margin: 0;
  padding: var(--space-3);
  overflow: auto;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.ig-confirm-warning {
  margin: var(--space-3) 0 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-warning-subtle);
  border-radius: var(--radius-md);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
}
.ig-confirm-dialog.is-danger .ig-confirm-title {
  color: var(--color-danger-text);
}
.ig-confirm-actions,
.igdm-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.ig-confirm-button,
.igdm-confirm-button {
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--font-size-md);
  cursor: pointer;
}
.ig-confirm-button:hover,
.igdm-confirm-button:hover { background: var(--bg-hover); }
.ig-confirm-button:focus-visible,
.igdm-confirm-button:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}
.ig-confirm-send,
.igdm-confirm-send {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--text-inverse);
}
.ig-confirm-send:hover,
.igdm-confirm-send:hover {
  border-color: var(--color-primary-hover);
  background: var(--color-primary-hover);
}
.ig-confirm-dialog.is-danger .ig-confirm-send {
  border-color: var(--color-danger);
  background: var(--color-danger);
}
.ig-confirm-dialog.is-danger .ig-confirm-send:hover {
  border-color: var(--color-danger-hover);
  background: var(--color-danger-hover);
}
.igdm-draft-card {
  margin: 8px 12px;
  padding: 12px;
  border: 1px solid var(--border-default);
  border-left: 4px solid var(--color-warning);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}
.igdm-draft-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.igdm-draft-title {
  color: var(--color-warning-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}
.igdm-draft-warning {
  margin-top: var(--space-2);
  padding: 8px 10px;
  border-radius: var(--radius-md);
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
  font-size: var(--font-size-xs);
  line-height: 1.45;
}
.igdm-draft-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-3);
}
.igdm-draft-btn {
  height: 32px;
  padding: 0 11px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}
.igdm-ai-draft-host {
  flex: 0 0 auto;
  min-height: 0;
  max-height: min(44vh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.igdm-ai-outcome-card {
  margin: var(--space-2) var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-muted);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}
.igdm-ai-outcome-card.is-failed {
  border-color: var(--color-danger);
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
}
.igdm-ai-outcome-newer,
.igdm-ai-outcome-rationale {
  margin-top: var(--space-1);
}
.igdm-ai-outcome-rationale summary {
  cursor: pointer;
  color: inherit;
  font-size: var(--font-size-sm);
}
.igdm-ai-outcome-rationale-text {
  margin-top: var(--space-1);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-secondary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.igdm-ai-outcome-card.is-failed .igdm-ai-outcome-rationale-text {
  background: var(--color-danger-subtle);
  color: var(--color-danger-text);
}
.igdm-ai-draft-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 7px;
  border: 1px solid var(--color-primary-subtle);
  border-radius: var(--radius-full);
  background: var(--color-primary-bg);
  color: var(--color-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}
.igdm-ai-draft-card {
  margin: 8px 12px;
  padding: 12px;
  border: 1px solid var(--color-primary-subtle);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-lg);
  background: var(--color-primary-bg);
  box-shadow: var(--shadow-sm);
}
.igdm-ai-draft-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.igdm-ai-draft-title {
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}
.igdm-ai-draft-username {
  overflow: hidden;
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.igdm-ai-draft-text {
  margin-top: var(--space-2);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.igdm-ai-draft-notice {
  margin-top: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.igdm-ai-draft-status {
  margin-top: var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}
.igdm-ai-draft-editor-label {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}
.igdm-ai-draft-editor {
  width: 100%;
  min-height: 104px;
  resize: vertical;
  padding: 9px 10px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--font-size-sm);
  line-height: 1.5;
}
.igdm-ai-draft-editor:focus {
  border-color: var(--border-focus);
  outline: 2px solid var(--color-primary-bg);
}
.igdm-ai-draft-editor-tools {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
}
.igdm-ai-draft-count {
  margin-left: auto;
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
}
.igdm-ai-draft-count.is-error {
  color: var(--color-danger-text);
  font-weight: var(--font-weight-semibold);
}
.igdm-ai-draft-actions {
  position: sticky;
  z-index: 1;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--space-2) 0;
  background: var(--color-primary-bg);
}
.igdm-ai-draft-button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}
.igdm-ai-draft-button:hover:not(:disabled) { background: var(--bg-hover); }
.igdm-ai-draft-button:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}
.igdm-ai-draft-button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}
.igdm-ai-draft-approve {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--text-inverse);
}
.igdm-ai-draft-approve:hover:not(:disabled) {
  border-color: var(--color-primary-hover);
  background: var(--color-primary-hover);
}
.igdm-ai-draft-reject {
  border-color: var(--color-danger);
  color: var(--color-danger-text);
}
.igdm-ai-draft-secondary {
  color: var(--text-secondary);
}
.igdm-panel {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  border-left: 1px solid var(--border-default);
  background: var(--bg-surface);
}
.igdm-panel-content {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
}
.igdm-panel-empty,
.igdm-empty {
  display: grid;
  min-height: 140px;
  height: 100%;
  place-items: center;
  padding: var(--space-4);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  text-align: center;
}
.igdm-panel-head {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-3);
  padding: 18px;
  border-bottom: 1px solid var(--border-light);
}
.igdm-panel-ig-av {
  box-sizing: border-box;
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  padding: 2px;
  border-radius: 50%;
  background: linear-gradient(45deg, #f09433, #dc2743, #bc1888);
}
.igdm-panel-avatar {
  display: grid;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  place-items: center;
  border: 2px solid var(--bg-surface);
  border-radius: 50%;
  background: var(--bg-muted);
  color: var(--text-tertiary);
  object-fit: cover;
}
.igdm-panel-identity { min-width: 0; }
.igdm-panel-name {
  min-width: 0;
  overflow: hidden;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.igdm-panel-badge {
  display: inline-grid;
  height: 20px;
  margin-top: 6px;
  padding: 0 8px;
  place-items: center;
  border-radius: 10px;
  background: var(--color-info-bg);
  color: var(--color-info);
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
}
.igdm-panel-open {
  display: inline-grid;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  place-items: center;
  margin-left: auto;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  text-decoration: none;
  transition: background-color var(--transition-normal), color var(--transition-normal);
}
.igdm-panel-open:hover {
  background: var(--bg-subtle);
  color: var(--color-primary);
}
.igdm-panel-open:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.igdm-panel-open svg {
  display: block;
  width: 17px;
  height: 17px;
}
.igdm-panel-open-fallback { color: var(--text-tertiary); }
.igdm-panel-basic {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-light);
}
.igdm-panel-basic-cell { min-width: 0; flex: 1; }
.igdm-panel-basic-cell .k {
  color: var(--text-tertiary);
  font-size: 11px;
}
.igdm-panel-basic-cell .v {
  margin-top: 3px;
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}
.igdm-panel-section {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-light);
}
.igdm-panel-label {
  margin-bottom: 7px;
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: var(--font-weight-bold);
}
.igdm-panel-value {
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.igdm-status-grid { display: grid; gap: 6px; }
.igdm-status-grid > span:not(.igdm-panel-mini) {
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
}
.igdm-panel-mini {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
}
.igdm-panel-mini.ok {
  background: var(--color-success-bg);
  color: var(--color-success-text);
}
.igdm-panel-mini.soon,
.igdm-panel-soon {
  background: var(--bg-muted);
  color: var(--text-muted);
}
.igdm-panel-soon {
  padding: 4px 0;
  font-size: var(--font-size-xs);
  line-height: 1.5;
}
.igdm-resizer {
  position: absolute;
  z-index: 6;
  top: 0;
  bottom: 0;
  width: 6px;
  cursor: col-resize;
  touch-action: none;
}
.igdm-resizer:hover,
.igdm-resizer:focus-visible {
  background: color-mix(in srgb, var(--color-primary) 18%, transparent);
  outline: none;
}
.igdm-resizer-list {
  left: var(--igdm-list-width);
  margin-left: -3px;
}
.igdm-resizer-panel {
  right: var(--igdm-panel-width);
  margin-right: -3px;
}
body.igdm-resizing {
  cursor: col-resize !important;
  user-select: none !important;
}

@media (max-width: 900px) {
  .igdm-root {
    flex: none;
    height: auto;
    min-height: 0;
    grid-template-columns: 1fr;
    overflow: visible;
  }
  .igdm-list {
    height: 42vh;
    border-right: 0;
    border-bottom: 1px solid var(--border-default);
  }
  .igdm-thread { min-height: 560px; }
  .igdm-panel {
    max-height: 42vh;
    border-top: 1px solid var(--border-default);
    border-left: 0;
  }
  .igdm-msg { max-width: 90%; }
  .igdm-resizer { display: none; }
}

@media (max-width: 1200px) {
  .sns-dashboard-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sns-dashboard-main-grid { grid-template-columns: 1fr; }
  .sns-media-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sns-compose-editor { grid-template-columns: 1fr; }
  .sns-compose-live-preview { position: static; }
}
@media (max-width: 768px) {
  .sns-dashboard,
  .sns-dashboard-loading { padding: var(--space-3); }
  .sns-settings-header { flex-direction: column; }
  .sns-account-grid { grid-template-columns: 1fr; }
  .sns-admin-room-form { grid-template-columns: 1fr; }
  .sns-media-grid,
  .sns-story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sns-dm-layout {
    min-height: 0;
    grid-template-columns: 1fr;
  }
  .sns-dm-conversation-list { max-height: 280px; }
  .sns-dm-thread-card { min-height: 520px; }
  .sns-detail-layout,
  .sns-chart-grid,
  .sns-demo-tables,
  .sns-compose-layout { grid-template-columns: 1fr; }
  .sns-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sns-comment-replies { margin-left: var(--space-3); }
  .sns-insights-controls { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 600px) {
  .sns-media-detail-drawer { width: 100%; }
}
@media (max-width: 440px) {
  .sns-dashboard-kpis { grid-template-columns: 1fr; }
  .sns-dashboard-donut-layout {
    align-items: stretch;
    flex-direction: column;
  }
  .sns-dashboard-donut { align-self: center; }
  .sns-dashboard-top-strip { grid-auto-columns: minmax(150px, 78vw); }
  .sns-media-grid,
  .sns-story-grid,
  .sns-kpi-grid { grid-template-columns: 1fr; }
  .sns-story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.mat-inner-tab-btn {
  padding: 3px 10px;
  border: 1px solid #d1d5db;
  background: #fff;
  font-size: 11px;
  cursor: pointer;
  color: #6b7280;
  border-radius: 10px;
  transition: all 0.15s;
}
.mat-inner-tab-btn.active {
  background: #1d4ed8;
  color: #fff;
  border-color: #1d4ed8;
  font-weight: 600;
}
.data-platform-tab-btn {
  padding: 3px 10px;
  border: 1px solid #d1d5db;
  background: #fff;
  font-size: 11px;
  cursor: pointer;
  color: #6b7280;
  border-radius: 10px;
  transition: all 0.15s;
}
.data-platform-tab-btn.active {
  background: #1d4ed8;
  color: #fff;
  border-color: #1d4ed8;
  font-weight: 600;
}
.data-platform-panel { display: none; }
.data-platform-panel.active { display: block; }

.listing-health-freshness {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-bottom: 10px;
  padding: 8px 10px;
  border: 1px solid #bbf7d0;
  border-radius: 5px;
  background: #f0fdf4;
  color: #166534;
  font-size: 12px;
}
.listing-health-freshness.stale {
  border-color: #fcd34d;
  background: #fffbeb;
  color: #92400e;
}
.listing-health-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.listing-health-metric {
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #fff;
}
.listing-health-metric span { display: block; color: #6b7280; font-size: 11px; }
.listing-health-metric strong { display: block; margin-top: 3px; color: #111827; font-size: 20px; }
.listing-health-metric small { margin-left: 3px; font-size: 11px; font-weight: 500; }
.listing-health-table { min-width: 1120px; }
.listing-health-number { text-align: right; white-space: nowrap; }
.listing-health-reason {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 999px;
  background: #fef2f2;
  color: #b91c1c;
  font-size: 11px;
  white-space: nowrap;
}
.listing-health-empty { padding: 28px 16px; color: #6b7280; text-align: center; font-size: 12px; }
.listing-health-empty.error { color: #dc2626; }

.boss-order-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.boss-order-table th, .boss-order-table td {
  border: 1px solid #e5e7eb;
  padding: 4px 6px;
  white-space: nowrap;
}
.boss-order-table th {
  background: #f3f4f6;
  color: #374151;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 1;
}
.boss-order-table tr:hover { background: #f0f9ff; }
.boss-order-table .order-link {
  color: #2563eb;
  cursor: pointer;
  text-decoration: underline;
}
.boss-order-table .order-link:hover { color: #1d4ed8; }
.boss-order-table .rakuten-item-link {
  color: #2563eb;
  cursor: pointer;
  text-decoration: underline;
}
.boss-order-table .rakuten-item-link:hover { color: #1d4ed8; }

.order-detail-items-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.order-detail-items-table th, .order-detail-items-table td {
  border: 1px solid #e5e7eb;
  padding: 6px 8px;
}
.order-detail-items-table th {
  background: #f3f4f6;
  font-weight: 600;
  text-align: left;
}

.donation-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.donation-table th, .donation-table td {
  border: 1px solid #e5e7eb;
  padding: 6px 8px;
  text-align: right;
  white-space: nowrap;
}
.donation-table th {
  background: #f3f4f6;
  color: #374151;
  font-weight: 600;
  position: sticky;
  top: 0;
}
.donation-table th:first-child, .donation-table td:first-child {
  text-align: left;
}
.donation-table tr:hover { background: #f9fafb; }
.donation-table tfoot td {
  font-weight: 700;
  background: #eef2ff;
  border-top: 2px solid #6366f1;
}

/* アカウント管理 */
.account-list { margin-bottom: 12px; }
.acct-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.acct-table thead th {
  background: #f9fafb;
  border-bottom: 2px solid #e5e7eb;
  padding: 6px 8px;
  text-align: center;
  font-weight: 600;
  color: #374151;
  font-size: 11px;
  white-space: nowrap;
}
.acct-table thead th:first-child { text-align: left; }
.acct-table tbody td {
  border-bottom: 1px solid #f3f4f6;
  padding: 6px 8px;
  text-align: center;
  vertical-align: middle;
}
.acct-table tbody tr:hover { background: #f9fafb; }
.acct-table tbody tr.account-inactive { opacity: 0.45; }
.acct-name-cell { text-align: left !important; white-space: nowrap; }
.acct-name-cell .account-name { font-weight: 600; color: #111827; font-size: 12px; }
.acct-name-cell .account-username { font-size: 10px; color: #9ca3af; margin-left: 4px; }
.account-role-badge {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 10px;
  font-weight: 600;
  white-space: nowrap;
}
.account-role-admin { background: #fef3c7; color: #92400e; }
.account-role-staff { background: #dbeafe; color: #1e40af; }
.acct-perm-dot {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  width: 20px;
  text-align: center;
}
.acct-perm-dot.on { color: #16a34a; }
.acct-perm-dot.off { color: #d1d5db; }
.acct-perm-dot.partial { color: #f59e0b; font-size: 10px; }
.acct-actions-cell { white-space: nowrap; }
.account-edit-btn, .account-toggle-btn {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid #d1d5db;
  background: #fff;
  cursor: pointer;
  color: #374151;
}
.account-edit-btn:hover { background: #f3f4f6; }
.account-toggle-btn.deactivate { border-color: #fca5a5; color: #dc2626; }
.account-toggle-btn.activate { border-color: #6ee7b7; color: #059669; }
/* アカウント編集フォーム */
.pm-edit-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 6px var(--space-3);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: background var(--transition-normal), color var(--transition-normal), border-color var(--transition-normal);
}
.pm-edit-toggle:hover { background: var(--bg-subtle); }
.pm-edit-toggle.pm-active {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--text-inverse);
}
.pm-edit-toggle:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.pm-view-toggle {
  display: inline-flex;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
  padding: var(--space-1);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-muted);
}
.pm-view-btn {
  padding: 5px var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}
.pm-view-btn.pm-active {
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  color: var(--color-primary);
}
.pm-view-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.pm-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px var(--space-3);
  border: 1px solid var(--border-default);
  border-bottom: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--bg-muted);
}
.pm-search {
  width: 180px;
  padding: 5px 10px;
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  outline: 0;
  background: var(--bg-input);
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
}
.pm-search:focus {
  border-color: var(--border-focus);
  box-shadow: var(--shadow-focus);
}
.pm-role-filter {
  padding: 3px 10px;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  color: var(--text-tertiary);
  font-family: var(--font-family);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}
.pm-role-filter.pm-active {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
  color: var(--color-primary);
}
.pm-toolbar-spacer { flex: 1; }
.pm-legend {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}
.pm-legend > span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.pm-legend-on {
  color: var(--color-success-dark);
  font-weight: var(--font-weight-bold);
}
.pm-legend-off { color: var(--text-muted); }
.pm-extension-legend { max-width: 620px; flex-wrap: wrap; justify-content: flex-end; }
.pm-scroll {
  --pm-rowhead-width: 260px;
  --pm-account-width: 88px;
  max-height: calc(100vh - 260px);
  overflow: auto;
  border: 1px solid var(--border-default);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: var(--bg-surface);
}
.pm-matrix {
  width: auto;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--text-primary);
  font-size: var(--font-size-base);
}
.pm-matrix th,
.pm-matrix td {
  padding: 0;
  margin: 0;
}
.pm-corner {
  position: sticky;
  top: 0;
  left: 0;
  z-index: calc(var(--z-sticky) + 3);
  width: var(--pm-rowhead-width);
  min-width: var(--pm-rowhead-width);
  max-width: var(--pm-rowhead-width);
  padding: 0 var(--space-3) var(--space-2) !important;
  border-right: 1px solid var(--border-default);
  border-bottom: 2px solid var(--border-default);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  text-align: left;
  vertical-align: bottom;
}
.pm-corner span {
  display: block;
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}
.pm-corner strong {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}
.pm-acct-col {
  position: sticky;
  top: 0;
  z-index: calc(var(--z-sticky) + 2);
  width: var(--pm-account-width);
  min-width: var(--pm-account-width);
  max-width: var(--pm-account-width);
  height: 112px;
  border-bottom: 2px solid var(--border-default);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  vertical-align: bottom;
}
.pm-acct-head {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  padding: 6px var(--space-1);
  border: 0;
  background: transparent;
  color: inherit;
  font-family: var(--font-family);
  cursor: pointer;
}
.pm-acct-head:hover,
.pm-acct-head:focus-visible,
.pm-acct-col.pm-col-highlight { background: var(--color-primary-bg); }
.pm-acct-head:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: -2px;
}
.pm-acct-col.pm-inactive,
.pm-cell.pm-inactive { opacity: 0.45; }
.pm-avatar {
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  color: var(--text-inverse);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}
.pm-avatar-color-0 { background: var(--color-primary); }
.pm-avatar-color-1 { background: var(--color-success-dark); }
.pm-avatar-color-2 { background: var(--color-warning); }
.pm-avatar-color-3 { background: var(--color-info); }
.pm-avatar-color-4 { background: var(--color-danger); }
.pm-avatar-color-5 { background: var(--color-primary-active); }
.pm-avatar-color-6 { background: var(--color-success); }
.pm-avatar-color-7 { background: var(--color-warning-text); }
.pm-acct-name {
  display: -webkit-box;
  max-width: 78px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--text-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  text-align: center;
}
.pm-acct-meta {
  display: inline-flex;
  min-height: 11px;
  align-items: center;
  gap: var(--space-1);
}
.pm-role-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
}
.pm-role-admin { background: var(--color-warning); }
.pm-role-staff { background: var(--color-info); }
.pm-admin-note {
  color: var(--color-warning-text);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}
.pm-ai-usage {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}
.pm-rowhead {
  position: sticky;
  left: 0;
  z-index: var(--z-sticky);
  width: var(--pm-rowhead-width);
  min-width: var(--pm-rowhead-width);
  max-width: var(--pm-rowhead-width);
  border-right: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-surface);
  text-align: left;
}
.pm-rowhead-group {
  display: flex;
  height: 36px;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  color: var(--text-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
}
.pm-group-count {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}
.pm-group-bulk {
  display: inline-flex;
  margin-left: auto;
  gap: var(--space-1);
  opacity: 0;
  transition: opacity var(--transition-fast);
}
.pm-group-row:hover .pm-group-bulk,
.pm-rowhead-group:focus-within .pm-group-bulk { opacity: 1; }
.pm-mini-bulk {
  padding: 1px 5px;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text-tertiary);
  font-family: var(--font-family);
  font-size: 9px;
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}
.pm-mini-bulk:hover { background: var(--bg-active); }
.pm-rowhead-item,
.pm-rowhead-single {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--space-2);
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  text-align: left;
}
.pm-rowhead-item {
  height: 32px;
  padding: 0 var(--space-3) 0 26px;
}
.pm-rowhead-single {
  height: 34px;
  padding: 0 var(--space-3);
  color: var(--text-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
}
.pm-leaf-bulk { cursor: pointer; }
.pm-leaf-bulk:hover {
  background: var(--bg-subtle);
  color: var(--color-primary);
}
.pm-bulk-count {
  margin-left: auto;
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}
.pm-cell {
  position: relative;
  width: var(--pm-account-width);
  min-width: var(--pm-account-width);
  max-width: var(--pm-account-width);
  height: 32px;
  border-right: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  text-align: center;
  vertical-align: middle;
}
.pm-cell.pm-locked,
.pm-cell.pm-locked.pm-col-highlight,
body.pm-edit-mode .pm-cell.pm-locked {
  background: var(--bg-muted) !important;
  cursor: not-allowed;
}
.pm-cell.pm-locked .pm-chk,
.pm-cell.pm-locked .pm-gsum,
body.pm-edit-mode .pm-cell.pm-locked .pm-chk,
body.pm-edit-mode .pm-cell.pm-locked .pm-gsum {
  border-color: var(--border-light) !important;
  background: var(--bg-subtle) !important;
  box-shadow: none !important;
  color: var(--text-tertiary);
  cursor: not-allowed;
  opacity: 0.8;
}
.pm-group-row .pm-rowhead,
.pm-group-row .pm-cell { background: var(--bg-muted); }
.pm-group-row .pm-cell {
  height: 36px;
  border-bottom-color: var(--border-default);
}
.pm-single-row .pm-cell { height: 34px; }
.pm-matrix tbody tr:hover .pm-cell,
.pm-matrix tbody tr:hover .pm-rowhead,
.pm-cell.pm-col-highlight { background: var(--color-primary-bg); }
.pm-group-row:hover .pm-rowhead { background: var(--bg-active); }
.pm-chk {
  display: inline-flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  font-family: var(--font-family);
  font-size: var(--font-size-md);
  line-height: 1;
  cursor: default;
  transition: all var(--transition-normal);
}
.pm-chk.pm-on {
  color: var(--color-success-dark);
  font-weight: var(--font-weight-bold);
}
.pm-chk.pm-off { color: var(--border-medium); }
.pm-extension-load-failed {
  color: var(--color-danger-text);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}
.pm-extension-state { margin-left: auto; white-space: nowrap; }
body.pm-edit-mode .pm-cell { cursor: pointer; }
body.pm-edit-mode .pm-chk {
  border: 1px solid var(--border-medium);
  background: var(--bg-surface);
  cursor: pointer;
}
body.pm-edit-mode .pm-chk.pm-on {
  border-color: var(--color-success);
  background: var(--color-success);
  color: var(--text-inverse);
}
body.pm-edit-mode .pm-chk.pm-off { color: transparent; }
body.pm-edit-mode .pm-cell:hover .pm-chk {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}
body.pm-edit-mode .pm-cell:hover .pm-chk.pm-off { background: var(--color-primary-bg); }
.pm-gsum {
  display: inline-flex;
  min-width: 34px;
  height: 20px;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  font-family: var(--font-family);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  cursor: default;
}
.pm-gsum.pm-all {
  background: var(--color-success-subtle);
  color: var(--color-success-text);
}
.pm-gsum.pm-partial {
  background: var(--color-warning-subtle);
  color: var(--color-warning-text);
}
.pm-gsum.pm-none { color: var(--text-muted); }
body.pm-edit-mode .pm-gsum { cursor: pointer; }
body.pm-edit-mode .pm-group-cell:hover .pm-gsum {
  outline: 1px solid var(--color-primary);
  outline-offset: 1px;
}
body.pm-edit-mode .pm-group-cell.pm-locked:hover .pm-gsum {
  outline: 0;
}
.perm-tree.perm-tree-locked {
  border-radius: var(--radius-md);
  background: var(--bg-muted);
  color: var(--text-tertiary);
  cursor: not-allowed;
}
.perm-tree.perm-tree-locked label {
  cursor: not-allowed;
}
.pm-cell.pm-changed {
  background: var(--color-primary-bg) !important;
}
.pm-cell.pm-changed::after {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  content: "";
}
.pm-empty-row .pm-rowhead {
  height: 44px;
  padding: 0 var(--space-3);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}
.pm-acct-menu {
  position: fixed;
  top: var(--pm-menu-top, 0);
  left: var(--pm-menu-left, 0);
  z-index: var(--z-column-menu);
  display: none;
  width: 200px;
  padding: var(--space-1);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-xl);
  font-size: var(--font-size-sm);
}
.pm-acct-menu.pm-open { display: block; }
.pm-menu-head {
  padding: 6px 10px var(--space-1);
  overflow: hidden;
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pm-menu-item {
  display: block;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  text-align: left;
  cursor: pointer;
}
.pm-menu-item:hover { background: var(--bg-subtle); }
.pm-menu-item.pm-danger-item { color: var(--color-danger-text); }
.pm-menu-item.pm-success-item { color: var(--color-success-dark); }
.pm-menu-separator {
  height: 1px;
  margin: var(--space-1) 0;
  background: var(--border-default);
}
.pm-save-bar {
  position: fixed;
  bottom: var(--space-6);
  left: 50%;
  z-index: var(--z-tooltip);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 10px var(--space-3) 10px 18px;
  border-radius: var(--radius-xl);
  visibility: hidden;
  opacity: 0;
  background: var(--bg-nav);
  box-shadow: var(--shadow-xl);
  color: var(--text-inverse);
  transform: translateX(-50%) translateY(var(--space-4));
  transition: transform var(--transition-normal), opacity var(--transition-normal), visibility var(--transition-normal);
}
.pm-save-bar.pm-visible {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.pm-save-message {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}
.pm-save-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-primary-light);
}
.pm-save-discard,
.pm-save-submit {
  padding: 5px var(--space-3);
  border-radius: var(--radius-md);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}
.pm-save-discard {
  border: 1px solid var(--text-tertiary);
  background: transparent;
  color: var(--border-medium);
}
.pm-save-submit {
  padding-right: 18px;
  padding-left: 18px;
  border: 0;
  background: var(--color-success);
  color: var(--text-inverse);
  font-weight: var(--font-weight-semibold);
}
.pm-save-submit:hover { background: var(--color-success-hover); }
.pm-save-discard:disabled,
.pm-save-submit:disabled,
.pm-mini-bulk:disabled,
.pm-leaf-bulk:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.pm-toast {
  position: fixed;
  bottom: 88px;
  left: 50%;
  z-index: var(--z-toast);
  padding: var(--space-2) 18px;
  border-radius: var(--radius-full);
  opacity: 0;
  background: var(--color-success-dark);
  box-shadow: var(--shadow-lg);
  color: var(--text-inverse);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity var(--transition-normal);
}
.pm-toast.pm-error { background: var(--color-danger); }
.pm-toast.pm-visible { opacity: 1; }
body.pm-saving .pm-matrix-body { pointer-events: none; }
@media (max-width: 900px) {
  .pm-toolbar { align-items: flex-start; flex-wrap: wrap; }
  .pm-toolbar-spacer { display: none; }
  .pm-legend { width: 100%; flex-wrap: wrap; }
  .pm-scroll {
    --pm-rowhead-width: 220px;
    --pm-account-width: 82px;
  }
}

.gifting-route-cell {
  display: inline-flex;
  max-width: 15rem;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
}

.gifting-route-connect-btn {
  overflow: hidden;
  max-width: 11rem;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--color-primary);
  cursor: pointer;
  font-size: var(--font-size-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gifting-route-connect-btn:hover,
.gifting-route-connect-btn:focus-visible {
  background: var(--color-primary-bg);
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.gifting-datetime-cell {
  border: 0;
  border-bottom: 1px dashed #94a3b8;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  white-space: nowrap;
}
.gifting-datetime-cell:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
.lconr-cp-connection { border: 1px solid #a5b4fc; background: #eef2ff; color: #4338ca; cursor: pointer; }
.gifting-condition-page { max-width: 920px; margin: 0 auto; }
.gifting-condition-kicker { margin: 0 0 4px; color: #6366f1; font-size: 12px; font-weight: 700; }
.gifting-condition-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.gifting-condition-grid label { display: grid; gap: 5px; color: #475569; font-size: 12px; }
.gifting-condition-post-dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; grid-column: 1 / -1; }
.gifting-condition-grid input, .gifting-condition-grid select { width: 100%; box-sizing: border-box; padding: 9px 10px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; }
.gifting-condition-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.gifting-condition-preview { margin-top: 16px; padding: 14px; border: 1px solid #c7d2fe; border-radius: 10px; background: #f8faff; }
.gifting-condition-preview pre { white-space: pre-wrap; font: inherit; line-height: 1.7; }
.gifting-condition-error { padding: 10px 12px; margin-top: 12px; border-radius: 8px; background: #fff1f2; color: #be123c; }
@media (max-width: 640px) {
  .gifting-condition-grid, .gifting-condition-post-dates { grid-template-columns: 1fr; }
}

.gifting-route-status {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

.gifting-route-status-active {
  background: var(--color-success-bg);
  color: var(--color-success-text);
}

.gifting-route-modal { max-width: 32rem; }
.gifting-route-modal-header,
.gifting-route-modal-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}
.gifting-route-modal-header h3,
.gifting-route-modal-header p { margin: 0; }
.gifting-route-modal-header p,
.gifting-route-help { color: var(--text-tertiary); font-size: var(--font-size-sm); }
.gifting-route-modal-close {
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: var(--font-size-xl);
}
.gifting-route-options {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-4) 0;
  padding: 0;
  border: 0;
}
.gifting-route-options legend { margin-bottom: var(--space-2); font-weight: var(--font-weight-bold); }
.gifting-route-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.gifting-route-option:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-bg); }
.gifting-route-option strong,
.gifting-route-option small { display: block; }
.gifting-route-option small { color: var(--text-tertiary); }
.gifting-route-form-error { color: var(--color-danger-text); font-size: var(--font-size-sm); }
.gifting-route-modal-actions { justify-content: flex-end; margin-top: var(--space-4); }

/* Staff holidays / gifting journey v2 */
.staff-holidays-page,
.gifting-journey-page {
  padding: var(--space-4);
  display: grid;
  gap: var(--space-3);
  color: var(--text-primary);
}

.staff-holidays-header,
.gifting-journey-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.staff-holidays-header h2,
.staff-holidays-card h3,
.gifting-journey-card h3 { margin: 0 0 var(--space-1); }
.staff-holidays-header p,
.gifting-journey-card p { margin: 0; color: var(--text-secondary); }

.staff-holidays-card,
.gifting-journey-card {
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}

.staff-holiday-form,
.gifting-journey-role-grid,
.working-hours-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.staff-holiday-form label,
.staff-holidays-header label,
.gifting-journey-role-grid label,
.gifting-journey-actions label,
.gifting-modal label {
  display: grid;
  gap: 4px;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.staff-holiday-form input:not([type="checkbox"]),
.staff-holidays-header select,
.gifting-journey-role-grid input,
.gifting-journey-actions select,
.gifting-modal input,
.gifting-modal select,
.gifting-modal textarea,
.working-hour-row input[type="time"] {
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-primary);
}

.working-hours-grid { grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); margin-bottom: var(--space-2); }
.staff-holiday-form .staff-holiday-all-day { display: flex; align-items: center; gap: 6px; }
.working-hour-row { display: grid; grid-template-columns: auto auto minmax(84px, 1fr) auto minmax(84px, 1fr); align-items: center; gap: 6px; }
.staff-holidays-loading,
.staff-holidays-error,
.gifting-journey-empty { padding: var(--space-6); text-align: center; color: var(--text-secondary); }
.staff-holidays-error { color: var(--color-danger); }
.staff-holiday-status { display: inline-flex; padding: 2px 8px; border-radius: 999px; background: var(--bg-subtle); }
.staff-holiday-status.status-active { color: var(--color-success); background: var(--color-success-subtle); }
.staff-holiday-status.status-pending_confirmation { color: var(--color-warning); background: var(--color-warning-subtle); }

.gifting-journey-banner {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-md);
  background: var(--color-warning-subtle);
  color: var(--text-primary);
}
.gifting-journey-actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.gifting-journey-page .table-wrap,
.staff-holidays-page .table-wrap { overflow-x: auto; margin-top: var(--space-2); }
.gifting-journey-page .data-table,
.staff-holidays-page .data-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.gifting-journey-page .data-table th,
.gifting-journey-page .data-table td,
.staff-holidays-page .data-table th,
.staff-holidays-page .data-table td { padding: 8px; border-bottom: 1px solid var(--border-default); text-align: left; vertical-align: top; }
.gifting-journey-page .data-table th,
.staff-holidays-page .data-table th { background: var(--bg-subtle); color: var(--text-secondary); }
.gifting-journey-modal .gifting-modal { max-width: 560px; display: grid; gap: var(--space-2); }
.gifting-journey-modal .modal-actions { display: flex; justify-content: flex-end; gap: var(--space-2); }

@media (max-width: 720px) {
  .staff-holidays-header,
  .gifting-journey-card-head { align-items: stretch; }
  .gifting-journey-actions { flex-direction: column; align-items: stretch; }
}

/* Staff holidays UX v2 */
.staff-holidays-page {
  width: min(100%, 980px);
  margin: 0 auto;
  padding: var(--space-6) var(--space-4) var(--space-8);
  gap: var(--space-4);
}

.staff-holidays-header {
  align-items: end;
}

.staff-holidays-header h2 {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-tight);
}

.staff-holidays-header p {
  max-width: 620px;
}

.staff-holiday-eyebrow {
  margin: 0 0 var(--space-1);
  color: var(--color-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.staff-holiday-staff-picker {
  min-width: 220px;
}

.staff-holiday-staff-picker span {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.staff-holiday-staff-picker .select {
  min-height: 44px;
}

.staff-holiday-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: 154px;
  padding: var(--space-5);
  overflow: hidden;
  border: 1px solid var(--color-info-border);
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--color-info-bg), var(--color-primary-bg));
  box-shadow: var(--shadow-md);
}

.staff-holiday-hero h3 {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-xl);
  color: var(--text-primary);
}

.staff-holiday-hero p:not(.staff-holiday-eyebrow) {
  margin: 0;
  color: var(--text-secondary);
}

.staff-holiday-primary-action {
  flex: 0 0 auto;
  min-height: 48px;
  padding-inline: var(--space-5);
  font-size: var(--font-size-base);
  box-shadow: var(--shadow-md);
}

.staff-holiday-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-2);
}

.staff-holiday-section-head h3,
.staff-holiday-item h4,
.staff-holiday-empty h4,
.staff-holiday-confirm-dialog h3 {
  margin: 0;
}

.staff-holiday-section-head > span {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.staff-holiday-list {
  display: grid;
  gap: var(--space-2);
}

.staff-holiday-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.staff-holiday-item:hover {
  border-color: var(--border-focus);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.staff-holiday-item.is-next {
  border-color: var(--color-info-border);
  background: var(--color-info-bg);
}

.staff-holiday-item-main {
  min-width: 0;
}

.staff-holiday-item-label {
  display: flex;
  gap: var(--space-1);
  margin-bottom: var(--space-1);
}

.staff-holiday-item .badge-neutral {
  background: var(--bg-muted);
  color: var(--text-tertiary);
}

.staff-holiday-item h4 {
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
}

.staff-holiday-item p {
  margin: var(--space-1) 0 0;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

.staff-holiday-item .staff-holiday-note-empty,
.staff-holiday-muted {
  color: var(--text-tertiary);
}

.staff-holiday-item-actions,
.staff-holiday-inline-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
}

.staff-holiday-item-actions .btn {
  min-height: 44px;
}

.staff-holiday-empty {
  display: grid;
  justify-items: center;
  gap: var(--space-1);
  padding: var(--space-8) var(--space-4);
  text-align: center;
  color: var(--text-secondary);
}

.staff-holiday-empty > span {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--space-1);
  border-radius: var(--radius-full);
  background: var(--color-warning-subtle);
  font-size: var(--font-size-xl);
}

.staff-holiday-empty p,
.staff-holiday-details-body > p,
.staff-holiday-confirm-dialog p {
  margin: 0;
}

.staff-holiday-details {
  padding: 0;
  overflow: clip;
}

.staff-holiday-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  list-style: none;
}

.staff-holiday-details > summary::-webkit-details-marker {
  display: none;
}

.staff-holiday-details > summary:hover {
  background: var(--bg-subtle);
}

.staff-holiday-details > summary:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: -2px;
}

.staff-holiday-details > summary > span:first-child {
  display: grid;
  gap: 2px;
}

.staff-holiday-details > summary small {
  color: var(--text-tertiary);
  font-weight: var(--font-weight-normal);
}

.staff-holiday-details > summary > span:last-child {
  color: var(--text-tertiary);
  font-size: var(--font-size-xl);
  transform: rotate(90deg);
  transition: transform var(--transition-fast);
}

.staff-holiday-details[open] > summary > span:last-child {
  transform: rotate(-90deg);
}

.staff-holiday-details-body {
  display: grid;
  gap: var(--space-3);
  padding: 0 var(--space-4) var(--space-4);
  border-top: 1px solid var(--border-default);
}

.staff-holiday-details-body > p {
  padding-top: var(--space-3);
  color: var(--text-secondary);
}

.staff-holiday-history {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.staff-holiday-history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-default);
}

.staff-holiday-history-item:last-child {
  border-bottom: 0;
}

.staff-holiday-history-item > div {
  display: grid;
  gap: 2px;
}

.staff-holiday-history-item > div span {
  color: var(--text-tertiary);
}

.staff-holiday-feedback {
  position: sticky;
  top: var(--space-2);
  z-index: var(--z-sticky);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  box-shadow: var(--shadow-md);
}

.staff-holiday-feedback.is-success {
  border-color: var(--color-success);
  background: var(--color-success-bg);
  color: var(--color-success-text);
}

.staff-holiday-feedback.is-error {
  border-color: var(--color-danger);
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
}

.staff-holidays-error {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  padding: var(--space-8);
  border: 1px solid var(--color-danger-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-danger-bg);
}

.staff-holidays-error p {
  margin: 0;
}

.staff-holiday-skeleton {
  border-radius: var(--radius-lg);
  background: linear-gradient(90deg, var(--bg-subtle), var(--bg-muted), var(--bg-subtle));
  background-size: 200% 100%;
  animation: staff-holiday-shimmer 1.2s ease-in-out infinite;
}

.staff-holiday-skeleton-title { width: 46%; height: 58px; }
.staff-holiday-skeleton-hero { height: 154px; }
.staff-holiday-skeleton-card { height: 210px; }

@keyframes staff-holiday-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

.staff-holiday-modal-open {
  overflow: hidden;
}

.staff-holiday-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--space-4);
  background: rgba(17, 24, 39, 0.55);
  backdrop-filter: blur(3px);
}

.staff-holiday-dialog-backdrop[hidden] {
  display: none;
}

.staff-holiday-dialog {
  display: flex;
  flex-direction: column;
  width: min(100%, 600px);
  max-height: min(88vh, 760px);
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
  box-shadow: var(--shadow-xl);
}

.staff-holiday-dialog:focus {
  outline: none;
}

.staff-holiday-dialog-header,
.staff-holiday-dialog-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}

.staff-holiday-dialog-header {
  border-bottom: 1px solid var(--border-default);
}

.staff-holiday-dialog-header h3 {
  margin: 0;
  font-size: var(--font-size-xl);
}

.staff-holiday-dialog-footer {
  justify-content: flex-end;
  border-top: 1px solid var(--border-default);
  background: var(--bg-subtle);
}

.staff-holiday-dialog-footer .btn,
.staff-holiday-icon-button {
  min-height: 44px;
}

.staff-holiday-icon-button {
  min-width: 44px;
  padding: 0;
  font-size: var(--font-size-xl);
}

.staff-holiday-dialog-body {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
  overflow-y: auto;
}

.staff-holiday-field {
  display: grid;
  gap: var(--space-1);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.staff-holiday-field > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.staff-holiday-field b {
  color: var(--color-danger-text);
  font-size: var(--font-size-xs);
}

.staff-holiday-field small {
  color: var(--text-tertiary);
  font-weight: var(--font-weight-normal);
}

.staff-holiday-field .input,
.staff-holiday-field .textarea {
  min-height: 44px;
}

.staff-holiday-period {
  margin: 0;
  padding: 0;
  border: 0;
}

.staff-holiday-period legend {
  margin-bottom: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.staff-holiday-period-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
}

.staff-holiday-period-option {
  display: grid;
  gap: 2px;
  min-height: 66px;
  padding: var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}

.staff-holiday-period-option:hover {
  border-color: var(--color-primary-light);
  background: var(--color-primary-bg);
}

.staff-holiday-period-option:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.staff-holiday-period-option.is-selected {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
  box-shadow: inset 0 0 0 1px var(--color-primary);
}

.staff-holiday-period-option span {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}

.staff-holiday-custom-time {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.staff-holiday-custom-time[hidden],
.staff-holiday-field[hidden] {
  display: none;
}

.staff-holiday-range-summary {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-info-border);
  border-radius: var(--radius-md);
  background: var(--color-info-bg);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.staff-holiday-range-summary.is-error,
.staff-holiday-dialog-error {
  border-color: var(--color-danger-subtle);
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
}

.staff-holiday-dialog-error {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-danger-subtle);
  border-radius: var(--radius-md);
}

.staff-holiday-confirm-dialog {
  width: min(100%, 430px);
}

.staff-holiday-confirm-dialog .staff-holiday-dialog-body {
  justify-items: center;
  padding-top: var(--space-6);
  text-align: center;
}

.staff-holiday-confirm-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-full);
  background: var(--color-warning-subtle);
  color: var(--color-warning-text);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
}

.working-hours-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin: 0;
}

.working-hour-row {
  min-height: 48px;
  padding: var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}

.working-hour-row > input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

.working-hour-row .input {
  min-height: 40px;
}

.staff-holiday-inline-status {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.staff-holiday-inline-status.is-success { color: var(--color-success-text); }
.staff-holiday-inline-status.is-error { color: var(--color-danger-text); }

@media (max-width: 720px) {
  .staff-holidays-page {
    padding: var(--space-4) var(--space-3) calc(var(--space-8) + env(safe-area-inset-bottom));
  }

  .staff-holidays-header,
  .staff-holiday-hero,
  .staff-holiday-item {
    align-items: stretch;
    flex-direction: column;
  }

  .staff-holiday-staff-picker {
    min-width: 0;
  }

  .staff-holiday-primary-action,
  .staff-holiday-item-actions,
  .staff-holiday-item-actions .btn {
    width: 100%;
  }

  .staff-holiday-item-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .staff-holiday-period-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .working-hour-row {
    grid-template-columns: auto 1fr;
  }

  .working-hour-row .input,
  .working-hour-row > span:last-of-type {
    grid-column: 2;
  }

  .staff-holiday-inline-actions {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 520px) {
  .staff-holiday-dialog-backdrop {
    align-items: end;
    padding: 0;
  }

  .staff-holiday-dialog {
    width: 100%;
    max-height: 94vh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }

  .staff-holiday-dialog-footer {
    position: sticky;
    bottom: 0;
    padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
  }

  .staff-holiday-dialog-footer .btn {
    flex: 1;
  }

  .staff-holiday-custom-time {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .staff-holiday-skeleton,
  .staff-holiday-item,
  .staff-holiday-details > summary > span:last-child {
    animation: none;
    transition: none;
  }
}

/* LINE配信作成: 複数メッセージ（kill switch ON時のみDOMへ描画） */
.lc-msg-track-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.lc-msg-list {
  display: grid;
  gap: var(--space-4);
}

.lc-msg-card {
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}

.lc-msg-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-muted);
}

.lc-msg-card-head > div,
.lc-msg-actions,
.lc-msg-add-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.lc-msg-card-head small {
  color: var(--text-tertiary);
}

.lc-msg-number {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--text-inverse);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}

.lc-msg-remove {
  color: var(--color-danger-text);
}

.lc-msg-types {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
}

.lc-msg-types button {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.lc-msg-types button.selected {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
  color: var(--color-primary);
}

.lc-msg-text-editor,
.lc-msg-material {
  margin: 0 var(--space-4) var(--space-4);
}

.lc-msg-text-editor .lc-lseg-textarea {
  min-height: 130px;
}

.lc-msg-material.is-missing {
  border-color: var(--color-danger);
  background: var(--color-danger-bg);
}

.lc-msg-error {
  grid-column: 1 / -1;
  color: var(--color-danger-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.lc-msg-add-row {
  justify-content: space-between;
  margin-top: var(--space-4);
}

.lc-msg-add-row span,
.lc-msg-test-note {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.lc-msg-blocked {
  display: grid;
  gap: var(--space-1);
}

.lc-msg-preview-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--space-3);
}

.lc-msg-preview-row .lc-wizard-avatar:empty {
  visibility: hidden;
}

.lc-msg-test-note {
  margin-top: var(--space-2);
  color: var(--color-warning-text);
}

@media (max-width: 900px) {
  .lc-msg-card-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .lc-msg-types {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lc-msg-actions {
    align-self: stretch;
    justify-content: flex-end;
  }
}

/* === LINE Journey: presence version / stopped users === */
.ljy-ava-wrap {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  line-height: 0;
}

.ljy-ava-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  z-index: 2;
  min-width: 18px;
  padding: 1px 3px;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-full);
  background: var(--bg-subtle);
  color: var(--text-secondary);
  font-size: 8px;
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}

.ljy-ava-badge.is-current {
  border-color: var(--border-medium);
  background: var(--bg-subtle);
  color: var(--text-secondary);
}

.ljy-ava-badge.is-old {
  border-color: var(--color-warning);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}

.ljy-ava-badge.is-ahead {
  border-color: var(--color-info-border);
  background: var(--color-info-bg);
  color: var(--color-info);
}

.ljy-ava.stopped {
  border-color: var(--border-medium) !important;
  opacity: 0.55;
  filter: grayscale(1);
}

.ljy-ava.holding,
.ljy-facepile .ljy-ava.holding {
  border: 2px solid var(--color-primary);
}

.ljy-ava-badge.is-current.state-holding {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
  color: var(--color-primary-hover);
}

.ljy-ava.processing,
.ljy-facepile .ljy-ava.processing {
  border: 2px solid var(--color-info-border);
  outline: 2px solid var(--color-info-bg);
  opacity: 0.82;
}

.ljy-ava.processing.phase-deferred,
.ljy-facepile .ljy-ava.processing.phase-deferred {
  border-color: var(--color-warning);
  outline-color: var(--color-warning-bg);
}

.ljy-ava.other-stopped,
.ljy-facepile .ljy-ava.other-stopped {
  border: 2px solid var(--text-tertiary);
  opacity: 0.72;
  filter: grayscale(1) contrast(0.85);
}

.ljy-ava-badge.is-current.state-processing {
  border-color: var(--color-info-border);
  background: var(--color-info-bg);
  color: var(--color-info);
}

.ljy-ava-badge.is-current.state-processing.phase-deferred {
  border-color: var(--color-warning);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}

.ljy-ava-badge.is-current.state-other-stopped {
  border-color: var(--text-tertiary);
  background: var(--bg-active);
  color: var(--text-secondary);
}

.ljy-ava.done,
.ljy-facepile .ljy-ava.done {
  border: 2px solid var(--border-medium);
  opacity: 0.82;
  filter: grayscale(1);
}

.ljy-ava.neutral,
.ljy-facepile .ljy-ava.neutral {
  border: 2px solid var(--border-medium);
}

.ljy-ava-badge.is-current.state-done,
.ljy-ava-badge.is-current.state-neutral {
  border-color: var(--border-medium);
  background: var(--bg-subtle);
  color: var(--text-secondary);
}

.ljy-ava-done-mark {
  position: absolute;
  right: -3px;
  bottom: -3px;
  z-index: 3;
  display: grid;
  width: 14px;
  height: 14px;
  place-items: center;
  border: 2px solid var(--bg-surface);
  border-radius: var(--radius-full);
  background: var(--text-tertiary);
  color: var(--text-inverse);
  font-size: 8px;
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.ljy-root.presence .ljy-node.holdable.processingable {
  border-color: var(--color-info);
  outline: 3px solid var(--color-info-subtle);
  box-shadow: var(--shadow-lg);
}

.ljy-root.presence .ljy-node.stuckable.other-stoppedable {
  border-color: var(--text-tertiary);
  outline: 3px solid var(--bg-active);
  box-shadow: var(--shadow-lg);
}

.ljy-root.presence .ljy-node.completedable {
  border-color: var(--text-tertiary);
  outline: 3px solid var(--bg-active);
  box-shadow: var(--shadow-lg);
}

.ljy-node.k-end .ljy-facepile {
  padding-right: var(--space-3);
  padding-left: var(--space-3);
}

.ljy-node.k-end .ljy-fphint {
  display: none;
}

.ljy-pass.ljy-completed-chip {
  color: var(--text-secondary);
  background: var(--bg-active);
}

.ljy-stuck-pill {
  position: absolute;
  top: -13px;
  right: -13px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 3px 10px;
  border: 2px solid var(--border-medium);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  color: var(--text-tertiary);
  box-shadow: var(--shadow-lg);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ljy-stuck-pill.with-hold {
  top: 18px;
}

.ljy-stopped-section {
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-light);
}

.ljy-processing-section,
.ljy-other-stopped-section {
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-light);
}

.ljy-urow.processing {
  padding-right: var(--space-1);
  padding-left: var(--space-1);
  border-radius: var(--radius-lg);
  background: var(--color-info-bg);
}

.ljy-urow.processing.phase-deferred {
  background: var(--color-warning-bg);
}

.ljy-urow .uwait.processing {
  background: var(--color-info-subtle);
  color: var(--color-info);
}

.ljy-urow .uwait.processing.phase-deferred {
  background: var(--color-warning-subtle);
  color: var(--color-warning-text);
}

.ljy-urow.other-stopped {
  padding-right: var(--space-1);
  padding-left: var(--space-1);
  border-radius: var(--radius-lg);
  background: var(--bg-subtle);
  color: var(--text-secondary);
}

.ljy-urow .uwait.other-stopped {
  background: var(--bg-active);
  color: var(--text-secondary);
}

.ljy-urow.stopped {
  background: var(--bg-muted);
}

.ljy-urow .uwait.stopped {
  background: var(--bg-subtle);
  color: var(--text-tertiary);
}

.ljy-urow.done {
  padding-right: var(--space-1);
  padding-left: var(--space-1);
  border-radius: var(--radius-lg);
  background: var(--bg-muted);
}

.ljy-urow .uwait.done {
  background: var(--bg-active);
  color: var(--text-secondary);
}

.ljy-urow .uwait.entered {
  background: var(--color-info-bg);
  color: var(--color-info);
}

.ljy-urow .uwait.entered.status-completed {
  background: var(--bg-active);
  color: var(--text-secondary);
}

.ljy-urow .uwait.entered.status-stopped {
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}

.ljy-btn.ljy-btn-sm {
  flex: 0 0 auto;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  line-height: 1.2;
  white-space: nowrap;
}

.ljy-stopped-text {
  color: var(--text-tertiary);
}

.ljy-sum-unit {
  font-size: var(--font-size-xs);
}

.ljy-warning-text {
  color: var(--color-warning-text);
}

.ljy-presence-empty {
  padding: var(--space-3) var(--space-2);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
  text-align: center;
}

.ljy-unresolved-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-xl);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-align: left;
}

.ljy-unresolved-row b {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.ljy-unresolved-row:hover {
  background: var(--color-warning-subtle);
}

.ljy-unresolved-row.ljy-unresolved-other {
  border-color: var(--border-medium);
  background: var(--bg-subtle);
  color: var(--text-secondary);
}

.ljy-unresolved-row.ljy-unresolved-other:hover {
  background: var(--bg-active);
}

.ljy-presence-note {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}

.ljy-refresh-btn {
  flex: 0 0 auto;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-normal);
  transition: background var(--transition-normal), border-color var(--transition-normal), color var(--transition-normal);
}

.ljy-refresh-btn:hover:not(:disabled) {
  border-color: var(--border-medium);
  background: var(--bg-hover);
  color: var(--text-primary);
}

.ljy-refresh-btn:focus-visible,
.ljy-presence-sumstat > button:focus-visible,
.ljy-presence-back:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.ljy-refresh-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.ljy-presence-sumstat > button {
  flex: 1;
  min-width: 0;
  padding: 9px var(--space-1);
  border: 0;
  background: var(--bg-surface);
  color: var(--text-primary);
  text-align: center;
  transition: background var(--transition-normal);
}

.ljy-presence-sumstat > button + button {
  border-left: 1px solid var(--border-light);
}

.ljy-presence-sumstat > button:hover {
  background: var(--bg-hover);
}

.ljy-presence-sumstat > button .k,
.ljy-presence-sumstat > button .v {
  display: block;
}

.ljy-live-text { color: var(--color-primary); }
.ljy-completed-text { color: var(--color-success-dark); }

.ljy-presence-list-view {
  gap: var(--space-3);
}

.ljy-presence-back {
  align-self: flex-start;
  padding: var(--space-1) 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

.ljy-presence-back:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

.ljy-presence-list-section {
  overflow: hidden;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
}

.ljy-presence-list-section .ljy-urow,
.ljy-presence-list-section .ljy-more,
.ljy-presence-list-section .ljy-presence-empty {
  margin-right: var(--space-2);
  margin-left: var(--space-2);
}

.ljy-presence-section-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-muted);
}

.ljy-presence-section-head h4 {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ljy-presence-section-head span {
  flex: 0 0 auto;
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
}

.ljy-presence-list-section.completed .ljy-presence-section-head {
  background: var(--bg-subtle);
}

.ljy-presence-list-section.unresolved-completed {
  border-color: var(--border-medium);
}

.ljy-presence-unlocated {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-warning-subtle);
  border-radius: var(--radius-xl);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-align: center;
}

.ljy-unresolved-row.ljy-unresolved-completed-row {
  border-color: var(--border-medium);
  background: var(--bg-muted);
  color: var(--text-secondary);
}

.ljy-unresolved-row.ljy-unresolved-completed-row:hover {
  background: var(--bg-active);
}

.account-form-card {
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  padding: 12px;
  background: #eff6ff;
  margin-bottom: 12px;
}
.account-form-card h4 { font-size: 13px; margin: 0 0 10px; color: #1e40af; }
.account-form-row { display: flex; gap: 8px; margin-bottom: 8px; }
.account-form-row input, .account-form-row select {
  flex: 1;
  padding: 7px 8px;
  font-size: 12px;
  border: 1px solid #d1d5db;
  border-radius: 5px;
  background: #fff;
  color: #374151;
  min-width: 0;
}
.account-form-row input:focus, .account-form-row select:focus {
  outline: none;
  border-color: #2563eb;
}
.account-form-label {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-1);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
}
.account-form-help {
  margin: 0 0 var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
}
.account-email-device-warning {
  color: var(--color-warning-text);
}
.account-kind-warning {
  padding: var(--space-2);
  border: 1px solid var(--color-warning-subtle);
  border-radius: var(--radius-md);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}
.perm-matrix { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 8px; }
.perm-matrix label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: #374151;
  cursor: pointer;
}
.account-form-actions { display: flex; gap: 8px; }
.account-save-btn {
  flex: 1;
  padding: 7px;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.account-save-btn:hover { background: #1d4ed8; }
.account-cancel-btn {
  padding: 7px 14px;
  border: 1px solid #d1d5db;
  background: #fff;
  border-radius: 5px;
  font-size: 12px;
  cursor: pointer;
  color: #374151;
}
.account-cancel-btn:hover { background: #f3f4f6; }
.account-form-status { font-size: 11px; margin-top: 4px; min-height: 14px; }

/* アカウント作成モーダル */
.account-modal-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.4);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
.account-modal-overlay.visible { display: flex; }
.account-modal {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  width: 480px;
  max-width: 95vw;
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px;
}
.account-modal h3 {
  font-size: 16px;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid #2563eb;
}
.account-modal .account-form-row { margin-bottom: 10px; }
.account-modal .account-form-actions { margin-top: 16px; }

/* ネスト型権限マトリクス */
.perm-tree { margin-bottom: 8px; }
.perm-tree-item { margin-bottom: 2px; }
.perm-tree-parent {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: #1f2937;
  cursor: pointer;
  padding: 4px 0;
}
.perm-tree-parent input[type="checkbox"] { cursor: pointer; }
.perm-tree-children {
  margin-left: 22px;
  padding-left: 8px;
  border-left: 2px solid #e5e7eb;
}
.perm-tree-child {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: #4b5563;
  cursor: pointer;
  padding: 2px 0;
}
.perm-tree-child input[type="checkbox"] { cursor: pointer; }

/* 新規作成ボタン */
.account-create-trigger {
  padding: 6px 14px;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.account-create-trigger:hover { background: #1d4ed8; }

/* 需要予測テーブル */
.forecast-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 11px;
  white-space: nowrap;
}
.forecast-table th, .forecast-table td {
  padding: 4px 6px;
  border: 1px solid #e5e7eb;
  text-align: right;
}
/* 固定コントロールバー */
.forecast-control-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 10px;
  background: #334155;
  min-height: 36px;
  box-sizing: border-box;
}
.forecast-bar-input {
  width: 180px;
  padding: 4px 8px;
  border: 1px solid #475569;
  border-radius: 4px;
  font-size: 12px;
  background: #334155;
  color: #f1f5f9;
}
.forecast-bar-input::placeholder { color: #94a3b8; }
.forecast-bar-btn {
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 500;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.4;
}
.forecast-bar-btn-primary { background: #3b82f6; color: #fff; }
.forecast-bar-btn-green { background: #059669; color: #fff; }
.forecast-bar-btn-amber { background: #f59e0b; color: #fff; }
.forecast-bar-btn-purple { background: #7c3aed; color: #fff; }
.forecast-bar-btn-light { background: #475569; color: #e2e8f0; }
.forecast-bar-btn:disabled { opacity: 0.5; cursor: default; }
.forecast-bar-select {
  padding: 3px 4px;
  border: 1px solid #475569;
  border-radius: 3px;
  font-size: 11px;
  background: #334155;
  color: #f1f5f9;
}
.forecast-bar-bulk-group {
  display: flex; align-items: center; gap: 4px; font-size: 11px; color: #94a3b8;
}
.forecast-bar-input-sm {
  width: 55px; padding: 3px 4px; font-size: 11px; text-align: center;
  background: #1e293b; color: #e2e8f0; border: 1px solid #475569; border-radius: 4px;
}
.forecast-bar-input-sm:focus { border-color: #60a5fa; outline: none; }
.forecast-bar-bulk-lt { color: #94a3b8; margin-left: 2px; }
.forecast-bar-check {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: #cbd5e1;
  cursor: pointer;
  white-space: nowrap;
}
.forecast-bar-sep {
  width: 1px;
  height: 20px;
  background: #475569;
  margin: 0 2px;
}
.forecast-row-updating { opacity: 0.35; pointer-events: none; transition: opacity 0.2s; }

.forecast-table th {
  background: #f3f4f6;
  font-weight: 600;
  color: #374151;
  position: sticky;
  top: 64px;
  z-index: 8;
}
.forecast-table th:first-child,
.forecast-table td:first-child {
  width: 24px;
  padding: 2px 4px;
  text-align: center;
  position: sticky;
  left: 0;
  background: #fff;
  z-index: 2;
}
.forecast-table th:first-child {
  background: #f3f4f6;
  z-index: 9;
}
.forecast-table td:nth-child(2),
.forecast-table th:nth-child(2) {
  text-align: left;
  position: sticky;
  left: 34px;
  background: #fff;
  z-index: 1;
}
.forecast-table th:nth-child(2) {
  background: #f3f4f6;
  z-index: 9;
}
#skuSettingsTable {
  table-layout: fixed;
}
#skuSettingsTable td:nth-child(1),
#skuSettingsTable th:nth-child(1),
#skuSettingsTable td:nth-child(2),
#skuSettingsTable th:nth-child(2) {
  position: static;
  left: auto;
  z-index: auto;
}
#setSkuSettingsTable th {
  position: sticky;
  top: 0;
  z-index: 6;
  background: #f3f4f6;
}
#setSkuSettingsTable th:first-child,
#setSkuSettingsTable th:nth-child(2) {
  position: sticky;
  top: 0;
  left: auto;
  z-index: 6;
  background: #f3f4f6;
}
#setSkuSettingsTable td:first-child,
#setSkuSettingsTable td:nth-child(2) {
  position: static;
  left: auto;
  z-index: auto;
  background: inherit;
}
.delivery-history-row:hover, .delivery-list-row:hover { background: #f0f9ff; }
.forecast-table tbody tr:hover { background: #f9fafb; }
.forecast-table tbody tr:hover td:first-child,
.forecast-table tbody tr:hover td:nth-child(2) { background: #f9fafb; }
.forecast-order-moq-boosted { background: #fffbeb !important; color: #b45309; font-weight: 600; }
.forecast-order-zero { color: #9ca3af; }
.forecast-stockout { color: #dc2626; font-size: 10px; }
.forecast-block-cell { cursor: pointer; }
.forecast-order-moq-excluded { background: #f9fafb !important; color: #9ca3af; }
.moq-forced-qty { font-size: 10px; color: #6b7280; margin-left: 1px; }
.moq-toggle { font-size: 10px; color: #6b7280; cursor: pointer; white-space: nowrap; margin-left: 4px; }
.moq-toggle input { vertical-align: middle; margin: 0 2px 0 0; cursor: pointer; }
/* 在庫持続バーチャート */
.forecast-duration-cell { text-align: left !important; padding: 2px 4px !important; }
.duration-chart {
  position: relative; height: 20px; width: 300px; min-width: 300px;
  background: #fafafa; border: 1px solid #e5e7eb; border-radius: 2px;
  overflow: hidden;
}
.duration-bar {
  position: absolute; top: 0; left: 0; height: 100%; border-radius: 1px;
  min-width: 0;
}
.duration-bar-stock { background: #3b82f6; z-index: 3; height: 6px; top: 1px; }
.duration-bar-pending { background: #93c5fd; z-index: 2; height: 6px; top: 7px; }
.duration-bar-order { background: #dbeafe; z-index: 1; height: 6px; top: 13px; }
.duration-scale-line {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: #d1d5db; z-index: 4; pointer-events: none;
}
.duration-scale-label {
  position: absolute; top: -1px; font-size: 7px; color: #9ca3af;
  transform: translateX(-50%); z-index: 5; pointer-events: none;
  line-height: 1;
}
.duration-lt-marker {
  position: absolute; bottom: 0; z-index: 6;
  color: #dc2626; font-size: 8px; line-height: 1;
  transform: translateX(-50%);
  pointer-events: auto; cursor: default;
}
/* 列選択ドロップダウン */
.forecast-col-dropdown {
  z-index: 10000;
  background: #fff; border: 1px solid #d1d5db; border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,.12); padding: 8px 0;
  min-width: 160px; font-size: 12px; display: none;
}
.forecast-col-dropdown.open { display: block; }
.forecast-col-dropdown label {
  display: flex; align-items: center; gap: 6px; padding: 4px 12px; cursor: pointer;
  white-space: nowrap;
}
.forecast-col-dropdown label:hover { background: #f3f4f6; }
.forecast-col-dropdown label.required { color: #9ca3af; cursor: default; }
.forecast-col-dropdown input { margin: 0; cursor: pointer; }

.forecast-col-dropdown input:disabled { cursor: default; }

/* 欠品履歴列（過去6回のバッジ） */
.forecast-so-hist { display: inline-flex; gap: 3px; align-items: center; }
.forecast-so-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 19px; height: 19px; border-radius: var(--radius-sm);
  font-size: var(--font-size-xs); font-weight: var(--font-weight-bold);
  color: var(--text-inverse); line-height: 1; flex-shrink: 0;
}
.forecast-so-badge.out { background: var(--color-danger-text); }   /* 欠品 = 赤 #dc2626 */
.forecast-so-badge.in { background: var(--color-success-dark); }   /* 在庫有 = 濃い緑 #059669 */
.forecast-so-badge.pending { background: var(--bg-active); color: var(--text-tertiary); } /* 未請求 = グレー塗り */
.forecast-so-badge.none {
  background: var(--bg-subtle); color: var(--text-muted);
  border: 1px dashed var(--border-default);
}
.forecast-so-empty { color: var(--text-muted); }

/* 需要予測アクションバー */
.forecast-action-bar {
  position: fixed; bottom: 0; left: 180px; right: 0;
  background: #1e293b; color: #e2e8f0;
  z-index: 9999; box-shadow: 0 -2px 12px rgba(0,0,0,0.25);
}
.fab-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 10px 20px;
  display: flex; align-items: center; gap: 16px;
  font-size: 12px;
}
.fab-count { font-weight: 700; color: #60a5fa; white-space: nowrap; }
.fab-divider { width: 1px; height: 20px; background: #475569; }
.fab-group { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.fab-group label { color: #94a3b8; font-weight: 500; }
.fab-group input[type="number"] {
  width: 52px; text-align: center; background: #334155; color: #f1f5f9;
  border: 1px solid #475569; border-radius: 4px; padding: 3px 4px; font-size: 12px;
}
.fab-group input[type="number"]:focus { border-color: #60a5fa; outline: none; }
.fab-btn-primary {
  background: #2563eb; color: #fff; border: none; border-radius: 4px;
  padding: 4px 12px; font-size: 11px; font-weight: 600; cursor: pointer;
}
.fab-btn-primary:hover { background: #1d4ed8; }
.fab-btn-ghost {
  background: transparent; color: #94a3b8; border: 1px solid #475569;
  border-radius: 4px; padding: 4px 10px; font-size: 11px; cursor: pointer;
}
.fab-btn-ghost:hover { color: #e2e8f0; border-color: #64748b; }
.forecast-sku-check, .forecast-select-all {
  cursor: pointer; margin: 0;
}

.forecast-outlier-badge {
  font-size: 9px; color: #d97706; margin-left: 2px;
  vertical-align: super; line-height: 1;
}
#forecastTooltip {
  display: none; position: fixed; z-index: 9999;
  background: #fff; border: 1px solid #d1d5db; border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,.15); padding: 6px 8px;
  min-width: 260px; max-width: 360px; white-space: nowrap;
  max-height: 50vh; overflow-y: auto;
}
.forecast-tooltip-table table {
  width: 100%; border-collapse: collapse; font-size: 11px;
}
.forecast-tooltip-table th {
  background: #f3f4f6; padding: 3px 6px; text-align: left;
  font-weight: 600; border-bottom: 1px solid #e5e7eb;
  position: static;
}
.forecast-tooltip-table td {
  padding: 3px 6px; border-bottom: 1px solid #f3f4f6;
}
.forecast-tooltip-table a {
  color: #2563eb; text-decoration: none;
}
.forecast-tooltip-table a:hover { text-decoration: underline; }
.forecast-outlier-row { background: #fffbeb; }
.forecast-outlier-qty { color: #d97706; font-weight: 600; }
.forecast-product-header {
  margin: 0;
  padding: 6px 8px;
  background: #eef2ff;
  border-radius: 0;
  font-size: 12px;
  font-weight: 600;
  color: #3730a3;
  line-height: 16px;
  box-sizing: border-box;
  height: 28px;
  display: flex; align-items: center; gap: 8px;
  position: sticky; top: 36px; z-index: 10;
}
.forecast-product-toggle { display: flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 400; color: #6b7280; cursor: pointer; white-space: nowrap; }
.demand-basis-group { display: inline-flex; border: 1px solid #d1d5db; border-radius: 4px; overflow: hidden; margin-left: 8px; }
.demand-basis-btn { padding: 1px 8px; font-size: 10px; font-weight: 500; border: none; cursor: pointer; background: #fff; color: #6b7280; transition: all 0.15s; line-height: 16px; }
.demand-basis-btn.active { background: #2563eb; color: #fff; }
.demand-basis-btn:not(.active):hover { background: #f3f4f6; }
.forecast-product-toggle input[type="checkbox"] { margin: 0; cursor: pointer; }
.forecast-product-toggle input[type="checkbox"]:checked + span,
.forecast-product-toggle:has(input:checked) { color: #059669; }
.forecast-actual-qty { border: 1px solid #d1d5db; border-radius: 3px; }
.forecast-actual-qty:disabled { background: #f3f4f6; color: #9ca3af; }

/* 需要予測（メソッド2） */
#orderForecastV2Panel {
  --forecast-v2-toolbar-height: 40px;
  --forecast-v2-scenario-bar-height: 43px;
  --forecast-v2-product-header-height: 28px;
  --forecast-v2-select-column-width: 24px;
  overflow: auto;
}
#orderForecastV2Panel .forecast-v2-toolbar {
  position: sticky;
  top: 0;
  z-index: calc(var(--z-sticky) + 5);
  height: var(--forecast-v2-toolbar-height);
}
.forecast-v2-meta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}
#orderForecastV2Panel .forecast-v2-abc-origin {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}
#orderForecastV2Panel .forecast-v2-abc-warning {
  color: var(--color-warning-text);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}
#orderForecastV2Panel .forecast-v2-abc-badge {
  min-width: 24px;
  justify-content: center;
  padding-inline: var(--space-2);
}
.forecast-v2-content {
  --forecast-v2-scenario-c: #7c3aed;
  padding: var(--space-3) var(--space-4);
  overflow: visible;
}
.forecast-v2-summary-line {
  margin-bottom: var(--space-3);
  color: var(--text-secondary);
  font-size: var(--font-size-base);
}
.forecast-v2-summary-line strong {
  margin-left: var(--space-1);
  color: var(--text-primary);
  font-size: var(--font-size-lg);
}
.forecast-v2-summary-line span {
  margin-left: var(--space-3);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}
#orderForecastV2Panel .forecast-v2-scenario-bar {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--space-2);
  position: sticky;
  top: var(--forecast-v2-toolbar-height);
  z-index: calc(var(--z-sticky) + 4);
  box-sizing: border-box;
  height: var(--forecast-v2-scenario-bar-height);
  margin-bottom: 0;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-subtle);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  white-space: nowrap;
}
.forecast-v2-scenario-label,
.forecast-v2-scenario-hint {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}
.forecast-v2-scenario-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 3px var(--space-3);
  color: var(--text-tertiary);
  background: var(--bg-surface);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  cursor: pointer;
}
.forecast-v2-scenario-btn.active {
  color: var(--text-primary);
  font-weight: var(--font-weight-bold);
  box-shadow: inset 0 0 0 2px var(--bg-active);
}
.forecast-v2-scenario-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
}
#orderForecastV2Panel .forecast-v2-scenario-a {
  background: var(--color-danger);
}
#orderForecastV2Panel .forecast-v2-scenario-b {
  background: var(--color-primary);
}
#orderForecastV2Panel .forecast-v2-scenario-c {
  background: var(--forecast-v2-scenario-c);
}
#orderForecastV2Panel .forecast-v2-all-skus-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  cursor: pointer;
}
.forecast-v2-scenario-legend {
  margin-left: auto;
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}
.forecast-v2-product {
  margin-bottom: var(--space-3);
}
#orderForecastV2Panel .forecast-product-header {
  position: sticky;
  top: calc(
    var(--forecast-v2-toolbar-height)
    + var(--forecast-v2-scenario-bar-height)
  );
  z-index: calc(var(--z-sticky) + 3);
  height: var(--forecast-v2-product-header-height);
}
.forecast-v2-product-summary {
  margin-left: auto;
  color: #4338ca;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
}
.forecast-v2-product-basis {
  padding: 0 var(--space-1);
  color: var(--text-tertiary);
  background: var(--color-primary-subtle);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
}
#orderForecastV2Panel .forecast-v2-table th,
#orderForecastV2Panel .forecast-v2-table td {
  padding-right: var(--space-1);
  padding-left: var(--space-1);
  vertical-align: middle;
}
#orderForecastV2Panel .forecast-v2-table th {
  top: calc(
    var(--forecast-v2-toolbar-height)
    + var(--forecast-v2-scenario-bar-height)
    + var(--forecast-v2-product-header-height)
  );
  z-index: calc(var(--z-sticky) + 2);
}
#orderForecastV2Panel .forecast-v2-table th:first-child,
#orderForecastV2Panel .forecast-v2-table td:first-child {
  width: var(--forecast-v2-select-column-width);
  min-width: var(--forecast-v2-select-column-width);
  max-width: var(--forecast-v2-select-column-width);
}
#orderForecastV2Panel .forecast-v2-table td:first-child,
#orderForecastV2Panel .forecast-v2-table td:nth-child(2) {
  z-index: calc(var(--z-sticky) + 1);
}
#orderForecastV2Panel .forecast-v2-table th:first-child,
#orderForecastV2Panel .forecast-v2-table th:nth-child(2) {
  z-index: calc(var(--z-sticky) + 2);
}
#orderForecastV2Panel .forecast-v2-table th:nth-child(2),
#orderForecastV2Panel .forecast-v2-table td:nth-child(2) {
  left: var(--forecast-v2-select-column-width);
}
.forecast-v2-table .forecast-actual-qty {
  width: 60px;
  padding: 1px var(--space-1);
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: var(--font-size-base);
  text-align: right;
}
.forecast-v2-muted {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}
.forecast-v2-period-gap {
  color: var(--color-warning-text);
  font-weight: var(--font-weight-semibold);
}
.forecast-v2-coverage-recommended {
  color: inherit;
  font-size: var(--font-size-xs);
}
.forecast-v2-legacy-gap {
  color: var(--color-warning-text);
  font-weight: var(--font-weight-semibold);
}
.forecast-v2-left,
.forecast-v2-trajectory-cell {
  text-align: left !important;
}
.forecast-v2-basis {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}
.forecast-v2-trend {
  display: inline-flex;
  gap: var(--space-1);
  align-items: center;
  font-weight: var(--font-weight-semibold);
}
.forecast-v2-trend-up { color: var(--color-success-dark); }
.forecast-v2-trend-flat { color: var(--text-muted); font-weight: var(--font-weight-normal); }
.forecast-v2-trend-down { color: var(--color-warning-text); }
.forecast-v2-trend-spark {
  width: 34px;
  height: 12px;
}
.forecast-v2-trend-spark path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
}
.forecast-v2-trajectory-cell {
  min-width: 430px;
  padding: 2px var(--space-1) !important;
}
.forecast-v2-trajectory-svg {
  display: block;
  width: 420px;
  height: 51px;
  overflow: visible;
}
.forecast-v2-stockout-band { fill: var(--color-danger-bg); }
.forecast-v2-lead-boundary {
  stroke: var(--border-medium);
  stroke-width: 1;
  stroke-dasharray: 3 2;
}
.forecast-v2-ghost-line {
  fill: none;
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: 0.3;
}
.forecast-v2-main-line {
  fill: none;
  stroke-width: 1.6;
}
#orderForecastV2Panel .forecast-v2-line-a { stroke: var(--color-danger); }
#orderForecastV2Panel .forecast-v2-line-b { stroke: var(--color-primary); }
#orderForecastV2Panel .forecast-v2-line-c { stroke: var(--forecast-v2-scenario-c); }
.forecast-v2-axis-line { stroke: var(--border-medium); }
.forecast-v2-stockout-line { stroke: var(--color-danger); }
.forecast-v2-stockout-date,
.forecast-v2-arrival-date,
.forecast-v2-end-date {
  font-size: 9px;
  text-anchor: middle;
}
.forecast-v2-stockout-date { fill: var(--color-danger); }
.forecast-v2-arrival { font-size: 8px; text-anchor: middle; }
.forecast-v2-arrival-transit { fill: var(--color-primary); }
.forecast-v2-arrival-order { fill: var(--color-success); }
.forecast-v2-end-date { fill: var(--text-muted); text-anchor: end; }
.forecast-v2-trajectory-note {
  margin-top: 1px;
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}
.forecast-v2-trajectory-note strong,
.forecast-v2-stockout-note {
  color: var(--color-danger);
  font-weight: var(--font-weight-semibold);
}
.forecast-v2-unavoidable-note {
  margin-left: var(--space-1);
  color: var(--color-warning-text);
  font-weight: var(--font-weight-semibold);
}
.forecast-v2-safe-note { color: var(--color-success-dark); }
.forecast-v2-column-dropdown {
  position: absolute;
  right: 84px;
  top: 32px;
}
.forecast-v2-product-disabled .forecast-table {
  opacity: 0.55;
}
.forecast-v2-product-disabled .forecast-actual-qty {
  background: var(--bg-subtle);
  color: var(--text-muted);
}
.forecast-v2-proceed {
  padding: var(--space-2) 0 var(--space-4);
  text-align: right;
}
.po-step2-section { margin-bottom: 12px; }
.po-step2-section h4 { margin: 0 0 6px; font-size: 12px; color: #374151; }
.po-step2-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.po-step2-table th, .po-step2-table td { padding: 4px 6px; border: 1px solid #e5e7eb; text-align: right; white-space: nowrap; }
.po-step2-table th { background: #f3f4f6; font-weight: 600; text-align: center; }
.po-step2-table td:first-child { text-align: left; }
.po-step2-table input[type="number"] { width: 60px; text-align: right; font-size: 11px; padding: 1px 4px; border: 1px solid #d1d5db; border-radius: 3px; }
.po-step2-empty { color: #9ca3af; font-style: italic; padding: 8px 0; }
.po-step2-sku-summary { margin-bottom: 12px; padding: 8px 10px; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 6px; font-size: 12px; }
.inv-matrix { width: 100%; border-collapse: collapse; font-size: 11px; }
.inv-matrix th, .inv-matrix td { padding: 3px 5px; border: 1px solid #e5e7eb; text-align: right; white-space: nowrap; }
.inv-matrix th { background: #f3f4f6; font-weight: 600; color: #374151; position: sticky; top: 0; z-index: 1; }
.inv-matrix td:first-child, .inv-matrix th:first-child { text-align: left; position: sticky; left: 0; background: #fff; z-index: 1; min-width: 90px; }
.inv-matrix th:first-child { background: #f3f4f6; z-index: 2; }
.inv-matrix tbody tr:hover { background: #f9fafb; }
.inv-matrix tbody tr:hover td:first-child { background: #f9fafb; }
.inv-zero { color: #dc2626; font-weight: 600; }
.inv-low { color: #d97706; }
.inv-null { color: #d1d5db; }

/* 作業パネル */
.product-edit-panel {
  display: none;
  flex-direction: column;
  overflow-y: auto;
  flex: 1;
}
.product-edit-panel.active { display: flex; }
.work-sub-tab-bar {
  display: none !important;
}
.work-sub-tab-btn {
  padding: 5px 12px;
  border: 1px solid #d1d5db;
  background: #fff;
  font-size: 12px;
  cursor: pointer;
  color: #6b7280;
  border-radius: 14px;
  transition: all 0.15s;
}
.work-sub-tab-btn.active {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
  font-weight: 600;
}
.accounts-subtab-bar {
  display: flex;
  gap: 6px;
  align-items: center;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 14px;
}
.accounts-subtab-btn {
  padding: 7px 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  font-size: 12px;
  cursor: pointer;
  color: #6b7280;
  transition: all 0.15s;
}
.accounts-subtab-btn.active {
  color: var(--color-primary, #2563eb);
  border-bottom-color: var(--color-primary, #2563eb);
  font-weight: 600;
}
.accounts-subpanel {
  display: none;
}
.accounts-subpanel.active {
  display: block;
}

/* スタッフ時給設定マトリクス */
.srm-root {
  position: relative;
  color: var(--text-primary);
  font-size: var(--font-size-base);
}
.toolbar.srm-toolbar {
  height: auto;
  min-height: var(--toolbar-height);
  gap: var(--space-2);
  flex-wrap: wrap;
}
.srm-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}
.srm-month-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--text-secondary);
}
.srm-month { width: 132px; }
.srm-reload {
  flex: none;
  min-width: calc(var(--space-8) + var(--space-8));
  white-space: nowrap;
}
.srm-help {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: var(--space-2) 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-info-border);
  border-radius: var(--radius-lg);
  background: var(--color-info-bg);
  color: var(--text-secondary);
  line-height: var(--line-height-normal);
}
.srm-help strong {
  display: block;
  color: var(--color-info);
  font-size: var(--font-size-md);
}
.srm-help span { display: block; }
.srm-help-mark {
  display: inline-flex !important;
  flex: none;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-info);
  color: var(--text-inverse);
  font-weight: var(--font-weight-bold);
}
.srm-status {
  min-height: 20px;
  padding: 2px 0;
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}
.srm-status-error { color: var(--color-danger-text); }
.srm-loading,
.srm-empty { padding: var(--space-6); }
.srm-table-container {
  margin: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}
.srm-scroll {
  max-height: min(64vh, 680px);
  overflow: auto;
}
.table.srm-grid {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
}
.srm-grid th,
.srm-grid td {
  min-width: 124px;
  height: 38px;
  padding: var(--space-1) var(--space-2);
  border-right: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  white-space: nowrap;
}
.srm-grid thead th {
  position: sticky;
  top: 0;
  z-index: calc(var(--z-sticky) + 1);
  height: 58px;
  background: var(--bg-muted);
  text-align: center;
}
.srm-grid .srm-date-head,
.srm-grid .srm-date-cell {
  position: sticky;
  left: 0;
  min-width: 132px;
  width: 132px;
  max-width: 132px;
  border-right-color: var(--border-default);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  text-align: left;
}
.srm-grid .srm-date-head {
  z-index: calc(var(--z-sticky) + 2);
  background: var(--bg-muted);
}
.srm-staff-head { vertical-align: middle; }
.srm-staff-name {
  display: block;
  max-width: 150px;
  overflow: hidden;
  color: var(--text-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  text-overflow: ellipsis;
}
.srm-fill-link {
  margin-top: 2px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-primary);
  font-family: var(--font-family);
  font-size: var(--font-size-xs);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.srm-fill-link:hover { color: var(--color-primary-hover); }
.srm-fill-link:disabled {
  color: var(--text-muted);
  cursor: not-allowed;
}
.srm-date-cell {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}
.srm-base-row .srm-date-cell,
.srm-base-row .srm-rate-cell { background: var(--color-success-bg); }
.srm-base-label {
  display: block;
  color: var(--text-primary);
  font-weight: var(--font-weight-bold);
}
.srm-base-note {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
}
.srm-day-row { background: var(--bg-surface); }
.srm-sunday .srm-date-cell,
.srm-sunday .srm-rate-cell { background: var(--color-danger-bg); }
.srm-saturday .srm-date-cell,
.srm-saturday .srm-rate-cell { background: var(--color-primary-bg); }
.srm-rate-cell {
  position: relative;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
  cursor: cell;
  transition: background var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
}
.srm-rate-cell:hover,
.srm-rate-cell:focus {
  z-index: 1;
  outline: 0;
  box-shadow: inset 0 0 0 2px var(--border-focus);
}
.srm-rate-cell.srm-explicit {
  color: var(--text-primary);
  font-weight: var(--font-weight-bold);
}
.srm-rate-cell.srm-inherited {
  color: var(--text-muted);
  font-weight: var(--font-weight-normal);
}
.srm-rate-cell.srm-editing {
  background: var(--color-primary-bg);
  box-shadow: var(--shadow-focus);
}
.srm-rate-value { vertical-align: middle; }
.srm-explicit-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: var(--space-1);
  border-radius: var(--radius-full);
  background: var(--color-success);
  vertical-align: middle;
}
.srm-cell-input {
  width: 100%;
  height: 28px;
  padding: 2px var(--space-1);
  border: 1px solid var(--border-focus);
  border-radius: var(--radius-sm);
  outline: 0;
  background: var(--bg-surface);
  box-shadow: var(--shadow-focus);
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: var(--font-size-md);
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-weight-semibold);
  text-align: right;
}
.srm-rate-cell.srm-saving { opacity: 0.55; }
.srm-rate-cell.srm-dirty:not(.srm-saving):not(.srm-cell-error) {
  background: var(--color-warning-bg);
}
.srm-rate-cell.srm-cell-error {
  background: var(--color-danger-bg) !important;
  box-shadow: inset 0 0 0 2px var(--color-danger);
}
.srm-rate-cell.srm-cell-error .srm-cell-input {
  border-color: var(--color-danger);
  box-shadow: none;
}
.srm-busy .srm-grid { pointer-events: none; }
.srm-legend {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-2) 0 0;
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
}
.srm-legend-inherited { color: var(--text-muted); }
.srm-toast {
  position: fixed;
  bottom: var(--space-6);
  left: 50%;
  z-index: var(--z-toast);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  visibility: hidden;
  opacity: 0;
  background: var(--color-success-dark);
  box-shadow: var(--shadow-lg);
  color: var(--text-inverse);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity var(--transition-normal), visibility var(--transition-normal);
}
.srm-toast.srm-toast-error { background: var(--color-danger); }
.srm-toast.srm-toast-visible {
  visibility: visible;
  opacity: 1;
}
@media (max-width: 900px) {
  .srm-toolbar .toolbar-spacer { display: none; }
  .srm-copy-prev { margin-left: auto; }
  .srm-help { align-items: center; }
}
.work-sub-panel {
  display: none;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
}
.work-sub-panel.active { display: flex; }
#workMercariInvPanel:not(.active) { display: none !important; }
#workAccountingPanel.active { flex-direction: column; }
.order-sub-tab-bar {
  display: none !important;
}
.order-sub-tab-btn {
  padding: 4px 10px;
  border: 1px solid #d1d5db;
  background: #fff;
  font-size: 11px;
  cursor: pointer;
  color: #6b7280;
  border-radius: 12px;
  transition: all 0.15s;
}
.order-sub-tab-btn.active {
  background: #4f46e5;
  color: #fff;
  border-color: #4f46e5;
  font-weight: 600;
}
.order-sub-panel {
  display: none;
  flex-direction: column;
  flex: 1;
  overflow: auto;
}
.order-sub-panel.active { display: flex; }

/* アリパ在庫コンテナビュー */
.acv-page {
  --acv-deep-0: #081524;
  --acv-deep-1: #0d2138;
  --acv-deep-2: #143050;
  --acv-deep-3: #0a1a2c;
  --acv-deep-text: #eaf4ff;
  --acv-deep-secondary: #a9c6e6;
  --acv-deep-muted: #7d9dc0;
  --acv-deep-faint: #6f8fb3;
  --acv-deep-bright: #bcd8f5;
  --acv-deep-label: #8fb0d4;
  --acv-deep-dim: #5f7fa3;
  --acv-cyan: #38bdf8;
  --acv-cyan-light: #7dd3fc;
  --acv-cyan-dark: #0ea5e9;
  --acv-green-light: #86efac;
  --acv-amber-light: #fbbf24;
  --acv-blue-light: #60a5fa;
  --acv-blue-pale: #93c5fd;
  --acv-yellow-light: #fcd34d;
  --acv-product-0: var(--color-primary);
  --acv-product-1: var(--color-info);
  --acv-product-2: var(--color-success-dark);
  --acv-product-3: var(--color-warning);
  --acv-product-4: var(--color-danger);
  --acv-product-5: #7c3aed;
  --acv-product-6: #db2777;
  --acv-product-7: #0891b2;
  --acv-product-8: #65a30d;
  --acv-product-9: #c2410c;
  --acv-product-10: #4f46e5;
  --acv-product-11: #64748b;
  --acv-deep-border: rgba(125, 211, 252, 0.22);
  --acv-deep-line: rgba(125, 211, 252, 0.14);
  --acv-deep-surface: rgba(255, 255, 255, 0.045);
  --acv-deep-empty: rgba(255, 255, 255, 0.05);
  --acv-mono: 'SF Mono', Monaco, Consolas, monospace;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: var(--bg-body);
  color: var(--text-primary);
  font-family: var(--font-family);
}

.acv-num {
  font-family: var(--acv-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.acv-toolbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: 0 var(--space-5);
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-surface);
}

.acv-title-wrap {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  min-width: 0;
}

.acv-title {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

.acv-subtitle,
.acv-toolbar-meta {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.acv-toolbar-spacer {
  flex: 1;
}

.acv-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 1364px;
  margin: 0 auto;
  padding: var(--space-5) var(--space-6) 60px;
}

.acv-fetch-alert {
  margin: var(--space-3) var(--space-6) 0;
  padding: 10px 14px;
  border: 1px solid var(--color-danger-subtle);
  border-radius: 10px;
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
  font-size: var(--font-size-base);
}

.acv-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 300px;
  color: var(--text-tertiary);
}

.acv-hero {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background:
    radial-gradient(900px 380px at 78% -8%, rgba(56, 189, 248, 0.2), transparent 62%),
    radial-gradient(600px 300px at 8% 110%, rgba(37, 99, 235, 0.22), transparent 60%),
    linear-gradient(158deg, var(--acv-deep-1) 0%, var(--acv-deep-0) 55%, var(--acv-deep-3) 100%);
  box-shadow: 0 24px 60px -20px rgba(8, 21, 36, 0.55);
  color: var(--acv-deep-text);
  animation: acv-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.acv-hero::before {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--acv-deep-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--acv-deep-line) 1px, transparent 1px);
  background-size: 38px 38px;
  content: "";
  opacity: 0.08;
  pointer-events: none;
}

.acv-hero::after {
  position: absolute;
  right: 0;
  bottom: 132px;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--acv-deep-line) 12%, var(--acv-deep-line) 88%, transparent);
  content: "";
}

.acv-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(350px, 0.86fr) minmax(580px, 1.14fr);
}

.acv-verdict {
  display: flex;
  flex-direction: column;
  min-height: 500px;
  padding: 30px 34px 26px;
}

.acv-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--acv-cyan-light);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.acv-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--acv-cyan);
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.18);
  animation: acv-pulse 2.4s ease-in-out infinite;
}

.acv-verdict-title {
  margin: 16px 0 0;
  color: var(--acv-deep-secondary);
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.01em;
}

.acv-hero-fallback {
  align-self: flex-start;
  margin-top: var(--space-3);
  padding: 2px 8px;
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-radius: var(--radius-full);
  background: rgba(251, 191, 36, 0.12);
  color: var(--acv-amber-light);
  font-size: var(--font-size-xs);
}

.acv-hero-fallback[hidden] {
  display: none;
}

.acv-bigdate {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-top: 2px;
  flex-wrap: wrap;
}

.acv-bigdate-main {
  color: var(--text-inverse);
  font-family: var(--acv-mono);
  font-size: 78px;
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.045em;
  line-height: 0.92;
  text-shadow: 0 0 44px rgba(56, 189, 248, 0.28);
}

.acv-bigdate-weekday {
  padding-bottom: 9px;
  color: var(--acv-deep-bright);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-semibold);
}

.acv-bigdate-year {
  padding-bottom: 13px;
  color: var(--acv-deep-muted);
  font-size: 12.5px;
  letter-spacing: 0.04em;
}

.acv-countdown {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  color: var(--acv-deep-secondary);
  font-size: 12.5px;
  flex-wrap: wrap;
}

.acv-countdown b {
  color: var(--acv-amber-light);
  font-size: 17px;
}

.acv-savings {
  margin-top: var(--space-5);
}

.acv-savings[hidden] {
  display: none;
}

.acv-saving-label {
  color: var(--acv-deep-label);
  font-size: 11.5px;
  letter-spacing: 0.02em;
}

.acv-saving-amount {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-top: 3px;
  flex-wrap: wrap;
}

.acv-saving-value {
  color: var(--acv-green-light);
  font-family: var(--acv-mono);
  font-size: 30px;
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.03em;
}

.acv-saving-ratio {
  padding: 2px 7px;
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: var(--radius-full);
  background: rgba(34, 197, 94, 0.14);
  color: var(--acv-green-light);
  font-size: 12.5px;
}

.acv-saving-ratio.is-negative {
  border-color: rgba(251, 191, 36, 0.35);
  background: rgba(251, 191, 36, 0.12);
  color: var(--acv-amber-light);
}

.acv-saving-note {
  max-width: 560px;
  margin-top: 5px;
  color: var(--acv-deep-faint);
  font-size: var(--font-size-sm);
}

.acv-saving-oversize {
  max-width: 560px;
  margin-top: 4px;
  color: var(--acv-amber-light);
  font-size: var(--font-size-sm);
}

.acv-saving-oversize[hidden] {
  display: none;
}

.acv-saving-common {
  max-width: 560px;
  margin-top: 4px;
  color: var(--acv-deep-faint);
  font-size: var(--font-size-xs);
}

.acv-compare {
  margin-top: var(--space-4);
  padding-top: 15px;
  border-top: 1px solid var(--acv-deep-line);
}

.acv-compare-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 7px;
}

.acv-compare-when {
  width: 105px;
  flex: none;
  color: var(--acv-deep-label);
  font-size: 11.5px;
}

.acv-compare-track {
  height: 7px;
  overflow: hidden;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.07);
  flex: 1;
}

.acv-compare-fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-full);
  background: rgba(125, 211, 252, 0.45);
  animation: acv-grow 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.5s both;
}

.acv-compare-row.is-primary .acv-compare-when {
  color: var(--acv-deep-text);
  font-weight: var(--font-weight-semibold);
}

.acv-compare-row.is-primary .acv-compare-fill {
  background: linear-gradient(90deg, var(--color-success), var(--acv-green-light));
  box-shadow: 0 0 10px rgba(134, 239, 172, 0.45);
}

.acv-compare-value {
  width: 82px;
  flex: none;
  color: var(--acv-deep-bright);
  font-size: 12.5px;
  text-align: right;
}

.acv-compare-row.is-primary .acv-compare-value {
  color: var(--acv-green-light);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
}

.acv-compare-note {
  margin: 9px 0 0;
  color: var(--acv-deep-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

.acv-stage {
  display: flex;
  flex-direction: column;
  padding: 26px 30px 22px;
  border-left: 1px solid rgba(125, 211, 252, 0.1);
}

.acv-stage-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: var(--space-3);
}

.acv-stage-title {
  color: var(--acv-deep-secondary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.02em;
}

.acv-stage-fill {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-left: auto;
  color: var(--text-inverse);
  font-size: var(--font-size-md);
}

.acv-stage-fill-total {
  color: var(--acv-deep-muted);
  font-size: var(--font-size-sm);
}

.acv-stage-fill-pct {
  margin-left: var(--space-2);
  color: var(--acv-cyan-light);
  font-family: var(--acv-mono);
}

.acv-container-shell {
  position: relative;
  padding: 12px 13px 13px;
  border: 1px solid var(--acv-deep-border);
  border-radius: 8px;
  background: linear-gradient(180deg, var(--acv-deep-surface), rgba(255, 255, 255, 0.015));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 10px 26px -14px rgba(0, 0, 0, 0.7);
}

.acv-container-shell::before {
  position: absolute;
  top: -8px;
  left: 14px;
  padding: 0 7px;
  background: var(--acv-deep-1);
  color: var(--acv-cyan-light);
  content: attr(data-container-label);
  font-family: var(--acv-mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
}

.acv-box-grid {
  display: grid;
  grid-template-columns: repeat(32, minmax(0, 1fr));
  gap: 2.5px;
  min-height: 72px;
}

.acv-box {
  aspect-ratio: 1;
  border-radius: 2px;
  background: var(--acv-deep-empty);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  transition:
    background 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

.acv-box.is-ghost {
  background: repeating-linear-gradient(
    135deg,
    rgba(56, 189, 248, 0.3) 0 2px,
    rgba(56, 189, 248, 0.1) 2px 4px
  );
  box-shadow: inset 0 0 0 1px rgba(125, 211, 252, 0.5);
}

.acv-box.is-on {
  background: linear-gradient(180deg, var(--acv-cyan-light), var(--acv-cyan-dark));
  box-shadow:
    0 0 8px rgba(56, 189, 248, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.acv-box.is-full {
  box-shadow:
    0 0 9px rgba(34, 197, 94, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.acv-box.is-edge {
  position: relative;
}

.acv-box.is-edge::after {
  position: absolute;
  top: -3px;
  right: -2.6px;
  bottom: -3px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(
    180deg,
    transparent,
    var(--acv-amber-light) 18%,
    var(--acv-amber-light) 82%,
    transparent
  );
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.9);
  content: "";
}

.acv-box-empty {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  color: var(--acv-deep-muted);
  font-size: var(--font-size-sm);
}

.acv-product-color-0 { background: var(--acv-product-0); }
.acv-product-color-1 { background: var(--acv-product-1); }
.acv-product-color-2 { background: var(--acv-product-2); }
.acv-product-color-3 { background: var(--acv-product-3); }
.acv-product-color-4 { background: var(--acv-product-4); }
.acv-product-color-5 { background: var(--acv-product-5); }
.acv-product-color-6 { background: var(--acv-product-6); }
.acv-product-color-7 { background: var(--acv-product-7); }
.acv-product-color-8 { background: var(--acv-product-8); }
.acv-product-color-9 { background: var(--acv-product-9); }
.acv-product-color-10 { background: var(--acv-product-10); }
.acv-product-color-11 { background: var(--acv-product-11); }

.acv-box.is-on.acv-product-color-0 { background: var(--acv-product-0); }
.acv-box.is-on.acv-product-color-1 { background: var(--acv-product-1); }
.acv-box.is-on.acv-product-color-2 { background: var(--acv-product-2); }
.acv-box.is-on.acv-product-color-3 { background: var(--acv-product-3); }
.acv-box.is-on.acv-product-color-4 { background: var(--acv-product-4); }
.acv-box.is-on.acv-product-color-5 { background: var(--acv-product-5); }
.acv-box.is-on.acv-product-color-6 { background: var(--acv-product-6); }
.acv-box.is-on.acv-product-color-7 { background: var(--acv-product-7); }
.acv-box.is-on.acv-product-color-8 { background: var(--acv-product-8); }
.acv-box.is-on.acv-product-color-9 { background: var(--acv-product-9); }
.acv-box.is-on.acv-product-color-10 { background: var(--acv-product-10); }
.acv-box.is-on.acv-product-color-11 { background: var(--acv-product-11); }

.acv-box.is-on[class*="acv-product-color-"] {
  box-shadow:
    0 0 8px rgba(56, 189, 248, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.acv-mix-legend {
  display: flex;
  gap: 5px var(--space-3);
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(125, 211, 252, 0.12);
  flex-wrap: wrap;
}

.acv-mix-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--acv-deep-secondary);
  font-size: 10.5px;
}

.acv-mix-swatch,
.acv-arrival-swatch {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  flex: none;
}

.acv-mix-code {
  color: var(--acv-deep-text);
  font-weight: var(--font-weight-semibold);
}

.acv-mix-qty,
.acv-mix-empty {
  color: var(--acv-deep-muted);
}

.acv-stage-legend {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: 11px;
  color: var(--acv-deep-muted);
  font-size: var(--font-size-sm);
  flex-wrap: wrap;
}

.acv-stage-legend-key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.acv-legend-swatch {
  width: 9px;
  height: 9px;
  border-radius: 2px;
}

.acv-legend-swatch.is-current {
  background: linear-gradient(180deg, var(--acv-cyan-light), var(--acv-cyan-dark));
}

.acv-legend-swatch.is-ghost {
  background: rgba(56, 189, 248, 0.12);
  box-shadow: inset 0 0 0 1px rgba(125, 211, 252, 0.45);
}

.acv-legend-swatch.is-line {
  width: 3px;
  height: 11px;
  background: var(--acv-amber-light);
}

.acv-legend-swatch.is-empty {
  background: var(--acv-deep-empty);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.acv-stage-conversion {
  margin-left: auto;
  color: var(--acv-deep-dim);
  font-size: var(--font-size-xs);
}

.acv-box-note {
  margin-top: 5px;
  color: var(--acv-deep-dim);
  font-size: var(--font-size-xs);
  text-align: right;
}

.acv-scrub {
  margin-top: var(--space-4);
}

.acv-scrub-top {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: 7px;
  color: var(--acv-deep-label);
  font-size: 11.5px;
}

.acv-scrub-date {
  color: var(--text-inverse);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

.acv-scrub-badge {
  margin-left: auto;
  padding: 2px 8px;
  border: 1px solid rgba(125, 211, 252, 0.3);
  border-radius: var(--radius-full);
  color: var(--acv-cyan-light);
  font-size: 10.5px;
}

.acv-scrub-badge.is-ready {
  border-color: rgba(134, 239, 172, 0.4);
  color: var(--acv-green-light);
}

.acv-scrub-badge.is-full {
  border-color: var(--color-success);
  background: rgba(34, 197, 94, 0.14);
  color: var(--acv-green-light);
}

.acv-scrub-badge.is-short {
  border-color: rgba(251, 191, 36, 0.35);
  color: var(--acv-amber-light);
}

.acv-scrub-range {
  width: 100%;
  height: 26px;
  margin: 0;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

.acv-scrub-range::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: var(--radius-full);
  background: linear-gradient(
    90deg,
    rgba(56, 189, 248, 0.55) var(--acv-scrub-pct, 0%),
    rgba(255, 255, 255, 0.1) var(--acv-scrub-pct, 0%)
  );
}

.acv-scrub-range::-webkit-slider-thumb {
  width: 17px;
  height: 17px;
  margin-top: -6px;
  border: 0;
  border-radius: var(--radius-full);
  appearance: none;
  background: var(--text-inverse);
  box-shadow:
    0 0 0 4px rgba(56, 189, 248, 0.28),
    0 2px 6px rgba(0, 0, 0, 0.5);
}

.acv-scrub-range::-moz-range-track {
  height: 5px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.1);
}

.acv-scrub-range::-moz-range-progress {
  height: 5px;
  border-radius: var(--radius-full);
  background: rgba(56, 189, 248, 0.55);
}

.acv-scrub-range::-moz-range-thumb {
  width: 17px;
  height: 17px;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--text-inverse);
}

.acv-scrub-marks {
  position: relative;
  height: 18px;
  margin-top: 2px;
}

.acv-scrub-mark {
  position: absolute;
  color: var(--acv-deep-faint);
  font-size: var(--font-size-xs);
  transform: translateX(-50%);
  white-space: nowrap;
}

.acv-scrub-mark:first-child {
  transform: none;
}

.acv-scrub-mark:last-child {
  transform: translateX(-100%);
}

.acv-scrub-mark.is-hit {
  color: var(--acv-green-light);
}

.acv-scrub-tick {
  display: block;
  width: 1px;
  height: 5px;
  margin: 0 auto 2px;
  background: rgba(125, 211, 252, 0.4);
}

.acv-scrub-mark.is-hit .acv-scrub-tick {
  background: var(--color-success);
}

.acv-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.acv-kpi {
  min-width: 0;
  padding: 15px 17px;
  border: 1px solid var(--border-default);
  border-radius: 10px;
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  animation: acv-rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.acv-kpi:nth-child(1) {
  animation-delay: 0.06s;
}

.acv-kpi:nth-child(2) {
  animation-delay: 0.12s;
}

.acv-kpi:nth-child(3) {
  animation-delay: 0.18s;
}

.acv-kpi-head {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text-tertiary);
  font-size: 11.5px;
  font-weight: var(--font-weight-medium);
}

.acv-icon {
  width: 17px;
  height: 17px;
  flex: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.acv-kpi:nth-child(3) .acv-icon {
  color: var(--color-warning);
}

.acv-kpi-value {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-top: 7px;
  color: var(--text-primary);
}

.acv-kpi-value > .acv-num {
  font-size: 27px;
  font-weight: var(--font-weight-bold);
}

.acv-kpi-unit {
  color: var(--text-tertiary);
  font-size: var(--font-size-base);
}

.acv-kpi-secondary {
  color: var(--text-muted);
  font-size: var(--font-size-base);
}

.acv-kpi-band {
  min-height: 17px;
  margin-top: 1px;
  color: var(--text-muted);
  font-family: var(--acv-mono);
  font-size: var(--font-size-sm);
}

.acv-kpi-bar {
  position: relative;
  height: 6px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--bg-subtle);
}

.acv-kpi-bar i {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--color-primary), var(--acv-blue-light));
  animation: acv-grow 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s both;
}

.acv-kpi-bar i.is-warning {
  background: linear-gradient(90deg, var(--color-warning), var(--acv-yellow-light));
}

.acv-kpi-foot {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: 5px;
  color: var(--text-muted);
  font-size: 10.5px;
}

.acv-panel {
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: 10px;
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  animation: acv-rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.24s both;
}

.acv-panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 17px;
  border-bottom: 1px solid var(--border-default);
}

.acv-panel-heading {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.acv-panel-heading h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
}

.acv-panel-heading span {
  color: var(--text-tertiary);
  font-size: 11.5px;
}

.acv-segment {
  display: inline-flex;
  margin-left: auto;
  overflow: hidden;
  border: 1px solid var(--border-medium);
  border-radius: 6px;
}

.acv-segment-button {
  padding: 4px 11px;
  border: 0;
  background: var(--bg-surface);
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  font-size: 11.5px;
}

.acv-segment-button + .acv-segment-button {
  border-left: 1px solid var(--border-medium);
}

.acv-segment-button.is-active {
  background: var(--color-primary);
  color: var(--text-inverse);
  font-weight: var(--font-weight-semibold);
}

.acv-panel-body {
  padding: var(--space-4) 17px;
}

.acv-chart-wrap {
  position: relative;
  min-height: 300px;
}

.acv-chart {
  display: block;
  width: 100%;
  height: 300px;
  overflow: visible;
}

.acv-chart[hidden] {
  display: none;
}

.acv-chart-grid {
  stroke: var(--border-light);
  stroke-width: 1;
}

.acv-chart-axis {
  fill: var(--text-muted);
  font-family: var(--font-family);
  font-size: 9.5px;
}

.acv-chart-threshold {
  stroke-width: 1;
}

.acv-chart-threshold.is-breakeven {
  stroke: var(--text-muted);
  stroke-dasharray: 2 4;
}

.acv-chart-threshold.is-capacity {
  stroke: var(--color-success-dark);
  stroke-width: 1.75;
}

.acv-chart-chip text {
  fill: var(--text-tertiary);
  font-family: var(--font-family);
  font-size: 10.5px;
  font-weight: var(--font-weight-bold);
}

.acv-chart-chip rect {
  fill: var(--bg-surface);
  fill-opacity: 0.94;
  stroke: var(--border-default);
}

.acv-chart-chip.is-capacity text {
  fill: var(--color-success-dark);
}

.acv-chart-chip.is-capacity rect {
  stroke: var(--color-success-subtle);
}

.acv-chart-capacity-band {
  fill: var(--color-success);
  fill-opacity: 0.045;
}

.acv-chart-stop-top {
  stop-color: var(--color-primary);
  stop-opacity: 0.3;
}

.acv-chart-stop-bottom {
  stop-color: var(--color-primary);
  stop-opacity: 0.02;
}

.acv-chart-area {
  fill: url("#acvChartArea");
}

.acv-chart-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.acv-chart-line.is-active {
  stroke: var(--color-primary);
  stroke-width: 2.4;
}

.acv-chart-line.is-other {
  stroke: var(--acv-blue-pale);
  stroke-dasharray: 5 4;
  stroke-width: 1.6;
}

.acv-chart-hit-line {
  opacity: 0.55;
  stroke: var(--text-muted);
  stroke-dasharray: 3 3;
  stroke-width: 1;
}

.acv-chart-breakeven-dot {
  fill: var(--bg-surface);
  stroke: var(--text-muted);
  stroke-width: 1.6;
}

.acv-chart-capacity-hit-line {
  stroke: var(--color-success-dark);
  stroke-dasharray: 3 3;
  stroke-width: 1;
}

.acv-chart-capacity-dot {
  fill: var(--color-success-dark);
  stroke: var(--text-inverse);
  stroke-width: 2;
}

.acv-chart-capacity-pulse {
  fill: var(--color-success-dark);
  opacity: 0.3;
  transform-box: fill-box;
  transform-origin: center;
  animation: acv-ripple 2.2s ease-out infinite;
}

.acv-chart-cursor {
  stroke: var(--acv-amber-light);
  stroke-width: 1.4;
}

.acv-chart-cursor-dot {
  fill: var(--acv-amber-light);
  stroke: var(--text-inverse);
  stroke-width: 2;
}

.acv-arrival-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.acv-arrival-dot {
  position: absolute;
  z-index: 3;
  width: 11px;
  height: 11px;
  border: 2.5px solid var(--color-primary);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  box-shadow: 0 1px 4px rgba(37, 99, 235, 0.35);
  transform: translate(-50%, -50%);
}

.acv-arrival-dot.is-small {
  width: 7px;
  height: 7px;
  border-width: 2px;
}

.acv-arrival-card {
  position: absolute;
  z-index: 4;
  min-width: 112px;
  padding: 6px 9px 7px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  box-shadow: var(--shadow-lg);
  font-size: 10px;
  pointer-events: none;
  transform: translateX(-50%);
}

.acv-arrival-card::after {
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 9px;
  height: 9px;
  border-right: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-surface);
  content: "";
  transform: translateX(-50%) rotate(45deg);
}

.acv-arrival-head,
.acv-arrival-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.acv-arrival-head {
  align-items: baseline;
  margin-bottom: var(--space-1);
}

.acv-arrival-date {
  color: var(--text-tertiary);
}

.acv-arrival-kg {
  margin-left: auto;
  color: var(--color-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
}

.acv-arrival-code {
  color: var(--text-secondary);
  font-weight: var(--font-weight-semibold);
}

.acv-arrival-qty {
  margin-left: auto;
  color: var(--text-tertiary);
}

.acv-arrival-more {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 9.5px;
}

.acv-arrival-leader {
  position: absolute;
  z-index: 2;
  width: 1px;
  background: repeating-linear-gradient(
    180deg,
    var(--border-medium) 0 3px,
    transparent 3px 6px
  );
  transform: translateX(-50%);
}

.acv-arrival-card.is-animate {
  animation: acv-arrival-rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.acv-arrival-dot.is-animate {
  animation: acv-arrival-dot-rise 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.acv-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  color: var(--text-muted);
  font-size: var(--font-size-base);
}

.acv-empty[hidden] {
  display: none;
}

.acv-callout {
  display: flex;
  gap: 11px;
  padding: var(--space-3) 14px;
  border-radius: 10px;
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
}

.acv-panel-body > .acv-callout {
  margin-top: var(--space-3);
}

.acv-callout-info {
  border: 1px solid var(--color-primary-subtle);
  background: var(--color-primary-bg);
  color: var(--color-primary-active);
}

.acv-callout-warning {
  border: 1px solid var(--color-warning-subtle);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}

.acv-callout > .acv-icon {
  margin-top: 1px;
}

.acv-callout-body {
  min-width: 0;
}

.acv-callout-body p {
  margin: 0;
}

.acv-callout-body strong {
  font-weight: var(--font-weight-semibold);
}

.acv-details {
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: 10px;
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}

.acv-details-summary {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: var(--space-3) 17px;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: var(--font-weight-semibold);
  list-style: none;
}

.acv-details-summary::-webkit-details-marker {
  display: none;
}

.acv-details-chev {
  width: 13px;
  height: 13px;
  color: var(--text-muted);
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
  transition: transform var(--transition-normal);
}

.acv-details[open] .acv-details-chev {
  transform: rotate(90deg);
}

.acv-details-tag {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: var(--font-weight-medium);
}

.acv-details-inner {
  padding: 13px 17px 15px;
  overflow-x: auto;
  border-top: 1px solid var(--border-default);
}

.acv-table-scroll {
  max-height: 360px;
  overflow: auto;
}

.acv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
}

.acv-table th {
  padding: 7px 9px;
  border-bottom: 1px solid var(--border-default);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-align: left;
  white-space: nowrap;
}

.acv-table td {
  padding: 7px 9px;
  border-bottom: 1px solid var(--bg-subtle);
  color: var(--text-secondary);
}

.acv-table tbody tr:hover td {
  background: var(--bg-muted);
}

.acv-table-right {
  text-align: right !important;
}

.acv-gantt {
  min-width: 720px;
}

.acv-gantt-axis {
  position: relative;
  height: 34px;
  margin-left: 118px;
  border-bottom: 1px solid var(--border-default);
}

.acv-gantt-tick {
  position: absolute;
  bottom: 7px;
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  transform: translateX(-50%);
  white-space: nowrap;
}

.acv-gantt-tick::after {
  position: absolute;
  bottom: -8px;
  left: 50%;
  width: 1px;
  height: 5px;
  background: var(--border-medium);
  content: "";
}

.acv-gantt-row {
  display: flex;
  align-items: center;
  height: 30px;
}

.acv-gantt-rows {
  position: relative;
}

.acv-gantt-label {
  width: 118px;
  padding-right: 11px;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 11.5px;
  font-weight: var(--font-weight-semibold);
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acv-gantt-track {
  position: relative;
  height: 100%;
  flex: 1;
}

.acv-gantt-row:hover .acv-gantt-track {
  background: var(--bg-muted);
}

.acv-gantt-lead {
  position: absolute;
  top: 50%;
  height: 1px;
  background: repeating-linear-gradient(
    90deg,
    var(--border-medium) 0 3px,
    transparent 3px 6px
  );
}

.acv-gantt-order {
  position: absolute;
  z-index: 2;
  top: 50%;
  width: 9px;
  height: 9px;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  transform: translate(-50%, -50%);
}

.acv-gantt-receipt {
  position: absolute;
  top: 50%;
  min-width: 8px;
  height: 15px;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--color-primary), var(--acv-blue-light));
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.28);
  transform: translateY(-50%);
  animation: acv-gantt-sweep 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.acv-gantt-quantity {
  position: absolute;
  top: 50%;
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  transform: translate(6px, -50%);
  white-space: nowrap;
}

.acv-gantt-legend {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-3);
  padding-top: 11px;
  border-top: 1px solid var(--border-default);
  color: var(--text-tertiary);
  font-size: 10.5px;
  flex-wrap: wrap;
}

.acv-gantt-legend-key {
  white-space: nowrap;
}

.acv-gantt-controls {
  display: flex;
  gap: var(--space-1);
  margin-left: auto;
}

.acv-gantt-toggle.is-active {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--text-inverse);
}

.acv-gantt-legend-note {
  color: var(--text-muted);
}

.acv-quality-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 10px;
}

.acv-quality-cell {
  padding: 10px 12px;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  background: var(--bg-muted);
}

.acv-quality-key,
.acv-quality-meta {
  color: var(--text-tertiary);
  font-size: 10.5px;
}

.acv-quality-value {
  margin-top: 2px;
  color: var(--text-primary);
  font-size: 15px;
  font-weight: var(--font-weight-semibold);
}

.acv-quality-value.is-good {
  color: var(--color-success-dark);
}

.acv-quality-value.is-warning {
  color: var(--color-warning-text);
}

.acv-quality-meta {
  margin-top: 1px;
  color: var(--text-muted);
}

.acv-details-inner > .acv-callout {
  margin-top: var(--space-3);
}

.acv-trace {
  display: flex;
  gap: var(--space-3);
  margin-top: 10px;
  color: var(--text-muted);
  font-family: var(--acv-mono);
  font-size: var(--font-size-sm);
  flex-wrap: wrap;
}

.acv-trace b {
  font-weight: var(--font-weight-semibold);
}

.acv-variance-text,
.acv-variance-caveat {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  line-height: 1.7;
}

.acv-variance-caveat {
  margin-top: var(--space-2);
  color: var(--text-tertiary);
}

.acv-container-switch {
  display: inline-flex;
  align-self: center;
  gap: 2px;
  margin: 14px auto 0;
  padding: 3px;
  border: 1px solid rgba(125, 211, 252, 0.2);
  border-radius: var(--radius-full);
  background: rgba(2, 6, 23, 0.62);
}

.acv-container-switch-button {
  min-width: 88px;
  padding: 7px 14px;
  border: 0;
  border-radius: var(--radius-full);
  color: var(--acv-deep-muted);
  background: transparent;
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

.acv-container-switch-button:hover:not(:disabled) {
  color: var(--text-inverse);
  background: rgba(56, 189, 248, 0.1);
}

.acv-container-switch-button.is-active {
  color: var(--acv-deep-1);
  background: var(--acv-cyan-light);
  box-shadow: 0 2px 10px rgba(56, 189, 248, 0.3);
}

.acv-container-switch-button:disabled {
  color: var(--acv-deep-faint);
  cursor: not-allowed;
  opacity: 0.55;
}

.acv-capacity-disclosure {
  margin: 7px auto 0;
  color: var(--acv-deep-muted);
  font-size: var(--font-size-xs);
  text-align: center;
}

.acv-draft-freight {
  max-width: 430px;
  margin-top: var(--space-4);
  padding: var(--space-3);
  border: 1px solid rgba(251, 191, 36, 0.32);
  border-radius: var(--radius-md);
  background: rgba(251, 191, 36, 0.08);
}

.acv-draft-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--acv-deep-secondary);
  font-size: var(--font-size-sm);
}

.acv-draft-input {
  width: 150px;
  padding: 6px 9px;
  border: 1px solid rgba(125, 211, 252, 0.28);
  border-radius: var(--radius-sm);
  color: var(--text-inverse);
  background: rgba(2, 6, 23, 0.72);
  font-family: var(--acv-mono);
  font-size: var(--font-size-base);
}

.acv-draft-input:focus {
  border-color: var(--acv-cyan-light);
  outline: 2px solid rgba(56, 189, 248, 0.18);
  outline-offset: 1px;
}

.acv-draft-result {
  margin-top: 7px;
  color: var(--acv-amber-light);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.acv-draft-result.is-positive {
  color: var(--acv-green-light);
}

.acv-draft-result.is-negative,
.acv-draft-result.is-error {
  color: var(--color-danger);
}

.acv-draft-result.is-unavailable {
  color: var(--acv-deep-muted);
}

.acv-box-grid.acv-box-grid-dynamic {
  grid-template-columns: repeat(var(--acv-grid-columns, 32), minmax(0, 1fr));
}

.acv-box-grid.acv-box-grid-dynamic.is-rebuilding .acv-box {
  transition: none;
}

@keyframes acv-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes acv-grow {
  from {
    width: 0;
  }
}

@keyframes acv-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.18);
  }
  50% {
    box-shadow: 0 0 0 7px rgba(56, 189, 248, 0.05);
  }
}

@keyframes acv-ripple {
  from {
    opacity: 0.35;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(2.5);
  }
}

@keyframes acv-arrival-rise {
  from {
    opacity: 0;
    transform: translate(-50%, 8px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@keyframes acv-arrival-dot-rise {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes acv-gantt-sweep {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@media (max-width: 1180px) {
  .acv-hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .acv-verdict {
    min-height: 330px;
  }

  .acv-stage {
    border-top: 1px solid rgba(125, 211, 252, 0.1);
    border-left: 0;
  }
}

@media (max-width: 900px) {
  .acv-content {
    padding-right: var(--space-4);
    padding-left: var(--space-4);
  }

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

  .acv-stage-conversion {
    width: 100%;
    margin-left: 0;
  }
}

@media (max-width: 640px) {
  .acv-toolbar {
    align-items: flex-start;
    min-height: 0;
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
    flex-wrap: wrap;
  }

  .acv-title-wrap {
    align-items: flex-start;
    flex-direction: column;
    gap: 0;
  }

  .acv-verdict,
  .acv-stage {
    padding-right: var(--space-4);
    padding-left: var(--space-4);
  }

  .acv-bigdate-main {
    font-size: 60px;
  }

  .acv-box-grid {
    gap: 1.5px;
  }

  .acv-stage-legend {
    gap: var(--space-2);
  }

  .acv-panel-header,
  .acv-panel-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .acv-segment {
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .acv-hero,
  .acv-kpi,
  .acv-panel,
  .acv-kpi-bar i,
  .acv-eyebrow-dot,
  .acv-compare-fill,
  .acv-chart-capacity-pulse,
  .acv-arrival-card,
  .acv-arrival-dot,
  .acv-gantt-receipt {
    animation: none;
  }

  .acv-box,
  .acv-details-chev {
    transition: none;
  }
}

.ordering-sub-tab-btn {
  padding: 4px 10px;
  border: 1px solid #d1d5db;
  background: #fff;
  font-size: 11px;
  cursor: pointer;
  color: #6b7280;
  border-radius: 12px;
  transition: all 0.15s;
}
.ordering-sub-tab-btn.active {
  background: #4f46e5;
  color: #fff;
  border-color: #4f46e5;
  font-weight: 600;
}
.ordering-sub-panel {
  display: none;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
}
.ordering-sub-panel.active { display: flex; }
.pe-search-form { margin-bottom: 12px; }
.pe-form-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.pe-input {
  flex: 1;
  padding: 7px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
}
.pe-input:focus { outline: none; border-color: #2563eb; }
.pe-select {
  padding: 7px 6px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 12px;
  background: white;
}
.pe-search-btn {
  padding: 7px 14px;
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.pe-search-btn:hover { background: #1d4ed8; }
.pe-search-btn:disabled { background: #93c5fd; cursor: not-allowed; }
.pe-status { font-size: 12px; color: #6b7280; margin-top: 6px; min-height: 16px; }
.pe-results { flex: 1; }

/* Shopify画像カルーセル */
.shopify-carousel {
  margin-top: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px;
  background: #fafafa;
}
.shopify-carousel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 12px;
  color: #6b7280;
}
.shopify-carousel-track {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
}
.shopify-carousel-track::-webkit-scrollbar { height: 4px; }
.shopify-carousel-track::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 2px; }
.shopify-carousel-item {
  flex: 0 0 auto;
  width: 120px;
  scroll-snap-align: start;
  position: relative;
  border: 2px solid transparent;
  border-radius: 6px;
  transition: border-color 0.2s, box-shadow 0.2s;
  cursor: pointer;
}
.shopify-carousel-item:hover { border-color: #93c5fd; }
.shopify-carousel-item.drag-over {
  border-color: #f59e0b;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
  background: #fffbeb;
}
.shopify-carousel-item img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}
.shopify-carousel-item .position-badge {
  position: absolute;
  top: 4px; left: 4px;
  background: rgba(0,0,0,0.6);
  color: white;
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 3px;
}
.shopify-carousel-item .alt-text {
  font-size: 10px;
  color: #6b7280;
  text-align: center;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 画像差し替え確認ダイアログ */
.image-replace-dialog {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.image-replace-content {
  background: white;
  border-radius: 12px;
  padding: 20px;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.image-replace-comparison { display: flex; gap: 12px; margin: 12px 0; }
.image-replace-side { flex: 1; text-align: center; }
.image-replace-side img {
  width: 100%;
  max-height: 160px;
  object-fit: contain;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
}
.image-replace-side .label { font-size: 11px; color: #6b7280; margin-top: 4px; }
.image-replace-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.image-replace-actions button {
  padding: 6px 16px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  border: 1px solid #d1d5db;
}
.image-replace-actions .confirm-btn { background: #2563eb; color: white; border: none; }
.image-replace-actions .confirm-btn:disabled { background: #93c5fd; cursor: not-allowed; }
.image-replace-actions .cancel-btn { background: white; }
.image-replace-actions .cancel-btn:hover { background: #f3f4f6; }
.moq-product-card:hover { background: #f0f0f0; }

/* --- Judge.me レビュー投入 --- */
.judgeme-sub-panel { display:none; }
.judgeme-sub-panel.active { display:block; }
.judgeme-stats-cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:8px; margin-bottom:12px; }
.judgeme-stat-card { background:#f9fafb; border:1px solid #e5e7eb; border-radius:6px; padding:10px; text-align:center; }
.judgeme-stat-card.posted { border-left:3px solid #22c55e; }
.judgeme-stat-card.pending { border-left:3px solid #3b82f6; }
.judgeme-stat-card.lowrate { border-left:3px solid #f59e0b; }
.judgeme-stat-card.failed { border-left:3px solid #ef4444; }
.judgeme-stat-value { font-size:20px; font-weight:700; color:#1f2937; }
.judgeme-stat-label { font-size:11px; color:#6b7280; }
.judgeme-table { width:100%; border-collapse:collapse; font-size:12px; }
.judgeme-table th { background:#f9fafb; padding:6px 8px; text-align:left; border-bottom:1px solid #e5e7eb; font-weight:600; color:#374151; white-space:nowrap; }
.judgeme-table td { padding:5px 8px; border-bottom:1px solid #f3f4f6; color:#374151; }
.judgeme-table tr:hover { background:#f9fafb; }
.judgeme-status-badge { display:inline-block; padding:2px 8px; border-radius:10px; font-size:11px; font-weight:500; }
.judgeme-status-badge.posted { background:#dcfce7; color:#16a34a; }
.judgeme-status-badge.failed { background:#fef2f2; color:#dc2626; }
.judgeme-status-badge.lowrate { background:#fef9c3; color:#ca8a04; }
.judgeme-action-btn { padding:6px 14px; font-size:12px; border:1px solid #d1d5db; border-radius:4px; background:#fff; cursor:pointer; }
.judgeme-action-btn:hover { background:#f3f4f6; }
.judgeme-action-btn.post { background:#3b82f6; color:#fff; border-color:#3b82f6; }
.judgeme-action-btn.post:hover { background:#2563eb; }
.judgeme-page-btn { padding:4px 10px; font-size:12px; border:1px solid #d1d5db; border-radius:4px; background:#fff; cursor:pointer; }
.judgeme-page-btn:hover { background:#f3f4f6; }
.judgeme-review-card { border:1px solid #e5e7eb; padding:12px; margin:8px 0; border-radius:6px; background:#fff; }
.judgeme-review-card:hover { border-color:#d1d5db; }
.judgeme-approve-btn { padding:4px 12px; font-size:12px; border:none; border-radius:4px; background:#22c55e; color:#fff; cursor:pointer; }
.judgeme-approve-btn:hover { background:#16a34a; }
.judgeme-reject-btn { padding:4px 12px; font-size:12px; border:none; border-radius:4px; background:#ef4444; color:#fff; cursor:pointer; }
.judgeme-reject-btn:hover { background:#dc2626; }
/* キュー: ヘッダー固定 */
.judgeme-queue-header { position:sticky; top:0; z-index:10; background:#fff; padding-bottom:4px; }
.judgeme-queue-filters { display:flex; gap:8px; margin-bottom:8px; flex-wrap:wrap; align-items:center; }
.judgeme-queue-scroll { max-height:calc(100vh - 220px); overflow-y:auto; }
.judgeme-queue-scroll .judgeme-table thead th { position:sticky; top:0; z-index:5; background:#f9fafb; border-bottom:2px solid #e5e7eb; }
/* ストアバッジ */
.judgeme-store-badge { display:inline-block; padding:1px 6px; border-radius:8px; font-size:10px; font-weight:500; margin-right:2px; background:#f3f4f6; color:#6b7280; }
.judgeme-store-badge.posted { background:#dcfce7; color:#16a34a; }
.judgeme-store-badge.pending { background:#dbeafe; color:#2563eb; }
.judgeme-store-badge.failed { background:#fef2f2; color:#dc2626; }
/* 低評価: 購入履歴 */
.judgeme-lr-history { margin-top:8px; padding:8px; background:#f9fafb; border-radius:4px; border:1px solid #e5e7eb; }

/* === ギフティング管理 === */
.gifting-sub-tab-btn { padding:4px 12px; border:1px solid #d1d5db; background:#fff; font-size:11px; cursor:pointer; color:#6b7280; border-radius:12px; transition:all 0.15s; }
.gifting-sub-tab-btn.active { background:#4f46e5; color:#fff; border-color:#4f46e5; font-weight:600; }
.gifting-view-btn { padding:3px 10px; border:1px solid #d1d5db; background:#fff; font-size:10px; cursor:pointer; color:#6b7280; border-radius:4px; }
.gifting-view-btn.active { background:#374151; color:#fff; border-color:#374151; }
.gifting-toolbar { flex-shrink:0; padding-top:8px; padding-bottom:8px; }
.gifting-archive-toggle { display:inline-flex; align-items:center; gap:var(--space-1); color:var(--text-tertiary); font-size:var(--font-size-xs); cursor:pointer; white-space:nowrap; }
.gifting-archive-toggle input { margin:0; }
.gifting-campaign-name-cell { display:flex; align-items:center; gap:var(--space-2); min-width:220px; }
.gifting-campaign-name-cell .badge { flex:none; }
.gifting-campaign-archive-btn { margin-left:auto; padding:2px 7px; border:1px solid var(--border-medium); border-radius:var(--radius-sm); background:var(--bg-surface); color:var(--text-secondary); font-size:var(--font-size-xs); cursor:pointer; white-space:nowrap; }
.gifting-campaign-archive-btn:hover { background:var(--bg-hover); }

.gifting-table { border-collapse:separate; border-spacing:0; width:100%; font-size:11px; }
.gifting-table thead { background:#f3f4f6; }
.gifting-table th, .gifting-table td { padding:6px 8px; border:1px solid #e5e7eb; text-align:left; border-top:none; border-left:none; }
.gifting-table th:first-child, .gifting-table td:first-child { border-left:1px solid #e5e7eb; }
.gifting-table thead tr:first-child th { border-top:1px solid #e5e7eb; }
.gifting-table th { font-weight:600; color:#374151; font-size:10px; white-space:nowrap; position:sticky; top:0; z-index:3; background:#f3f4f6; }
.gifting-table tbody tr:hover { background:#f9fafb; }
/* 展開中キャンペーン行のsticky */
.camp-row-sticky td { position:sticky; top:28px; z-index:2; background:#fff; }
/* アコーディオン内テーブルヘッダー（stickyを無効化して通常配置） */
.camp-detail-row .gifting-table th { position:static; }
.gifting-notes-input { width:100%; border:none; background:transparent; font-size:11px; padding:2px 4px; outline:none; }
.gifting-notes-input:focus { background:#eff6ff; border-radius:2px; }

/* カンバン */
.gifting-kanban { display:flex; gap:8px; overflow-x:auto; flex:1; min-height:0; }
.gifting-kanban-col { flex:0 0 180px; background:#f9fafb; border-radius:8px; padding:6px; display:flex; flex-direction:column; min-height:0; }
.gifting-kanban-header { font-size:11px; font-weight:600; padding:4px 6px 6px; margin-bottom:6px; border-bottom:2px solid #d1d5db; flex-shrink:0; }
.gifting-kanban-cards { flex:1; overflow-y:auto; min-height:0; }
#giftingInfluencerPanel { flex:1; display:flex; flex-direction:column; min-height:0; }
#giftingInfluencerKanban { flex:1; display:flex; flex-direction:column; min-height:0; }
.gifting-kanban-card { position:relative; background:#fff; border:1px solid #e5e7eb; border-radius:6px; padding:8px; margin-bottom:6px; cursor:pointer; transition:box-shadow 0.15s; }
.gifting-kanban-card:hover { box-shadow:0 2px 8px rgba(0,0,0,0.08); }
.gifting-card-btn { margin-top:6px; padding:2px 8px; font-size:10px; background:#4f46e5; color:#fff; border:none; border-radius:4px; cursor:pointer; }
.gifting-card-btn:hover { background:#4338ca; }
.gifting-status-forward-btn { background:#059669; width:100%; }
.gifting-status-forward-btn:hover { background:#047857; }
.gifting-status-revert-btn { position:absolute; top:6px; right:6px; width:22px; height:22px; border-radius:50%; background:#e5e7eb; border:none; cursor:pointer; font-size:12px; line-height:22px; text-align:center; color:#6b7280; padding:0; }
.gifting-status-revert-btn:hover { background:#d1d5db; color:#374151; }

/* スライドインパネル */
.gifting-slide-panel { position:fixed; top:0; right:-400px; width:380px; height:100vh; background:#fff; box-shadow:-4px 0 16px rgba(0,0,0,0.1); transition:right 0.25s ease; z-index:1000; overflow-y:auto; }
.gifting-slide-panel.open { right:0; }

/* モーダル */
.gifting-modal-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.3); display:flex; align-items:center; justify-content:center; z-index:1100; }
.gifting-modal { background:#fff; border-radius:12px; padding:20px; width:90%; max-width:360px; box-shadow:0 8px 32px rgba(0,0,0,0.15); }
.gifting-modal .gifting-route-option { display:flex; margin-bottom:0; }
.gifting-modal .gifting-route-option input[type="radio"] { width:auto; flex:0 0 auto; margin:0; padding:0; }

/* ステータスバッジ */
.gifting-status-badge { padding:2px 8px; border-radius:10px; font-size:10px; font-weight:600; white-space:nowrap; }
.gifting-line-badge{display:inline-flex;align-items:center;justify-content:center;background:#fff;color:var(--color-line-brand);border:1.5px solid var(--color-line-brand);font-size:9px;font-weight:var(--font-weight-semibold);padding:0 5px;border-radius:2px;margin-left:var(--space-1);vertical-align:middle;line-height:1.5;}
.gifting-status-candidate { background:#f3f4f6; color:#6b7280; }
.gifting-status-attack { background:#fef3c7; color:#92400e; }
.gifting-status-interested { background:#cffafe; color:#0e7490; }
.gifting-status-application { background:#dbeafe; color:#1e40af; }
.gifting-status-shipping { background:#ede9fe; color:#5b21b6; }
.gifting-template-campaigns {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.gifting-template-campaign-cell {
  min-width: 150px;
}
.gifting-template-campaign-trigger {
  display: flex;
  width: 100%;
  min-height: 32px;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  text-align: left;
}
.gifting-template-campaign-trigger:hover,
.gifting-template-campaign-trigger:focus-visible {
  border-color: var(--color-primary-light);
  background: var(--color-primary-subtle);
  outline: none;
}
.gifting-used-campaign-chip {
  display: inline-flex;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--color-info-subtle);
  color: var(--color-info);
  font-size: var(--font-size-xs);
}
.gifting-template-campaign-edit {
  flex: 0 0 auto;
  color: var(--color-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}
.gifting-template-campaign-picker {
  width: min(92vw, 560px);
  max-width: 560px;
}
.gifting-template-campaign-picker-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}
.gifting-template-campaign-picker-head h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-lg);
}
.gifting-template-campaign-picker-head p {
  margin: var(--space-1) 0 0;
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}
.gifting-template-campaign-picker-status {
  min-height: 18px;
  margin-top: var(--space-3);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}
.gifting-template-campaign-picker-list {
  display: grid;
  max-height: min(52vh, 420px);
  margin-top: var(--space-1);
  overflow: auto;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
}
.gifting-template-campaign-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
}
.gifting-template-campaign-option:last-child {
  border-bottom: none;
}
.gifting-template-campaign-option:hover {
  background: var(--bg-subtle);
}
.gifting-template-campaign-option input {
  margin-top: 2px;
  accent-color: var(--color-primary);
}
.gifting-template-campaign-option span {
  display: grid;
  gap: 2px;
}
.gifting-template-campaign-option strong {
  color: var(--text-primary);
  font-size: var(--font-size-base);
}
.gifting-template-campaign-option small {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}
.gifting-template-campaign-picker-error {
  min-height: 18px;
  margin-top: var(--space-2);
  color: var(--color-danger);
  font-size: var(--font-size-sm);
}
.gifting-template-campaign-picker-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.gifting-template-empty {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}
.gifting-template-table-root {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
/* .toolbar(base)が後ろで height:var(--toolbar-height) を定義しており、同一詳細度だとソース順で
   固定高さが勝ってwrap時に中身がはみ出しsticky theadに重なる。詳細度を1段上げて height:auto を勝たせる */
.toolbar.gifting-template-toolbar {
  flex-wrap: wrap;
  height: auto;
  min-height: var(--toolbar-height);
  align-items: center;
}
.gifting-template-toolbar-filters,
.gifting-template-toolbar-actions,
.gifting-template-chip-group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
/* spacer廃止の代替: filtersが残余幅を取りactionsを右へ押し出す。狭い時はfilters内部でwrap */
.gifting-template-toolbar-filters {
  flex: 1 1 auto;
  min-width: 0;
}
.gifting-template-toolbar-actions {
  flex: 0 0 auto;
}
.gifting-template-search {
  width: min(100%, 220px);
}
.gifting-template-select {
  min-width: 140px;
}
.gifting-template-table {
  min-width: 980px;
}
.gifting-template-table td {
  text-align: left;
}
.gifting-template-drag-col,
.gifting-template-drag-cell {
  width: 24px;
  text-align: center !important;
}
.tmpl-drag-handle {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  cursor: grab;
  user-select: none;
}
.gifting-template-drag-disabled {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}
.gifting-template-name-cell strong {
  color: var(--text-primary);
}
.gifting-template-pdf-icon {
  color: var(--color-primary);
  font-size: var(--font-size-xs);
}
.gifting-template-preview-cell {
  max-width: 200px;
  color: var(--text-tertiary);
  cursor: pointer;
}
.gifting-template-actions-col,
.gifting-template-actions-cell {
  white-space: nowrap;
}
.gifting-template-actions-cell {
  text-align: right !important;
}
.gifting-template-copy-btn {
  color: var(--color-primary);
}
.gifting-template-delete-btn {
  color: var(--color-danger);
}
.tmpl-img-container,
.tmpl-canva-container {
  display: flex;
  gap: 3px;
  align-items: center;
  flex-wrap: nowrap;
}
.tmpl-img-container {
  min-width: 40px;
}
.tmpl-canva-container {
  min-width: 30px;
}
.tmpl-img-thumb,
.tmpl-img-video,
.tmpl-img-add {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.tmpl-img-thumb {
  object-fit: cover;
  cursor: pointer;
}
.tmpl-img-video {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--text-primary);
  cursor: pointer;
}
.tmpl-media-thumb {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: var(--text-primary);
  cursor: pointer;
  object-fit: cover;
}
.tmpl-media-compact { width: 44px; height: 36px; }
.tmpl-media-medium { width: 60px; height: 60px; }
.tmpl-media-large { width: 80px; height: 80px; }
.tmpl-media-preview { width: 100px; height: 100px; }
.tmpl-media-video > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tmpl-media-play {
  position: relative;
  z-index: 1;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: rgba(17, 24, 39, 0.72);
}
.tmpl-media-play svg {
  width: 14px;
  height: 14px;
  fill: var(--text-inverse);
}
.tmpl-media-video-status {
  position: absolute;
  right: 2px;
  bottom: 2px;
  z-index: 2;
  padding: 1px 3px;
  border-radius: 3px;
  background: rgba(17, 24, 39, 0.86);
  color: var(--text-inverse);
  font-size: 8px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.15;
  text-align: right;
}
.tmpl-media-compact .tmpl-media-play {
  width: 18px;
  height: 18px;
  transform: translate(-7px, -4px);
}
.tmpl-media-compact .tmpl-media-video-status {
  font-size: 6px;
}
.tmpl-img-add {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--border-medium);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
}
.tmpl-canva-link,
.tmpl-canva-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.tmpl-canva-link {
  border: 1px solid var(--color-primary-light);
  color: var(--color-primary);
  text-decoration: none;
  font-size: var(--font-size-xs);
}
.tmpl-canva-add {
  border: 1px dashed var(--border-medium);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
}
.gifting-status-shipped { background:#d1fae5; color:#065f46; }
.gifting-status-completed { background:#a7f3d0; color:#047857; }
.gifting-status-stories-done { background:#bae6fd; color:#0369a1; }
.gifting-status-material-done { background:#ddd6fe; color:#5b21b6; }
.gifting-status-done { background:#dcfce7; color:#166534; }

/* 列設定モーダル */
.col-setting-item { display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid #e5e7eb; border-radius:6px; margin-bottom:4px; background:#fff; cursor:grab; }
.col-setting-item:active { cursor:grabbing; }
.col-drag-handle { color:#9ca3af; font-size:14px; cursor:grab; }

/* ==========================================================
   🌱 プラント育成ゲーム — レトロゲーム機風デザイン
   自社システムから完全分離したスコープ付きスタイル
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

/* --- ゲーム機フレーム --- */
.plant-game-frame {
  max-width: 450px;
  margin: 16px auto 0;
  background: linear-gradient(145deg, #c8c0b8, #a8a098);
  border-radius: 20px 20px 60px 60px;
  padding: 16px 16px 32px;
  box-shadow:
    0 8px 32px rgba(0,0,0,0.3),
    inset 0 2px 0 rgba(255,255,255,0.3),
    inset 0 -2px 0 rgba(0,0,0,0.2);
  font-family: 'Press Start 2P', monospace;
  position: relative;
  image-rendering: pixelated;
  transform-origin: top center;
}

.plant-game-frame * {
  font-family: 'Press Start 2P', monospace;
}

/* --- ヘッダー --- */
.plant-game-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px 12px;
}

.plant-game-logo {
  font-size: 9px;
  color: #4B4845;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}

.plant-game-close {
  font-size: 16px;
  color: #8B8580;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.15s;
}

.plant-game-close:hover {
  background: rgba(0,0,0,0.1);
  color: #4B4845;
  transform: scale(1.2);
}

/* --- スクリーン（液晶画面） --- */
.plant-game-screen {
  background: #9bbc0f;
  border-radius: 12px;
  border: 6px solid #4B4845;
  box-shadow:
    inset 0 0 30px rgba(0,0,0,0.15),
    inset 0 0 6px rgba(0,0,0,0.3),
    0 3px 6px rgba(0,0,0,0.2);
  height: 280px;
  position: relative;
  overflow: hidden;
  image-rendering: pixelated;
}

/* 背景: 空 */
.plant-game-sky {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 60%;
  background: linear-gradient(180deg, #8BAC0F 0%, #9BBC0F 100%);
}

/* 雲 */
.plant-game-cloud {
  position: absolute;
  width: 42px; height: 14px;
  background: rgba(255,255,255,0.5);
  border-radius: 7px;
  box-shadow:
    -14px 4px 0 8px rgba(255,255,255,0.35),
    14px 4px 0 8px rgba(255,255,255,0.35);
  z-index: 2;
}

.plant-game-cloud-1 {
  top: 50px; left: -80px;
  animation: plantCloudMove1 20s linear infinite;
}

.plant-game-cloud-2 {
  top: 100px; left: -80px;
  animation: plantCloudMove2 28s linear infinite;
}

@keyframes plantCloudMove1 {
  0% { transform: translateX(-80px); }
  100% { transform: translateX(calc(100% + 700px)); }
}

@keyframes plantCloudMove2 {
  0% { transform: translateX(700px); }
  100% { transform: translateX(-180px); }
}

/* --- ピクセルアート --- */
.plant-game-art-area {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.plant-game-pixel {
  width: 1px; height: 1px;
  position: relative;
  transition: box-shadow 0.5s ease, filter 0.5s ease;
}

/* バウンスアニメーション（水やり時） */
.plant-game-bounce {
  animation: plantBounce 0.5s ease;
}

@keyframes plantBounce {
  0% { transform: translateY(0); }
  20% { transform: translateY(-8px) scaleY(1.1); }
  40% { transform: translateY(0) scaleY(0.9); }
  60% { transform: translateY(-4px); }
  80% { transform: translateY(0) scaleY(0.95); }
  100% { transform: translateY(0) scaleY(1); }
}

/* しおれ状態 */
.plant-game-wilted .plant-game-screen {
  background: #7a8a0a;
  filter: saturate(0.4) brightness(0.85);
}

.plant-game-wilted .plant-game-pixel {
  filter: grayscale(0.6) brightness(0.7);
  transform: skewX(-5deg);
}

.plant-game-wilted-text {
  color: #5a4a00;
  font-size: 18px;
  animation: plantWiltPulse 1.5s ease-in-out infinite;
}

@keyframes plantWiltPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* --- ステータスオーバーレイ --- */
.plant-game-status-overlay {
  position: absolute;
  top: 12px; left: 16px; right: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  color: #306230;
  z-index: 10;
}

.plant-game-streak {
  font-size: 16px;
  animation: plantStreakGlow 1s ease-in-out infinite alternate;
}

@keyframes plantStreakGlow {
  0% { color: #306230; }
  100% { color: #0F380F; text-shadow: 0 0 4px rgba(15,56,15,0.5); }
}

/* --- セリフ吹き出し --- */
.plant-game-speech {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, 60px);
  z-index: 10;
  background: rgba(15,56,15,0.15);
  color: #0F380F;
  font-size: 16px;
  padding: 8px 18px;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 10;
  animation: plantSpeechPop 0.4s ease;
}

@keyframes plantSpeechPop {
  0% { transform: translate(-50%, 60px) scale(0); opacity: 0; }
  60% { transform: translate(-50%, 60px) scale(1.1); }
  100% { transform: translate(-50%, 60px) scale(1); opacity: 1; }
}

/* --- 虹エフェクト --- */
.plant-game-rainbow {
  position: absolute;
  top: 20px; left: 60px;
  width: 160px; height: 80px;
  border-radius: 160px 160px 0 0;
  border: 3px solid transparent;
  border-top-color: rgba(255,0,0,0.3);
  box-shadow:
    0 -3px 0 rgba(255,127,0,0.25),
    0 -6px 0 rgba(255,255,0,0.2),
    0 -9px 0 rgba(0,200,0,0.2),
    0 -12px 0 rgba(0,0,255,0.15),
    0 -15px 0 rgba(75,0,130,0.1);
  animation: plantRainbowIn 1s ease forwards;
  z-index: 5;
}

@keyframes plantRainbowIn {
  0% { opacity: 0; transform: scale(0.5); }
  50% { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0.7; transform: scale(1); }
}

/* --- コントロールパネル --- */
.plant-game-controls {
  padding: 20px 8px 8px;
}

/* ゲージ */
.plant-game-gauges {
  margin-bottom: 8px;
}

.plant-game-gauge-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.plant-game-gauge-label {
  font-size: 11px;
  color: #4B4845;
  width: 90px;
  flex-shrink: 0;
}

.plant-game-gauge-bar {
  flex: 1;
  height: 14px;
  background: #D5CFC5;
  border-radius: 3px;
  border: 2px solid #8B8580;
  overflow: hidden;
  image-rendering: pixelated;
}

.plant-game-gauge-fill {
  height: 100%;
  transition: width 0.6s ease;
  image-rendering: pixelated;
  /* ピクセル風ステップ表現 */
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0px,
    transparent 3px,
    rgba(0,0,0,0.1) 3px,
    rgba(0,0,0,0.1) 4px
  );
}

.plant-game-gauge-val {
  font-size: 11px;
  color: #4B4845;
  width: 80px;
  text-align: right;
  flex-shrink: 0;
}

.plant-game-gauge-val.plant-game-max {
  color: #D97706;
  width: auto;
  animation: plantMaxPulse 2s ease-in-out infinite;
}

@keyframes plantMaxPulse {
  0%, 100% { color: #D97706; }
  50% { color: #F472B6; text-shadow: 0 0 4px rgba(244,114,182,0.3); }
}

/* --- ボタン --- */
.plant-game-buttons {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.plant-game-btn {
  flex: 1;
  font-size: 18px;
  padding: 6px 8px;
  border: 3px solid #4B4845;
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  line-height: 1.6;
  transition: all 0.1s;
  box-shadow:
    0 3px 0 #4B4845,
    0 4px 4px rgba(0,0,0,0.2);
  position: relative;
  top: 0;
}

.plant-game-btn:active:not([disabled]) {
  top: 3px;
  box-shadow: 0 0 0 #4B4845;
  transform: scale(0.97);
}

.plant-game-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

.plant-game-btn-water {
  background: linear-gradient(180deg, #7DD3FC, #38BDF8);
  color: #0C4A6E;
}

.plant-game-btn-water:hover:not([disabled]) {
  background: linear-gradient(180deg, #BAE6FD, #7DD3FC);
}

.plant-game-btn-feed {
  background: linear-gradient(180deg, #86EFAC, #22C55E);
  color: #14532D;
}

.plant-game-btn-feed:hover:not([disabled]) {
  background: linear-gradient(180deg, #BBF7D0, #86EFAC);
}

.plant-game-btn-cost {
  font-size: 14px;
  opacity: 0.7;
}

/* --- フィード（下部情報） --- */
.plant-game-feed {
  font-size: 16px;
  color: #6B6560;
  text-align: center;
  padding: 8px 0;
  border-top: 1px dashed #C5BFB5;
}

/* --- ゲーム機下部装飾 --- */
.plant-game-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 30px 0;
}

/* 十字キー */
.plant-game-dpad {
  position: relative;
  width: 50px; height: 50px;
}

.plant-game-dpad-v, .plant-game-dpad-h {
  position: absolute;
  background: #4B4845;
  border-radius: 3px;
}

.plant-game-dpad-v {
  width: 16px; height: 50px;
  left: 17px; top: 0;
}

.plant-game-dpad-h {
  width: 50px; height: 16px;
  left: 0; top: 17px;
}

/* A/Bボタン */
.plant-game-ab {
  display: flex;
  gap: 16px;
  align-items: center;
  transform: rotate(-15deg);
}

.plant-game-btn-a, .plant-game-btn-b {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #8B3060;
  color: rgba(255,255,255,0.5);
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 0 #5A2040, inset 0 -2px 3px rgba(0,0,0,0.2);
}

.plant-game-btn-b {
  margin-top: 10px;
}

/* --- アニメーション --- */

/* スライドイン */
.plant-game-slide-in {
  animation: plantSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes plantSlideIn {
  0% { transform: translateY(40px) scale(0.8); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* スライドアウト */
.plant-game-slide-out {
  animation: plantSlideOut 0.4s ease forwards;
}

@keyframes plantSlideOut {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(40px) scale(0.8); opacity: 0; }
}

/* 起動フラッシュ */
.plant-game-boot-flash {
  position: absolute;
  inset: 0;
  background: #9bbc0f;
  z-index: 50;
  animation: plantBootFlash 0.8s ease forwards;
}

@keyframes plantBootFlash {
  0% { opacity: 1; background: #E8F5E9; }
  30% { opacity: 1; background: #C8E6C9; }
  60% { opacity: 0.5; }
  100% { opacity: 0; }
}

/* 白フラッシュ（レベルアップ） */
.plant-game-flash {
  position: absolute;
  inset: 0;
  background: #fff;
  z-index: 40;
  animation: plantFlash 0.6s ease forwards;
}

@keyframes plantFlash {
  0% { opacity: 1; }
  30% { opacity: 0.8; }
  100% { opacity: 0; }
}

/* レベルアップテキスト */
.plant-game-levelup {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  color: #0F380F;
  text-align: center;
  line-height: 2;
  z-index: 45;
  text-shadow: 0 0 8px rgba(155,188,15,0.8);
  animation: plantLevelUp 2.5s ease forwards;
}

@keyframes plantLevelUp {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  15% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
  30% { transform: translate(-50%, -50%) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -60%) scale(1); }
}

/* パーティクル */
@keyframes plantParticleFly {
  0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; }
}

/* 水滴 */
@keyframes plantWaterFall {
  0% { opacity: 0; transform: translateY(0); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translateY(50px); }
}

/* フローティングテキスト */
@keyframes plantFloatUp {
  0% { opacity: 0; transform: translate(-50%, 0); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -30px); }
}

/* --- 情報オーバーレイ --- */
.plant-game-info-overlay {
  position: absolute;
  inset: 0;
  background: rgba(75, 72, 69, 0.85);
  border-radius: 20px 20px 60px 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 60;
}

.plant-game-info-box {
  background: #F5F0E8;
  border: 4px solid #4B4845;
  border-radius: 12px;
  padding: 24px;
  width: 70%;
  box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}

.plant-game-info-title {
  font-size: 22px;
  color: #4B4845;
  text-align: center;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 3px dashed #C5BFB5;
}

.plant-game-info-row {
  font-size: 16px;
  color: #4B4845;
  padding: 10px 0;
  border-bottom: 1px dotted #D5CFC5;
}

.plant-game-btn-close-info {
  margin-top: 18px;
  width: 100%;
  font-size: 18px;
  padding: 14px;
  background: linear-gradient(180deg, #D5CFC5, #C5BFB5);
  color: #4B4845;
  border: 2px solid #4B4845;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 2px 0 #4B4845;
}

.plant-game-btn-close-info:active {
  box-shadow: none;
  transform: translateY(2px);
}

/* フェードイン/アウト */
@keyframes plantFadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes plantFadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* === システムAGT === */
.sagt-header { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid #e2e8f0; flex-wrap: wrap; }
.sagt-tabs { display: flex; gap: 2px; flex-wrap: wrap; flex: 1; }
.sagt-tab { padding: 4px 10px; border: none; background: none; cursor: pointer; font-size: 11px; color: #64748b; border-radius: 4px; }
.sagt-tab:hover { background: #f1f5f9; }
.sagt-tab.active { background: #3b82f6; color: #fff; }
.sagt-tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; margin-left: 3px; border-radius: 8px; font-size: 10px; font-weight: 600; background: #e2e8f0; color: #475569; line-height: 1; }
.sagt-tab.active .sagt-tab-count { background: rgba(255,255,255,0.3); color: #fff; }
.sagt-new-btn { padding: 6px 14px; background: #3b82f6; color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 12px; white-space: nowrap; }
.sagt-new-btn:hover { background: #2563eb; }

.sagt-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sagt-table th { text-align: left; padding: 8px 10px; border-bottom: 2px solid #e2e8f0; color: #64748b; font-size: 11px; font-weight: 600; }
.sagt-table td { padding: 8px 10px; border-bottom: 1px solid #f1f5f9; }
.sagt-row { cursor: pointer; }
.sagt-row:hover { background: #f8fafc; }
.sagt-list-cancel-btn { padding: 4px 10px; border: 1px solid #fecaca; border-radius: 6px; background: #fff; color: #dc2626; cursor: pointer; font-size: 12px; white-space: nowrap; }
.sagt-list-cancel-btn:hover { background: #fef2f2; }
.sagt-list-cancel-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.sagt-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; color: #fff; font-size: 11px; font-weight: 600; }

.prov-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  white-space: nowrap;
  vertical-align: middle;
  margin-left: var(--space-1);
}
.prov-col {
  width: 7%;
}
/* セッション履歴の「実行」列（provider＋モデル＋思考の深さ）。モデル名が入るので prov-col より広い */
.runtime-col {
  width: 14%;
}
.prov-codex {
  background: var(--color-primary-subtle);
  color: var(--color-primary-active);
}
.prov-claude {
  background: var(--color-warning-subtle);
  color: var(--color-warning-text);
}
.prov-openclaw {
  background: var(--color-success-subtle);
  color: var(--color-success-text);
}
.prov-goose {
  background: var(--color-info-subtle);
  color: var(--color-info);
}

/* フォーム */
.sagt-form-wrap { max-width: 1000px; margin: 0 auto; padding: 20px; }
.sagt-form-title { margin: 0 0 16px; font-size: 16px; color: #1e293b; }
.sagt-form-group { margin-bottom: 16px; }
.sagt-form-group label { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 600; color: #374151; }
.sagt-required { color: #ef4444; }
.sagt-form-group input[type="text"], .sagt-form-group textarea { width: 100%; padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 13px; box-sizing: border-box; }
.sagt-form-group textarea { resize: vertical; }
.sagt-form-actions { display: flex; gap: 8px; justify-content: flex-end; }
.sagt-submit-btn { padding: 8px 20px; background: #3b82f6; color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 13px; }
.sagt-submit-btn:hover { background: #2563eb; }
.sagt-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.sagt-cancel-btn { padding: 8px 20px; background: #f1f5f9; color: #64748b; border: 1px solid #e2e8f0; border-radius: 6px; cursor: pointer; font-size: 13px; }
.sagt-cancel-btn:hover { background: #e2e8f0; }
.sagt-danger-btn { padding: 8px 20px; background: #ef4444; color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 13px; }
.sagt-danger-btn:hover { background: #dc2626; }

/* スクショ */
.sagt-screenshots { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.sagt-screenshot-item { position: relative; width: 100px; height: 100px; }
.sagt-screenshot-item img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; border: 1px solid #e2e8f0; cursor: pointer; }
.sagt-screenshot-remove { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; background: #ef4444; color: #fff; border: none; cursor: pointer; font-size: 12px; line-height: 20px; padding: 0; }
.sagt-paste-hint { margin-bottom: 8px; padding: 10px 12px; border: 1px dashed #94a3b8; border-radius: 6px; background: #f8fafc; color: #64748b; font-size: 12px; cursor: text; outline: none; }
.sagt-paste-hint:focus { border-color: #3b82f6; background: #eff6ff; color: #1d4ed8; }
.sagt-upload-btn { display: inline-block; padding: 6px 14px; background: #f1f5f9; border: 1px dashed #94a3b8; border-radius: 6px; cursor: pointer; font-size: 12px; color: #64748b; }
.sagt-upload-btn:hover { background: #e2e8f0; }

/* 画像拡大 */
.sagt-image-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.8); display: flex; align-items: center; justify-content: center; z-index: 10000; cursor: pointer; }
.sagt-image-overlay img { max-width: 90vw; max-height: 90vh; border-radius: 8px; }
.sagt-image-close { position: absolute; top: 20px; right: 20px; background: none; border: none; color: #fff; font-size: 32px; cursor: pointer; }

/* 詳細ビュー */
#aiSystemAgt { overflow-y: auto !important; }
.sagt-detail { padding: 12px; }
.sagt-detail-header { margin-bottom: 16px; }
.sagt-back-btn { background: none; border: none; color: #3b82f6; cursor: pointer; font-size: 13px; padding: 4px 0; margin-bottom: 8px; }
.sagt-back-btn:hover { text-decoration: underline; }
.sagt-detail-title-row { display: flex; align-items: center; gap: 8px; }
.sagt-detail-id { color: #94a3b8; font-size: 14px; font-weight: 600; }
.sagt-detail-title { margin: 0; font-size: 16px; color: #1e293b; flex: 1; }
.sagt-detail-meta { color: #94a3b8; font-size: 12px; margin-top: 4px; }
.sagt-detail-section { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #f1f5f9; }
.sagt-detail-section h4 { margin: 0 0 8px; font-size: 13px; color: #64748b; }
.sagt-detail-desc { font-size: 13px; color: #1e293b; line-height: 1.6; }
.sagt-detail-screenshots { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.sagt-screenshot-thumb { width: 120px; height: 90px; object-fit: cover; border-radius: 6px; border: 1px solid #e2e8f0; cursor: pointer; }
.sagt-screenshot-thumb:hover { opacity: 0.8; }

/* メッセージ */
.sagt-messages { max-height: 400px; overflow-y: auto; padding: 4px 0; }
.sagt-msg { margin-bottom: 8px; padding: 8px 12px; border-radius: 8px; font-size: 13px; }
.sagt-msg-agent { background: #eff6ff; border-left: 3px solid #3b82f6; }
.sagt-msg-user { background: #f0fdf4; border-left: 3px solid #10b981; }
.sagt-msg-status { background: #f8fafc; text-align: center; color: #94a3b8; font-size: 11px; border: none; }
.sagt-msg-plan { background: #faf5ff; border-left: 3px solid #8b5cf6; }
.sagt-msg-sender { font-weight: 600; font-size: 12px; color: #64748b; margin-bottom: 4px; }
.sagt-msg-content { color: #1e293b; line-height: 1.5; }
.sagt-msg-time { color: #94a3b8; font-size: 10px; margin-top: 4px; }
.sagt-msg-empty { color: #94a3b8; font-size: 12px; text-align: center; padding: 20px; }

/* アクション */
.sagt-actions { padding: 12px 0; }
.sagt-reply-area { display: flex; flex-direction: column; gap: 8px; }
.sagt-reply-area textarea { width: 100%; padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 13px; box-sizing: border-box; resize: vertical; }
.sagt-plan-actions { text-align: center; }
.sagt-plan-note { margin-bottom: 8px; font-size: 13px; color: #64748b; }
.sagt-plan-actions button { margin: 0 4px; }
.sagt-admin-actions { display: flex; flex-direction: column; gap: 8px; }
.sagt-admin-actions textarea { width: 100%; padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 13px; box-sizing: border-box; resize: vertical; }
.sagt-admin-btns { display: flex; gap: 8px; }
.sagt-cancel-request { margin-top: 12px; font-size: 12px; padding: 6px 12px; }

.sagt-header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.sagt-heartbeat-badge { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; line-height: 1.2; white-space: nowrap; border: 1px solid #e2e8f0; background: #f8fafc; color: #64748b; }
.sagt-heartbeat-badge.active { border-color: #bbf7d0; background: #f0fdf4; color: #15803d; }
.sagt-heartbeat-badge.inactive { border-color: #fecaca; background: #fef2f2; color: #b91c1c; }

/* ============================================================ */
/* ヒアリングUI（タブ形式）                                      */
/* ============================================================ */
.tl-hearing-container { background: #fefce8; border: 1px solid #fde68a; border-radius: 12px; padding: 16px; max-width: 100%; }
.tl-hearing-container.redefine { background: #fff7ed; border-color: #fed7aa; }
.tl-hearing-container.research { background: #eff6ff; border-color: #bfdbfe; }
.tl-hearing-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.tl-hearing-icon { font-size: 16px; }
.tl-hearing-title { font-size: 13px; font-weight: 600; color: #92400e; }
.tl-hearing-container.redefine .tl-hearing-title { color: #9a3412; }
.tl-hearing-container.research .tl-hearing-title { color: #1e40af; }
.tl-hearing-badge { background: #fbbf24; color: #78350f; font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 10px; }
.tl-hearing-container.redefine .tl-hearing-badge { background: #fb923c; color: #7c2d12; }
.tl-hearing-container.research .tl-hearing-badge { background: #60a5fa; color: #1e3a5f; }

/* タブ */
.tl-hearing-tabs { display: flex; gap: 0; margin-bottom: 0; }
.tl-hearing-tab { padding: 6px 16px; font-size: 12px; font-weight: 600; cursor: pointer; border: 1px solid #fde68a; border-bottom: none; border-radius: 8px 8px 0 0; background: #fffbeb; color: #92400e; transition: all 0.15s; user-select: none; }
.tl-hearing-tab.active { background: #fff; color: #1e293b; border-bottom-color: #fff; position: relative; z-index: 1; }
.tl-hearing-tab.answered { color: #15803d; }
.tl-hearing-tab.answered::after { content: " ✓"; }
.tl-hearing-container.redefine .tl-hearing-tab { border-color: #fed7aa; background: #fff7ed; color: #9a3412; }
.tl-hearing-container.research .tl-hearing-tab { border-color: #bfdbfe; background: #eff6ff; color: #1e40af; }
.tl-hearing-container.redefine .tl-hearing-tab.active,
.tl-hearing-container.research .tl-hearing-tab.active { background: #fff; color: #1e293b; }

/* タブ内容 */
.tl-hearing-body { border: 1px solid #fde68a; border-radius: 0 8px 8px 8px; background: #fff; padding: 14px; margin-bottom: 12px; }
.tl-hearing-container.redefine .tl-hearing-body { border-color: #fed7aa; }
.tl-hearing-container.research .tl-hearing-body { border-color: #bfdbfe; }
.tl-hearing-body[style*="display: none"] { display: none; }
.tl-hearing-q-text { font-size: 13px; color: #1e293b; font-weight: 500; line-height: 1.5; margin-bottom: 6px; }
.tl-hearing-reason { font-size: 11px; color: #92400e; margin-bottom: 12px; font-style: italic; }
.tl-hearing-container.redefine .tl-hearing-reason { color: #9a3412; }
.tl-hearing-container.research .tl-hearing-reason { color: #1e40af; }

/* 候補選択 */
.tl-hearing-candidates { display: flex; flex-direction: column; gap: 6px; }
.tl-hearing-candidate { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; cursor: pointer; transition: all 0.15s; font-size: 13px; color: #1e293b; }
.tl-hearing-candidate:hover { background: #fef3c7; border-color: #f59e0b; }
.tl-hearing-candidate input[type="radio"] { accent-color: #f59e0b; flex-shrink: 0; }
.tl-hearing-candidate.custom { background: #f8fafc; border-color: #e2e8f0; color: #64748b; }
.tl-hearing-container.redefine .tl-hearing-candidate { background: #fff7ed; border-color: #fed7aa; }
.tl-hearing-container.redefine .tl-hearing-candidate:hover { background: #ffedd5; border-color: #fb923c; }
.tl-hearing-container.research .tl-hearing-candidate { background: #eff6ff; border-color: #bfdbfe; }
.tl-hearing-container.research .tl-hearing-candidate:hover { background: #dbeafe; border-color: #60a5fa; }
.tl-hearing-custom-input { width: 100%; margin-top: 6px; padding: 8px 10px; font-size: 13px; border: 1px solid #e2e8f0; border-radius: 6px; resize: vertical; min-height: 40px; font-family: inherit; box-sizing: border-box; }
.tl-hearing-custom-input:focus { outline: none; border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1); }

/* アクションボタン */
.tl-hearing-actions { display: flex; gap: 8px; justify-content: flex-end; }
.tl-hearing-reverse-btn { padding: 6px 14px; font-size: 12px; color: #64748b; background: #fff; border: 1px solid #e2e8f0; border-radius: 6px; cursor: pointer; transition: all 0.15s; }
.tl-hearing-reverse-btn:hover { background: #f1f5f9; }
.tl-hearing-submit-btn { padding: 6px 14px; font-size: 12px; color: #fff; background: #f59e0b; border: none; border-radius: 6px; cursor: pointer; font-weight: 500; transition: all 0.15s; }
.tl-hearing-submit-btn:hover { background: #d97706; }
.tl-hearing-submit-btn:disabled { background: #fcd34d; cursor: not-allowed; }

/* モデル選択プルダウン */
.model-select-wrapper { display: inline-flex; align-items: center; gap: 4px; }
.model-select-wrapper select { font-size: 11px; padding: 2px 6px; border: 1px solid #e2e8f0; border-radius: 4px; background: #fff; color: #64748b; cursor: pointer; }
.model-version-badge { font-size: 9px; padding: 1px 5px; border-radius: 3px; font-weight: 600; }
.model-version-badge.v1 { background: #f1f5f9; color: #64748b; }
.model-version-badge.v2 { background: #dbeafe; color: #1e40af; }
.model-version-badge.v3 { background: #dcfce7; color: #166534; }
.model-version-badge.v4 { background: #fae8ff; color: #86198f; }

/* 旧STEP2セット最適化UI（フェーズ2で削除予定） */
#poFlowStep2 { display: none !important; }

/* セット最適化サマリー */
.setopt-summary {
  display: flex; align-items: center; gap: 10px; padding: 4px 12px;
  background: #f5f3ff; border-bottom: 1px solid #e5e7eb; font-size: 11px;
}
.setopt-badge {
  background: #7c3aed; color: #fff; font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: 3px;
}
.setopt-rec { font-weight: 600; color: #5b21b6; }
.setopt-cost { color: #374151; }
.setopt-surplus { color: #6b7280; }
.setopt-savings { color: #059669; font-weight: 600; }
.setopt-compare-btn, .setopt-detail-btn {
  background: #ede9fe; color: #7c3aed; border: 1px solid #c4b5fd;
  border-radius: 3px; padding: 1px 8px; font-size: 10px; cursor: pointer; font-weight: 500;
}
.setopt-compare-btn:hover, .setopt-detail-btn:hover { background: #ddd6fe; }

/* 比較ポップオーバー */
.setopt-compare-popover {
  position: fixed; z-index: 10002;
  background: #1e293b; color: #e2e8f0; border-radius: 8px;
  padding: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  min-width: 300px;
}
.setopt-model-card {
  padding: 8px 12px; border-radius: 6px; cursor: pointer;
  display: grid; grid-template-columns: 140px 70px 70px 50px 50px;
  align-items: center; gap: 4px; margin-bottom: 2px;
}
.setopt-model-card:hover { background: #334155; }
.setopt-model-card.selected { background: #1e3a5f; border: 1px solid #3b82f6; }
.setopt-model-name { font-weight: 600; font-size: 12px; }
.setopt-model-cost { font-size: 11px; color: #94a3b8; text-align: right; }
.setopt-model-surplus { font-size: 11px; color: #94a3b8; text-align: right; }
.setopt-model-saving { color: #34d399; font-size: 11px; text-align: right; }
.setopt-model-check { color: #60a5fa; font-size: 10px; font-weight: 600; text-align: right; }

/* 内訳パネル */
.setopt-detail-panel { background: #faf5ff; border-bottom: 1px solid #e5e7eb; }
.setopt-detail-inner { padding: 8px 16px; display: flex; gap: 16px; overflow-x: auto; }
.setopt-design-group { min-width: 280px; }
.setopt-design-label { font-weight: 600; font-size: 11px; color: #7c3aed; margin-bottom: 4px; }
.setopt-detail-table { border-collapse: collapse; font-size: 10px; width: 100%; }
.setopt-detail-table th { background: #ede9fe; padding: 2px 4px; border: 1px solid #ddd6fe; text-align: center; font-weight: 500; }
.setopt-detail-table td { padding: 2px 4px; border: 1px solid #e5e7eb; text-align: center; }

/* === 商品開発タブ === */
.pd-skill-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.pd-slide-viewer { background: #f9fafb; border-radius: 8px; padding: 16px; }
.pd-slide { transition: opacity 0.2s ease; }
.pd-dot { transition: background 0.2s ease; }
.pd-dot:hover { background: #93c5fd !important; }

/* === NECTO Design System Components === */
.btn {
  padding: 5px 14px;
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--transition-normal);
  white-space: nowrap;
}

.btn-primary {
  background: var(--color-primary);
  color: var(--text-inverse);
}

.btn-primary:hover { background: var(--color-primary-hover); }

.btn-secondary {
  background: var(--bg-surface);
  color: var(--text-secondary);
  border: 1px solid var(--border-medium);
}

.btn-secondary:hover { background: var(--bg-subtle); }

.btn-danger {
  background: var(--color-danger);
  color: var(--text-inverse);
}

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

.btn-success {
  background: var(--color-success-dark);
  color: var(--text-inverse);
}

.btn-success:hover { background: var(--color-success-hover); }

.btn-ghost {
  background: transparent;
  color: var(--text-tertiary);
  border: none;
}

.btn-ghost:hover { background: var(--bg-subtle); }

.btn-xs {
  padding: 2px 8px;
  font-size: var(--font-size-sm);
}

.btn-sm {
  padding: 4px 10px;
  font-size: var(--font-size-sm);
}

.btn-lg {
  padding: 7px 18px;
  font-size: var(--font-size-md);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.input,
.select,
.textarea {
  padding: 6px 10px;
  font-size: var(--font-size-base);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  background: var(--bg-input);
}

.input:focus,
.select:focus,
.textarea:focus {
  border-color: var(--border-focus);
  box-shadow: var(--shadow-focus);
  outline: none;
}

.input-sm,
.select-sm {
  padding: 4px 8px;
  font-size: var(--font-size-sm);
}

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 26px;
}

.textarea {
  resize: vertical;
  min-height: 80px;
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-default);
  height: var(--toolbar-height);
  flex-shrink: 0;
}

.toolbar-spacer { flex: 1; }

.line-points-toast {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: var(--z-toast);
  max-width: 420px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-success);
  border-radius: var(--radius-lg);
  background: var(--color-success-bg);
  color: var(--color-success-text);
  box-shadow: var(--shadow-lg);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}

.line-points-toast.is-error {
  border-color: var(--color-danger);
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
}

.lc-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 0;
  padding: 20px 24px 160px;
  overflow: auto;
  background: var(--bg-surface);
}

.lc-lseg-page {
  color: var(--text-primary);
}

.lc-lseg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.lc-lseg-titleblock {
  display: grid;
  gap: 4px;
}

.lc-lseg-title {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 21px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--text-primary);
}

.lc-lseg-back {
  display: inline-block;
  font-size: 34px;
  line-height: 1;
  font-weight: 300;
  transform: translateY(-1px);
  cursor: pointer;
}

.lc-lseg-actions {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}

.lc-lseg-actions #lcChannel {
  display: none;
}

.lc-lseg-draft-btn,
.lc-lseg-draft-caret,
.lc-lseg-complete-btn {
  height: 32px;
  border-radius: 0;
  border: 1px solid #00a65a;
  background: #fff;
  color: #111827;
  font-size: 14px;
  cursor: pointer;
}

.lc-lseg-draft-btn {
  min-width: 170px;
  padding: 0 16px;
}

.lc-lseg-draft-caret {
  width: 32px;
  border-left: 0;
}

.lc-lseg-complete-btn {
  min-width: 86px;
  margin-left: 10px;
  background: #00a65a;
  color: #fff;
  font-weight: 700;
  padding: 0 14px;
}

.lc-lseg-complete-btn:disabled {
  opacity: .55;
  cursor: default;
}

.lc-lseg-saved-flash {
  margin-right: 10px;
  color: #00a65a;
  font-size: 13px;
  font-weight: 700;
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}

.lc-lseg-saved-flash.show {
  opacity: 1;
}

.lc-lseg-main {
  width: calc(100% - 382px);
  min-width: 620px;
  max-width: 920px;
}

.lc-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.lc-section-title {
  margin-bottom: var(--space-2);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 700;
  color: var(--text-primary);
}

.lc-required {
  color: #ef4444;
  margin-right: 2px;
}

.lc-form-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.lc-radio-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.lc-note,
.lc-muted {
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 1.6;
}

.lc-demographic-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
  background: var(--bg-subtle);
}

.lc-demographic-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.lc-demographic-header .lc-section-title {
  margin-bottom: 0;
}

.lc-demographic-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.lc-demographic-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.lc-demographic-area-field {
  grid-column: 1 / -1;
}

.lc-demographic-label {
  color: var(--text-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}

.lc-demographic-checks,
.lc-demographic-range {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.lc-demographic-checks label,
.lc-demographic-range label,
.lc-demographic-areas label {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--text-secondary);
  font-size: var(--font-size-base);
}

.lc-demographic-checks input,
.lc-demographic-areas input {
  accent-color: var(--color-primary);
}

.lc-demographic-range label {
  gap: var(--space-2);
}

.lc-demographic-areas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
  max-height: 180px;
  overflow: auto;
  padding: var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}

.lc-demographic-estimate {
  border-color: var(--color-info-border);
  background: var(--color-info-bg);
  color: var(--text-secondary);
}

.lc-demographic-low-warning {
  margin-top: var(--space-1);
  color: var(--color-warning-text);
  font-weight: var(--font-weight-semibold);
}

.lc-demographic-confirm {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-subtle);
}

.lc-lseg-section {
  border: 0;
  border-top: 1px solid #d7d7d7;
  border-radius: 0;
  background: #fff;
  overflow: visible;
}

.lc-lseg-section:last-of-type {
  border-bottom: 1px solid #d7d7d7;
}

.lc-lseg-section .accordion-header {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  padding: 0 16px;
  background: #fff;
  border: 0;
  color: #111827;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}

.lc-lseg-section .accordion-arrow {
  width: 14px;
  /* 基底 .accordion-arrow の margin-left:auto をリセットし、見出しを左寄せにする */
  margin-left: 0;
  color: #111827;
  font-size: 20px;
  line-height: 1;
}

.lc-lseg-section .accordion-body {
  display: none;
}

.lc-lseg-section.open .accordion-body {
  display: block;
  padding: 20px 28px 26px 64px;
}

.lc-lseg-target-grid {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) 200px;
  gap: 70px;
  align-items: start;
}

.lc-lseg-target-form,
.lc-lseg-timing-form,
.lc-lseg-message-form {
  max-width: 520px;
}

.lc-lseg-inline-label {
  display: inline-block;
  margin-right: 10px;
  color: #111827;
  font-size: 14px;
}

.lc-lseg-radio-stack {
  display: inline-flex;
  flex-direction: column;
  gap: 22px;
  vertical-align: top;
  min-width: 300px;
  font-size: 14px;
}

.lc-lseg-radio-stack label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 20px;
}

.lc-lseg-radio-stack input[type="radio"] {
  accent-color: #00a65a;
}

.lc-lseg-next-btn,
.lc-lseg-add-btn,
.lc-lseg-emoji-btn {
  border: 1px solid #00a65a;
  background: #fff;
  color: #111827;
  border-radius: 3px;
  min-height: 32px;
  padding: 0 16px;
  font-size: 14px;
  cursor: pointer;
}

.lc-lseg-next-btn {
  display: block;
  margin: 70px auto 0;
}

.lc-lseg-estimate-card {
  width: 200px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  text-align: center;
  overflow: hidden;
}

.lc-lseg-estimate-title {
  padding: 12px 10px;
  border-bottom: 1px solid #ddd;
  font-weight: 700;
  font-size: 14px;
}

.lc-lseg-estimate-body {
  display: grid;
  place-items: center;
  gap: 10px;
  min-height: 190px;
  color: #111827;
  font-size: 14px;
}

.lc-lseg-ring {
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  border: 7px solid #f2f2f2;
  border-radius: 999px;
}

.lc-lseg-ring span {
  color: #43bf1d;
  font-size: 24px;
}

.lc-lseg-timing-form {
  padding-top: 8px;
}

.lc-lseg-date-input {
  width: 270px;
  height: 32px;
  background: #fafafa;
}

.lc-lseg-message-form {
  max-width: 520px;
}

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

.lc-lseg-message-tools {
  display: flex;
  align-items: center;
  margin-top: 18px;
  border: 1px solid #ddd;
  width: fit-content;
}

.lc-lseg-message-tools label {
  display: grid;
  place-items: center;
  width: 44px;
  height: 32px;
  border-right: 1px solid #ddd;
  cursor: pointer;
  color: #111827;
  font-size: 15px;
}

.lc-lseg-message-tools label:last-child {
  border-right: 0;
}

.lc-lseg-message-tools input {
  display: none;
}

.lc-lseg-message-tools label:has(input:checked),
.lc-lseg-message-tools label.active {
  outline: 1px solid #00a65a;
  outline-offset: -1px;
  color: #00a65a;
}

.lc-lseg-textarea {
  width: 100%;
  min-height: 104px;
  margin-top: 18px;
  border-radius: 0;
}

.lc-lseg-add-btn {
  display: block;
  margin-top: 20px;
}

.lc-lseg-preview-panel {
  position: fixed;
  right: 16px;
  bottom: 0;
  z-index: 50;
  width: 372px;
  height: 584px;
  background: #6c768d;
  box-shadow: 0 0 14px rgba(0,0,0,.28);
  color: #fff;
}

.lc-lseg-preview-top {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 58px;
  padding: 0 14px;
  background: #2f3a3d;
}

.lc-lseg-preview-top strong {
  flex: 1;
  font-size: 15px;
}

.lc-lseg-preview-top button {
  min-width: 100px;
  height: 32px;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 4px;
  background: transparent;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

.lc-lseg-preview-top button:disabled {
  opacity: .55;
  cursor: default;
}

.lc-lseg-preview-account {
  height: 44px;
  padding: 12px 16px;
  background: #525b72;
  font-weight: 700;
  font-size: 14px;
}

.lc-lseg-preview-body {
  min-height: 482px;
  padding: 14px;
}

.lc-lseg-preview-bubble {
  display: inline-block;
  max-width: 82%;
  padding: 9px 12px;
  border-radius: 16px;
  background: #fff;
  color: #111827;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.lc-legacy-line-tools {
  position: absolute;
  left: -10000px;
  top: 0;
  width: 360px;
  min-height: 1px;
  overflow: hidden;
}

.lc-danger {
  color: var(--color-danger-text);
}

.lc-char-count {
  align-self: flex-end;
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}

.lc-recipient-list,
.lc-friend-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.lc-recipient-row,
.lc-friend-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}

.lc-recipient-row {
  justify-content: space-between;
  padding: var(--space-2);
}

.lc-friend-row {
  padding: var(--space-2);
  cursor: pointer;
  text-align: left;
}

.lc-friend-row:hover {
  background: var(--bg-hover);
}

.lc-friend-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--bg-subtle);
  object-fit: cover;
  flex-shrink: 0;
}

.lc-preview {
  min-height: 360px;
  background: #8fc8ef;
  border: 1px solid #dbe3ea;
  border-radius: 18px;
  padding: 26px 14px;
  box-shadow: inset 0 0 0 8px #f8fafc;
}

.lc-bubble {
  display: inline-block;
  max-width: 82%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border-radius: 16px;
  background: #fff;
  color: var(--text-primary);
  padding: 9px 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}

.lc-broadcast-action {
  border-top: 1px solid var(--border-default);
  padding-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.lc-broadcast-preview {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  padding: var(--space-3);
  color: var(--text-primary);
}

.lc-preview-card {
  position: sticky;
  top: 12px;
}

.lc-layout-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: var(--space-2);
}

.lc-layout-option {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  align-items: center;
  padding: var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-primary);
  cursor: pointer;
}

.lc-layout-option.selected {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-bg);
}

.lc-layout-thumb {
  position: relative;
  width: 64px;
  aspect-ratio: 1;
  background: var(--bg-subtle);
  border: 1px solid var(--border-default);
  overflow: hidden;
}

.lc-layout-cell {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  background: rgba(255, 255, 255, 0.42);
}

.lc-layout-name {
  font-size: 12px;
  color: var(--text-secondary);
  text-align: center;
}

.lc-imagemap-preview,
.lc-imagemap-selected-preview {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--bg-subtle);
  border: 1px solid var(--border-default);
}

.lc-imagemap-preview {
  max-width: 420px;
  aspect-ratio: 1;
}

.lc-imagemap-selected-preview img,
.lc-imagemap-preview-img,
.lc-imagemap-preview-placeholder {
  display: block;
  width: 100%;
  height: auto;
}

.lc-imagemap-preview-img,
.lc-imagemap-preview-placeholder {
  height: 100%;
  object-fit: cover;
}

.lc-imagemap-preview-placeholder {
  background:
    linear-gradient(45deg, rgba(148, 163, 184, 0.18) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(148, 163, 184, 0.18) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(148, 163, 184, 0.18) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(148, 163, 184, 0.18) 75%);
  background-size: 18px 18px;
  background-position: 0 0, 0 9px, 9px -9px, -9px 0;
}

.lc-imagemap-area {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(37, 99, 235, 0.92);
  background: rgba(37, 99, 235, 0.12);
  pointer-events: none;
}

.lc-imagemap-area span {
  min-width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.92);
  color: white;
  font-size: 12px;
  font-weight: var(--font-weight-bold);
}

.lc-card-carousel-preview {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: var(--space-1);
}

.lc-card-preview-item {
  flex: 0 0 220px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}

.lc-card-preview-item img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--bg-subtle);
}

.lc-card-preview-body,
.lc-card-preview-footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2);
}

.lc-card-preview-title {
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.lc-rs-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lc-card-preview-desc {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  overflow-wrap: anywhere;
}

.lc-card-preview-price {
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.lc-rs-rank-badge {
  color: #E8AE3C;
  font-weight: var(--font-weight-bold);
}

.lc-rs-price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
}

.lc-rs-price {
  color: #BF0000;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  overflow-wrap: anywhere;
}

.lc-rs-free-shipping {
  color: #BF0000;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

.lc-rs-rating {
  font-size: var(--font-size-sm);
}

.lc-rs-rating-stars,
.lc-rs-rating-value {
  color: #E8AE3C;
}

.lc-rs-rating-value {
  font-weight: var(--font-weight-bold);
}

.lc-rs-rating-count {
  color: #717171;
}

.lc-card-preview-button {
  text-align: center;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: white;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  overflow-wrap: anywhere;
}

.lc-card-preview-button.lc-rs-cta {
  width: 100%;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, #3DD16E, #05B34C);
  color: #fff;
  font-weight: var(--font-weight-bold);
}

.lc-card-draft-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}

.lc-card-draft-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.lc-card-draft-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  gap: var(--space-2);
  align-items: end;
}

.lc-card-draft-thumb,
.lc-card-draft-thumb img,
.lc-card-draft-image-placeholder {
  width: 96px;
  aspect-ratio: 1;
}

.lc-card-draft-thumb {
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
}

.lc-card-draft-thumb img {
  display: block;
  object-fit: cover;
}

.lc-card-draft-image-placeholder {
  background: var(--bg-subtle);
}

.lc-card-button-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.6fr) minmax(180px, 1fr) auto;
  gap: var(--space-2);
  align-items: center;
}

.lc-modal-error {
  color: var(--color-danger-text);
  font-size: var(--font-size-sm);
}

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

  .lc-card-button-row {
    grid-template-columns: 1fr;
  }

  .lc-demographic-grid {
    grid-template-columns: 1fr;
  }

  .lc-demographic-area-field {
    grid-column: auto;
  }

  .lc-demographic-areas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ワークフロー専用ツールバー: 左=情報群(縮小・クリップ)/右=操作群(固定)で改行崩れ防止 */
.wf-toolbar {
  flex-wrap: nowrap;
  height: auto;
  min-height: var(--toolbar-height);
  align-items: flex-start;
}
.wf-tb-info {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 280px;
  min-width: 0;
  min-height: calc(var(--toolbar-height) - 12px);
}
/* バッジ群のみクリップ（タイトルドロップダウンのメニューはクリップしない） */
.wf-tb-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.wf-tb-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 1 auto;
  min-width: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.wf-month-nav {
  align-items: center;
}
.wf-month-label {
  min-width: 88px;
  text-align: center;
  white-space: nowrap;
}

.toolbar-sep {
  width: 1px;
  height: 18px;
  background: var(--border-default);
}

.table-container {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-surface);
}

.table-scroll {
  flex: 1;
  overflow: auto;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-base);
  table-layout: fixed;
}

.table th {
  padding: 5px 10px;
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-muted);
  font-weight: var(--font-weight-semibold);
  position: sticky;
  top: 0;
  z-index: 10;
}

.table td {
  padding: 5px 10px;
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-bottom: 1px solid var(--border-light);
}

.table tbody tr:hover { background: var(--color-primary-bg); }

.table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  border-top: 1px solid var(--border-default);
  font-size: var(--font-size-sm);
}

.page-btn {
  min-width: 26px;
  height: 26px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  background: transparent;
  cursor: pointer;
}

.page-btn.active {
  background: var(--color-primary);
  color: var(--text-inverse);
}

.page-btn:disabled {
  color: var(--text-muted);
  cursor: not-allowed;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
}

/* display:inline-flex がブラウザ既定の [hidden]{display:none} を詳細度で上書きするため、
   hidden 属性を付けても消えない。属性セレクタで明示的に打ち消す。 */
.badge[hidden] {
  display: none;
}

.badge-success {
  background: var(--color-success-subtle);
  color: var(--color-success-text);
}

.badge-danger {
  background: var(--color-danger-subtle);
  color: var(--color-danger-text);
}

.badge-warning {
  background: var(--color-warning-subtle);
  color: var(--color-warning-text);
}

.badge-info {
  background: var(--color-info-subtle);
  color: var(--color-info);
}

.badge-estimated {
  border: 1px dashed var(--border-medium);
  background: var(--bg-muted);
  color: var(--text-tertiary);
}

.staff-extension-main-row td:first-child {
  white-space: normal;
}

.staff-extension-row-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-1);
}

.staff-extension-blocked-reason {
  margin-top: var(--space-1);
  color: var(--text-tertiary);
  font-size: var(--font-size-base);
  white-space: normal;
  overflow-wrap: anywhere;
}

.staff-extension-col-name { width: 31%; }
.staff-extension-col-version { width: 9%; }
.staff-extension-col-date { width: 10%; }
.staff-extension-col-installed { width: 13%; }
.staff-extension-col-sites { width: 16%; }
.staff-extension-col-actions { width: 21%; }

.staff-extension-expand {
  margin-left: var(--space-2);
}

.staff-extension-detail-row[hidden] {
  display: none;
}

.table td.staff-extension-detail-cell {
  padding: var(--space-3);
  background: var(--bg-muted);
  white-space: normal;
  overflow: visible;
}

.staff-extension-installs-heading {
  margin-bottom: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-align: left;
}

.staff-extension-admin-installs-heading {
  margin-top: var(--space-4);
}

.staff-extension-installs-table {
  max-width: 720px;
}

.staff-extension-installs-table .table {
  table-layout: auto;
}

.staff-extension-installs-table .table td,
.staff-extension-installs-table .table th {
  white-space: normal;
}

.badge-ai {
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}

.btn.active {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
  color: var(--color-primary);
}

.wf-page-root {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

.wf-detail-scroll {
  flex: 1;
  min-width: 0;
  overflow: auto;
  flex-direction: column;
}

.wf-dropdown-menu {
  max-width: min(460px, 90vw);
  left: 0;
  right: auto;
}

/* ===== WF記録（story）ビュー ===== */
.wf-story-view {
  flex: 1;
  min-width: 0;
  padding: var(--space-3);
}
.wf-story-meta {
  margin-bottom: var(--space-3);
}
.wf-story-summary {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
}
.wf-story-updated {
  font-size: var(--font-size-xs);
  margin-top: var(--space-1);
}
.wf-story-section-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-secondary);
  margin: var(--space-3) 0 var(--space-2);
}
.wf-story-card {
  padding: var(--space-3);
  margin-bottom: var(--space-3);
}
.wf-story-line {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}
.wf-story-date {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  margin: var(--space-4) 0 var(--space-2);
}
.wf-story-date:first-child {
  margin-top: 0;
}
.wf-story-date::before,
.wf-story-date::after {
  content: "";
  height: 1px;
  background: var(--border-default);
  flex: 1;
}
.wf-story-entry {
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
}
.wf-story-entry-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-1);
  font-size: var(--font-size-xs);
}
.wf-story-entry-body {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}
.wf-story-empty,
.wf-story-error {
  margin-bottom: var(--space-3);
}
/* entry_type バッジの種別色（既存 badge を流用しつつ種別で色付け） */
.badge.wf-story-type-initial { background: var(--color-primary-subtle); color: var(--color-primary); }
.badge.wf-story-type-milestone { background: var(--color-success-subtle); color: var(--color-success-text); }
.badge.wf-story-type-risk { background: var(--color-danger-subtle); color: var(--color-danger-text); }
.badge.wf-story-type-lesson { background: var(--color-warning-subtle); color: var(--color-warning-text); }
.badge.wf-story-type-summary_refresh { background: var(--color-info-subtle); color: var(--color-info); }

.wf-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.wf-header-meta2 {
  font-size: var(--font-size-xs);
  padding: 0 var(--space-2) var(--space-1);
}
.wf-goal-info {
  cursor: pointer;
  font-size: var(--font-size-md);
  flex: 0 0 auto;
}
.wf-id-badge {
  flex: 0 0 auto;
}
/* ⓘ詳細ポップオーバー（body直下・fixed） */
.wf-info-popover {
  position: fixed;
  z-index: var(--z-column-menu);
  max-width: 420px;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  font-size: var(--font-size-sm);
}
.wf-info-line {
  padding: 2px 0;
  white-space: pre-wrap;
  word-break: break-word;
}
.wf-reason-popover {
  max-width: min(440px, calc(100vw - 16px));
  max-height: min(70vh, 520px);
  overflow: auto;
}
.wf-reason-title {
  font-weight: 700;
  margin-bottom: var(--space-1);
}
.wf-badge-button {
  border: 0;
  font: inherit;
  line-height: inherit;
  cursor: pointer;
}
.wf-badge-button:hover {
  filter: brightness(0.97);
  text-decoration: underline;
}
/* 「カレンダー」ドロップダウン（月/週） */
.wf-cal-view-dropdown {
  position: relative;
  display: inline-block;
}
.wf-cal-view-menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: var(--z-column-menu);
  margin-top: 2px;
  min-width: 96px;
  padding: var(--space-1);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.wf-cal-view-opt {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-1) var(--space-2);
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  cursor: pointer;
}
.wf-cal-view-opt:hover {
  background: var(--bg-hover);
}
.wf-cal-view-opt.active {
  background: var(--color-info-bg);
  color: var(--color-info);
}

.wf-title-dropdown-btn {
  padding: var(--space-1) var(--space-2);
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wf-title-caret {
  color: var(--text-muted);
}

.wf-filter-label {
  margin-left: var(--space-2);
}

.wf-menu-table {
  width: 100%;
  table-layout: fixed;
}

.wf-menu-title-wrap {
  align-items: center;
  min-width: 0;
}

.wf-menu-title {
  flex: 1;
  min-width: 0;
}

.wf-cycle-head {
  cursor: pointer;
}

.wf-cycle-head-row {
  align-items: center;
}

.wf-cycle-caret {
  width: var(--space-4);
}

.wf-cycle-title {
  flex: 1;
}

.wf-cycle-expanded {
  margin-left: var(--space-5);
}

.wf-cycle-toolbar {
  margin-top: var(--space-2);
}

.wf-cp-list {
  flex-direction: column;
}

.wf-cp-wrap {
  display: flex;
  align-items: stretch;
}

.wf-cp-rail {
  width: calc(var(--space-8) + var(--space-2));
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.wf-cp-status-icon {
  width: calc(var(--space-6) + var(--space-1));
  height: calc(var(--space-6) + var(--space-1));
  justify-content: center;
}

.wf-cp-line {
  height: auto;
  flex: 1;
}

.wf-cp-card {
  flex: 1;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
}

.wf-cp-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
}

.wf-cp-check,
.wf-step-stagecheck {
  width: var(--space-4);
  height: var(--space-4);
  flex: 0 0 auto;
  accent-color: var(--color-success-dark);
  cursor: pointer;
}

.wf-cp-check:indeterminate,
.wf-step-stagecheck:indeterminate {
  accent-color: var(--color-warning);
}

.wf-cp-check:disabled,
.wf-step-stagecheck:disabled {
  cursor: not-allowed;
}

.wf-cp-table-wrap {
  width: 100%;
}

/* ステップ（CP下位概念）アコーディオン */
.wf-step-caret {
  cursor: pointer;
  user-select: none;
  margin-right: 2px;
  color: var(--text-secondary);
}
.wf-step-count {
  font-size: var(--font-size-xs);
  margin-right: 2px;
}
.wf-step-signal {
  font-size: var(--font-size-xs);
}
.wf-step-subrow > td {
  background: var(--bg-surface);
  padding: var(--space-2) var(--space-3);
}

.wf-step-indent {
  padding-left: var(--space-4);
}
.wf-step-title {
  font-weight: var(--font-weight-medium);
}
.wf-step-done .wf-step-title {
  text-decoration: line-through;
  color: var(--text-tertiary);
}
.wf-step-cond {
  font-size: var(--font-size-xs);
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wf-step-dep-badge {
  font-size: var(--font-size-xs);
  color: var(--color-info);
  background: var(--color-info-bg);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-1);
  white-space: nowrap;
}
.wf-step-wait {
  flex: 0 0 auto;
}
.wf-step-table {
  table-layout: fixed;
  width: 100%;
  font-size: var(--font-size-sm);
}
.wf-step-table td {
  background: var(--bg-subtle);
  padding: var(--space-2);
  vertical-align: top;
  overflow: hidden;
}
.wf-step-table td.wf-col-title,
.wf-step-table td.wf-col-cond,
.wf-step-table td.wf-col-deliverables {
  text-align: left;
}
.wf-step-table .wf-col-chk {
  width: 44px;
  text-align: center;
}
.wf-step-table .wf-col-seq {
  width: 72px;
}
.wf-step-table .wf-col-title {
  width: 22%;
  white-space: normal;
  word-break: break-word;
}
.wf-step-table .wf-col-cond {
  width: 42%;
  white-space: normal;
  word-break: break-word;
}
.wf-step-table .wf-col-deliverables {
  width: 22%;
  white-space: normal;
  word-break: break-word;
}
.wf-step-table .wf-col-person {
  width: 96px;
}
.wf-step-table .wf-col-due {
  width: 152px;
}
.wf-step-table .wf-col-status {
  width: 72px;
}
.wf-due-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  gap: 3px;
  white-space: nowrap;
  border: 1px solid transparent;
  font-weight: var(--font-weight-semibold);
}
.wf-due-chip-overdue {
  color: #991b1b;
  background: #fee2e2;
  border-color: #fecaca;
}
.wf-due-chip-3d {
  color: #9a3412;
  background: #ffedd5;
  border-color: #fed7aa;
}
.wf-due-chip-10d {
  color: #854d0e;
  background: #fef3c7;
  border-color: #fde68a;
}
.wf-due-chip-normal {
  color: var(--text-secondary);
  background: var(--bg-muted);
  border-color: var(--border-light);
}
.wf-due-chip-none {
  border-color: var(--border-light);
}
.wf-cp-table tr.wf-due-row-overdue > td,
.wf-step-table tr.wf-due-row-overdue > td {
  background: #fff1f2;
}
.wf-cp-table tr.wf-due-row-overdue > td:first-child,
.wf-step-table tr.wf-due-row-overdue > td:first-child {
  box-shadow: inset 4px 0 0 #dc2626;
}
.wf-cp-table tr.wf-due-row-3d > td,
.wf-step-table tr.wf-due-row-3d > td {
  background: #fff7ed;
}
.wf-cp-table tr.wf-due-row-3d > td:first-child,
.wf-step-table tr.wf-due-row-3d > td:first-child {
  box-shadow: inset 4px 0 0 #f97316;
}
.wf-cp-table tr.wf-due-row-10d > td,
.wf-step-table tr.wf-due-row-10d > td {
  background: #fffbeb;
}
.wf-cp-table tr.wf-due-row-10d > td:first-child,
.wf-step-table tr.wf-due-row-10d > td:first-child {
  box-shadow: inset 4px 0 0 #eab308;
}
.wf-cp-card.wf-due-row-overdue,
.wf-mine-row.wf-due-row-overdue {
  border-left: 4px solid #dc2626;
  background: #fff1f2;
}
.wf-cp-card.wf-due-row-3d,
.wf-mine-row.wf-due-row-3d {
  border-left: 4px solid #f97316;
  background: #fff7ed;
}
.wf-cp-card.wf-due-row-10d,
.wf-mine-row.wf-due-row-10d {
  border-left: 4px solid #eab308;
  background: #fffbeb;
}
.wf-step-edit-btn {
  margin-left: var(--space-1);
}
.wf-edit-modal {
  max-width: min(92vw, 900px);
}
.wf-edit-form {
  display: grid;
  gap: var(--space-2);
}
.wf-edit-row {
  display: grid;
  grid-template-columns: minmax(120px, 180px) minmax(0, 1fr);
  gap: var(--space-2);
  align-items: start;
}
.wf-edit-row > span {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}
.wf-edit-assignee-modes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.wf-deliverable-edit-list {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.wf-deliverable-edit-row {
  display: grid;
  grid-template-columns: minmax(0, 110px) minmax(0, 110px) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 150px) auto;
  gap: var(--space-2);
  align-items: center;
}
.wf-cal-detail-steps {
  margin-top: var(--space-1);
  font-size: var(--font-size-sm);
}
.wf-cal-detail-steps .wf-step-done {
  color: var(--text-tertiary);
  text-decoration: line-through;
}

.wf-view-tabs {
  display: inline-flex;
  align-items: stretch;
  flex: 0 0 auto;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--bg-muted);
}
.wf-view-tabs .wf-cal-view-dropdown {
  display: flex;
}
.wf-view-tab {
  position: relative;
  border-color: transparent;
  background: var(--bg-surface);
  color: var(--text-secondary);
}
.wf-view-tab::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 3px;
  height: 2px;
  border-radius: var(--radius-full);
  background: transparent;
}
.wf-view-tab-list::before {
  background: #2563eb;
}
.wf-view-tab-calendar::before {
  background: #16a34a;
}
.wf-view-tab-story::before {
  background: #7c3aed;
}
.wf-view-tab-main.active {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
}
.wf-view-tab-calendar.active {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #15803d;
}
.wf-view-tab-detail.active {
  border-color: #ddd6fe;
  background: #f5f3ff;
  color: #6d28d9;
}

.wf-cp-table th,
.wf-cp-table td {
  vertical-align: top;
  overflow: hidden;
}

.wf-cp-table {
  table-layout: fixed;
  width: 100%;
}

.wf-cp-table .wf-col-toggle {
  width: 36px;
  text-align: center;
  white-space: nowrap;
}
.wf-col-toggle .wf-step-caret {
  display: block;
  margin-right: 0;
  font-size: var(--font-size-sm);
}
.wf-col-toggle .wf-step-count {
  display: block;
  margin-right: 0;
}

.wf-cp-table .wf-col-chk {
  width: 44px;
  text-align: center;
}

.wf-cp-table .wf-col-wf {
  width: 80px;
}

.wf-cp-table .wf-col-seq {
  width: 72px;
}

.wf-cp-table .wf-col-title {
  width: 22%;
  white-space: normal;
  word-break: break-word;
}

.wf-cp-table .wf-col-cond {
  width: 42%;
  white-space: normal;
  word-break: break-word;
}

.wf-cp-table .wf-col-deliverables {
  width: 22%;
  white-space: normal;
  word-break: break-word;
}

.wf-deliverable-chip {
  gap: 4px;
  margin: 0 4px 4px 0;
  vertical-align: top;
}
.wf-deliverable-chip .wf-badge-button {
  margin-left: 4px;
}

.wf-cp-table .wf-col-person {
  width: 96px;
}

.wf-cp-table .wf-col-due {
  width: 152px;
}

.wf-cp-table .wf-col-status {
  width: 72px;
}

/* タイトル/完了条件のセル値は左寄せ（ヘッダー th は .table th の中央のまま） */
.wf-cp-table td.wf-col-title,
.wf-cp-table td.wf-col-cond,
.wf-cp-table td.wf-col-deliverables {
  text-align: left;
}

/* 列ソート/フィルタ（design-system necto.md §9.8 カラムメニュー） */
.wf-cp-table th.wf-col-head {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.wf-col-ind {
  margin-left: 4px;
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}
.wf-col-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 4px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  vertical-align: middle;
}
.wf-col-empty {
  text-align: center;
  padding: var(--space-4);
}
.wf-col-menu {
  position: fixed;
  z-index: var(--z-column-menu);
  width: 220px;
  max-height: 340px;
  overflow-y: auto;
  padding: var(--space-2);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  font-size: var(--font-size-sm);
}
.wf-col-menu-sec {
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-default);
}
.wf-col-menu-sec:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}
.wf-col-filter {
  max-height: 220px;
  overflow-y: auto;
}
.wf-col-sort {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-1) var(--space-2);
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  cursor: pointer;
}
.wf-col-sort:hover {
  background: var(--bg-hover);
}
.wf-col-sort.active {
  background: var(--color-info-bg);
  color: var(--color-info);
}
.wf-col-opt {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1);
  cursor: pointer;
}
.wf-col-opt:hover {
  background: var(--bg-hover);
}

.wf-cp-table .wf-cp-check-cell {
  text-align: center;
  vertical-align: middle;
}

.wf-cp-check-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
}

.wf-cp-agt-mark,
.wf-cp-subtext {
  font-size: var(--font-size-xs);
}

.wf-cp-title {
  flex: 1 1 180px;
  min-width: 120px;
}

.wf-cp-verify-badge {
  flex: 0 0 auto;
}

.wf-cp-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
  min-width: 0;
  font-size: var(--font-size-sm);
}

.wf-mine-root {
  gap: var(--space-4);
  overflow: auto;
  padding: var(--space-4);
}

.wf-mine-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.wf-mine-main,
.wf-mine-worklist {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.wf-cal {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.wf-cal-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.wf-cal-weekdays,
.wf-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.wf-cal-weekdays {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  text-align: center;
}

.wf-cal-grid {
  border-top: 1px solid var(--border-light);
  border-left: 1px solid var(--border-light);
}

.wf-cal-cell {
  min-height: 96px;
  padding: var(--space-2);
  border-right: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-surface);
  min-width: 0;
}

.wf-cal-outside {
  background: var(--bg-muted);
  color: var(--text-tertiary);
}

.wf-cal-today {
  box-shadow: inset 0 0 0 2px var(--color-primary);
}

/* 土日祝の色（土=薄ピンク / 日・祝=ピンク）。月次セル・週次カラム・曜日ヘッダー共通。 */
.wf-cal-sat { background: #fdf2f8; }
.wf-cal-sun { background: #fce7f3; }
.wf-cal-weekdays .wf-cal-sat { background: transparent; color: #be185d; }
.wf-cal-weekdays .wf-cal-sun { background: transparent; color: #be185d; }
.wf-cal-outside.wf-cal-sat,
.wf-cal-outside.wf-cal-sun { background: var(--bg-muted); }

.wf-cal-date {
  font-size: var(--font-size-sm);
  font-weight: 600;
  margin-bottom: var(--space-1);
}

.wf-cal-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.wf-cal-bar {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-left: 3px solid var(--wf-theme, var(--color-primary));
  background: var(--bg-subtle);
  color: var(--text-secondary);
  padding: 1px var(--space-1);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  cursor: pointer;
}
.wf-cal-bar:hover {
  background: var(--bg-hover);
}
.wf-cal-bar-selected {
  outline: 2px solid var(--wf-theme, var(--color-primary));
  background: var(--bg-hover);
}
/* 月次「+N / 閉じる」トグル（span風のbutton。アクセシブル） */
.wf-cal-more-toggle {
  display: inline-block;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: var(--font-size-xs);
  line-height: inherit;
  text-align: left;
  color: var(--text-tertiary);
  cursor: pointer;
}
.wf-cal-more-toggle:hover { text-decoration: underline; }
/* 展開した日のセルは件数が多くても暴走しないよう上限＋スクロール */
.wf-cal-cell-expanded .wf-cal-items { max-height: 360px; overflow-y: auto; }
/* 週リスト行のクリック選択＆選択ハイライト（月バーの wf-cal-bar-selected と対応） */
.wf-mine-row[data-cal-sel] { cursor: pointer; }
.wf-mine-row-selected { outline: 2px solid var(--wf-theme, var(--color-primary)); background: var(--bg-hover); }
/* カレンダー: ステップ予定はCP予定と視覚区別する（破線左ボーダー＋インデント） */
.wf-cal-bar-step {
  border-left-style: dashed;
  margin-left: var(--space-2);
}
.wf-mine-row-step {
  margin-left: var(--space-3);
}
.wf-cal-step-parent {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--font-size-xs);
}
/* WFテーマカラー（workflow_id 決定的・10色パレット） */
.wf-theme-c0 { --wf-theme: #2563eb; }
.wf-theme-c1 { --wf-theme: #16a34a; }
.wf-theme-c2 { --wf-theme: #db2777; }
.wf-theme-c3 { --wf-theme: #ea580c; }
.wf-theme-c4 { --wf-theme: #7c3aed; }
.wf-theme-c5 { --wf-theme: #0891b2; }
.wf-theme-c6 { --wf-theme: #ca8a04; }
.wf-theme-c7 { --wf-theme: #dc2626; }
.wf-theme-c8 { --wf-theme: #4f46e5; }
.wf-theme-c9 { --wf-theme: #0d9488; }
/* カレンダー下のCP詳細カード */
.wf-cal-detail {
  margin-top: var(--space-3);
}
.wf-cal-detail-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.wf-cal-detail-dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--wf-theme, var(--color-primary));
}
.wf-cal-detail-title {
  flex: 1 1 auto;
  min-width: 0;
}
.wf-cal-detail-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.wf-cal-detail-row {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
}
.wf-cal-detail-label {
  flex: 0 0 84px;
  font-size: var(--font-size-xs);
}

.wf-cal-more {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}

.wf-header-meta {
  min-width: 0;
}
.wf-header-goal {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wf-header-metatext {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* 週次は横スクロール（各日カラム固定幅）で日付を横に流せる */
.wf-week-list {
  display: flex;
  flex-direction: row;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: var(--space-2);
}

.wf-week-day {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 0 0 240px;
  min-width: 240px;
  padding: var(--space-2);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}

.wf-week-today {
  box-shadow: inset 0 0 0 2px var(--color-primary);
}

/* 週カラムの背景は .wf-week-day が後勝ちするため土日祝色を高詳細度で再指定 */
.wf-week-day.wf-cal-sat { background: #fdf2f8; }
.wf-week-day.wf-cal-sun { background: #fce7f3; }

.wf-week-today-badge {
  margin-left: var(--space-1);
}

.wf-week-date {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  font-weight: 600;
  display: flex;
  align-items: center;
}

.wf-week-empty {
  font-size: var(--font-size-sm);
}

.wf-mine-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.wf-mine-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  min-width: 0;
}

.wf-mine-title {
  flex: 1 1 220px;
  min-width: 140px;
}

.wf-mine-section-title {
  margin-top: var(--space-3);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.wf-tag {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  border: 1px solid var(--border-medium);
  background: var(--bg-surface);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.filter-chip.active {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-bg);
}

.empty-state {
  padding: 48px 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--font-size-md);
}

.loading-state {
  padding: 24px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: var(--font-size-md);
}

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: var(--z-modal-backdrop);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal {
  background: var(--bg-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  max-width: 600px;
  width: 92%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-muted);
}

.modal-body {
  padding: 16px;
  overflow-y: auto;
  flex: 1;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border-default);
}

.tracking-disclosure-modal { max-width: 560px; }
.tracking-disclosure-title {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-xl);
}
.tracking-disclosure-body {
  display: grid;
  gap: var(--space-3);
}
.tracking-disclosure-message,
.tracking-disclosure-line,
.tracking-disclosure-unresolved { margin: 0; }
.tracking-disclosure-message { color: var(--color-danger-text); }
.tracking-disclosure-shipment {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-muted);
}
.tracking-disclosure-line { color: var(--text-secondary); }
.tracking-disclosure-unresolved { color: var(--color-warning-text); }

.customer-link-modal { max-width: 520px; }
.customer-link-modal .modal-header h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-xl);
}
.customer-link-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
.customer-link-field {
  display: grid;
  gap: var(--space-1);
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
}
.customer-link-field .input { width: 100%; }
.customer-link-hint { margin-top: var(--space-3); }
.customer-link-result {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-info-border);
  border-radius: var(--radius-lg);
  background: var(--color-info-bg);
}
.customer-link-result-name {
  color: var(--text-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}
.customer-link-result-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  color: var(--text-secondary);
  font-size: var(--font-size-base);
}
.customer-link-result .btn { justify-self: start; }
.customer-link-panel-action {
  display: flex;
  margin-top: var(--space-3);
}

@media (max-width: 640px) {
  .customer-link-form { grid-template-columns: 1fr; }
}

.sess-inspector-modal {
  max-width: 1100px;
  width: 94%;
}

.sess-inspector-title {
  margin: 0;
  font-size: var(--font-size-lg);
  color: var(--text-primary);
}

.sess-inspector-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.sess-inspector-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}

.sess-inspector-main {
  min-width: 0;
}

.sess-inspector-row-head,
.sess-inspector-meta,
.sess-inspector-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.sess-inspector-row-head {
  margin-bottom: var(--space-2);
}

.sess-inspector-agt {
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.sess-inspector-room,
.sess-inspector-meta,
.sess-inspector-activity,
.sess-inspector-trigger {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.sess-inspector-activity,
.sess-inspector-trigger {
  overflow-wrap: anywhere;
}

.sess-inspector-trigger {
  margin-top: var(--space-1);
  color: var(--text-tertiary);
}

.sess-inspector-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.sess-inspector-badge.danger {
  background: var(--color-danger-subtle);
  color: var(--color-danger-text);
}

.sess-inspector-badge.muted {
  background: var(--bg-muted);
  color: var(--text-tertiary);
}

.sess-inspector-actions {
  justify-content: flex-end;
}

@media (max-width: 720px) {
  .sess-inspector-row {
    grid-template-columns: 1fr;
  }

  .sess-inspector-actions {
    justify-content: flex-start;
  }
}

.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 16px;
}

/* MF会計API同期 */
.mf-api-sync-card {
  margin-bottom: var(--space-4);
}

.mf-api-sync-title,
.mf-api-sync-modal-title {
  margin: 0;
  color: var(--text-primary);
}

.mf-api-sync-connection,
.mf-api-sync-office,
.mf-api-sync-confirm,
.mf-api-sync-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.mf-api-sync-connection {
  padding: var(--space-3) var(--space-2);
}

.mf-api-sync-office {
  color: var(--text-secondary);
}

.mf-api-sync-confirm {
  flex: 1 1 100%;
}

.mf-api-sync-message {
  margin: var(--space-2) 0;
}

.mf-api-sync-actions {
  justify-content: center;
}

.mf-source-note {
  margin: var(--space-2) 0 0;
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

/* インボイス一覧 */
#dataInvoiceListPanel.active {
  min-height: 0;
  height: 100%;
}

.invoice-list-root {
  --invoice-topbar-height: var(--topnav-height);
  --invoice-header-height: 52px;
  --invoice-toolbar-height: var(--toolbar-height);
  min-height: 0;
  height: calc(100vh - var(--invoice-topbar-height));
  overflow-y: auto;
  background: var(--bg-body);
  color: var(--text-primary);
}

.invoice-list-root .is-hidden,
.intl-shipping-root .is-hidden {
  display: none;
}

.invoice-list-root .badge-neutral,
.intl-shipping-root .badge-neutral {
  background: var(--bg-subtle);
  color: var(--text-tertiary);
}

.invoice-list-header {
  position: sticky;
  top: 0;
  z-index: calc(var(--z-sticky) + 3);
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-5);
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}

.invoice-list-title-block,
.intl-shipping-title-wrap,
.intl-card-heading {
  min-width: 0;
}

.invoice-list-title,
.intl-shipping-title {
  margin: 0;
  font-size: var(--font-size-xl);
  line-height: var(--line-height-tight);
}

.invoice-list-subtitle,
.intl-shipping-subtitle,
.intl-card-note {
  margin: 2px 0 0;
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.invoice-list-header-actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-2);
}

.invoice-list-updated,
.invoice-list-count {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

.invoice-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
}

.card.invoice-summary-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
}

.invoice-summary-label {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.invoice-summary-value {
  color: var(--text-primary);
  font-size: var(--font-size-2xl);
  font-variant-numeric: tabular-nums;
}

.invoice-summary-note {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}

.toolbar.invoice-list-toolbar {
  position: sticky;
  top: var(--invoice-header-height);
  z-index: calc(var(--z-sticky) + 2);
  min-height: var(--toolbar-height);
  height: auto;
  padding-right: var(--space-5);
  padding-left: var(--space-5);
  box-shadow: var(--shadow-sm);
}

.invoice-filter-chip {
  padding: 3px 9px;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-family: var(--font-family);
  font-size: var(--font-size-xs);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.invoice-filter-chip:hover {
  background: var(--bg-subtle);
}

.invoice-filter-chip.is-active {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

.invoice-list-search {
  width: 190px;
}

.invoice-list-alert {
  margin: var(--space-3) var(--space-5) 0;
}

.invoice-list-loading {
  margin: var(--space-3) var(--space-5);
}

.invoice-list-table-frame {
  margin: 0 var(--space-5) var(--space-6);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  transition: opacity var(--transition-normal);
}

.invoice-list-table-frame.is-loading {
  opacity: 0.55;
}

.table.invoice-list-table {
  border-collapse: separate;
  border-spacing: 0;
}

.invoice-list-table thead th {
  top: calc(var(--invoice-header-height) + var(--invoice-toolbar-height));
  z-index: calc(var(--z-sticky) + 1);
  height: 34px;
  background: var(--bg-muted);
  box-shadow: var(--shadow-sm);
}

.invoice-list-table tbody tr.invoice-list-row {
  cursor: pointer;
}

.invoice-list-table tbody tr.invoice-list-row:focus {
  outline: 0;
  box-shadow: inset var(--shadow-focus);
}

.invoice-list-table tbody tr.invoice-list-row.is-expanded {
  background: var(--color-primary-bg);
}

.invoice-expand-cell {
  color: var(--text-muted);
}

.invoice-expand-icon {
  display: inline-block;
  font-size: 9px;
  transition: transform var(--transition-normal);
}

.invoice-expand-icon.is-open {
  transform: rotate(90deg);
}

.invoice-number-cell {
  text-align: left !important;
}

.invoice-clearance-number,
.invoice-tracking-number {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.invoice-clearance-number {
  color: var(--text-primary);
  font-size: var(--font-size-base);
}

.invoice-tracking-number {
  margin-top: 2px;
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}

.invoice-numeric-cell,
.invoice-volume-value {
  font-variant-numeric: tabular-nums;
}

.invoice-volume-cell {
  white-space: normal !important;
}

.invoice-volume-value {
  display: block;
  margin-bottom: 3px;
}

.invoice-volume-track {
  display: block;
  width: 100%;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--bg-subtle);
}

.invoice-volume-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--color-primary-light);
}

.invoice-detail-row > td {
  padding: 0;
  overflow: visible;
  white-space: normal;
  background: var(--bg-muted);
}

.invoice-detail-wrap {
  padding: var(--space-3) var(--space-4) var(--space-4) 42px;
}

.invoice-quality-alert {
  margin-bottom: var(--space-3);
}

.invoice-status-cell .badge + .badge {
  margin-left: var(--space-1);
}

.invoice-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--space-3);
}

.invoice-detail-section {
  min-width: 0;
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}

.invoice-detail-title {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-md);
}

.invoice-detail-empty,
.invoice-detail-loading {
  padding: var(--space-4);
}

.table.invoice-group-table {
  table-layout: auto;
  font-size: var(--font-size-sm);
}

.invoice-group-table th,
.invoice-group-table td {
  padding: var(--space-1) var(--space-2);
}

.invoice-group-table th {
  position: static;
  background: var(--bg-subtle);
}

.invoice-composition-band {
  display: flex;
  width: 100%;
  height: 18px;
  overflow: clip;
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
}

.invoice-composition-segment {
  min-width: 2px;
  height: 100%;
}

.invoice-product-tone-0 { background: var(--color-primary); }
.invoice-product-tone-1 { background: var(--color-info); }
.invoice-product-tone-2 { background: var(--color-success); }
.invoice-product-tone-3 { background: var(--color-warning); }
.invoice-product-tone-4 { background: var(--color-primary-light); }
.invoice-product-tone-5 { background: var(--color-success-dark); }
.invoice-product-tone-6 { background: var(--color-danger); }
.invoice-product-tone-7 { background: var(--text-tertiary); }

.invoice-composition-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
}

.invoice-composition-legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.invoice-composition-legend-item i {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-sm);
}

.invoice-source-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.invoice-source-item {
  min-width: 0;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  background: var(--bg-muted);
}

.invoice-source-item dt {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}

.invoice-source-item dd {
  overflow: hidden;
  margin: 2px 0 0;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 国際送料 */
.intl-shipping-root {
  min-height: 100%;
  overflow-y: auto;
  padding: var(--space-4) var(--space-5) var(--space-8);
  background: var(--bg-body);
  color: var(--text-primary);
}

.intl-shipping-header {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.intl-shipping-title-wrap {
  flex: 1;
}

.intl-shipping-sync {
  display: flex;
  max-width: 54%;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.intl-sync-time,
.intl-sync-next {
  white-space: nowrap;
}

.intl-sync-error {
  overflow: hidden;
  max-width: 260px;
  color: var(--color-danger-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.intl-shipping-alert {
  margin-bottom: var(--space-3);
}

.intl-shipping-loading {
  min-height: 58px;
}

.intl-shipping-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: opacity var(--transition-normal);
}

.intl-shipping-content.is-loading {
  opacity: 0.5;
}

.intl-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.intl-card-title {
  margin: 0;
  font-size: var(--font-size-lg);
}

.intl-card-side-note {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

.intl-tabs {
  display: flex;
  gap: var(--space-1);
  padding: 0 var(--space-1);
  border-bottom: 1px solid var(--border-default);
}

.intl-tab-btn {
  position: relative;
  padding: var(--space-2) var(--space-4);
  border: 0;
  background: transparent;
  color: var(--text-tertiary);
  font-family: inherit;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

.intl-tab-btn:hover {
  color: var(--text-primary);
}

.intl-tab-btn.is-active {
  color: var(--color-primary);
}

.intl-tab-btn.is-active::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--color-primary);
  content: "";
}

.intl-tab-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.card.intl-rate-card,
.card.intl-deposit-chart-card,
.card.intl-history-card,
.card.intl-payments-card,
.card.intl-trend-card {
  min-width: 0;
  padding: var(--space-4);
}

.intl-rate-table-wrap,
.intl-history-table-wrap,
.intl-payment-table-wrap {
  margin-top: var(--space-3);
}

.table.intl-rate-table {
  min-width: 620px;
}

.intl-rate-table th:nth-child(1) { width: 29%; }
.intl-rate-table th:nth-child(2) { width: 23%; }
.intl-rate-table th:nth-child(3) { width: 28%; }
.intl-rate-table th:nth-child(4) { width: 20%; }

.intl-rate-table tbody tr.is-current {
  background: var(--color-primary-bg);
  box-shadow: inset 3px 0 0 var(--color-primary);
}

.intl-rate-table tbody tr.is-current:hover {
  background: var(--color-primary-subtle);
}

.intl-rate-band-cell {
  color: var(--text-secondary);
  font-weight: var(--font-weight-semibold);
}

.intl-number-cell {
  font-variant-numeric: tabular-nums;
}

.intl-now-chip {
  white-space: nowrap;
}

.intl-rate-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.intl-rate-detail {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-muted);
}

.intl-rate-detail span {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}

.intl-rate-detail strong {
  overflow: hidden;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.intl-chart-grid {
  stroke: var(--border-light);
  stroke-width: 1;
}

.intl-chart-tick {
  stroke: var(--border-medium);
  stroke-width: 1;
}

.intl-chart-axis-label {
  fill: var(--text-tertiary);
  font-family: var(--font-family);
  font-size: var(--font-size-xs);
}

.intl-chart-axis-title {
  fill: var(--text-secondary);
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.intl-chart-empty {
  fill: var(--text-muted);
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
}

.intl-balance-card {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-lg);
  background: var(--color-warning-bg);
}

.intl-balance-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.intl-balance-label {
  color: var(--color-warning-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.intl-balance-value {
  color: var(--color-warning-text);
  font-size: var(--font-size-xl);
  font-variant-numeric: tabular-nums;
}

.intl-balance-track {
  height: 7px;
  margin-top: var(--space-2);
  overflow: clip;
  border-radius: var(--radius-full);
  background: var(--color-warning-subtle);
}

.intl-balance-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--color-success);
}

.intl-balance-fill.is-warning {
  background: var(--color-warning);
}

.intl-balance-message {
  margin: var(--space-2) 0 0;
  color: var(--color-warning-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.intl-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.card.intl-kpi-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
}

.intl-kpi-label {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.intl-kpi-value {
  color: var(--text-primary);
  font-size: var(--font-size-2xl);
  font-variant-numeric: tabular-nums;
}

.intl-kpi-note {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}

.intl-deposit-chart,
.intl-trend-chart {
  display: block;
  width: 100%;
  min-height: 260px;
  margin-top: var(--space-2);
}

.intl-balance-line {
  fill: none;
  stroke: var(--color-success-dark);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.intl-balance-event-point {
  stroke: var(--color-success-dark);
  stroke-width: 2;
}

.intl-balance-event-point.is-deposit {
  fill: var(--color-success);
}

.intl-balance-event-point.is-payment {
  fill: var(--bg-surface);
}

.intl-threshold-line {
  stroke: var(--color-warning);
  stroke-dasharray: 6 5;
  stroke-width: 2;
}

.intl-threshold-label {
  fill: var(--color-warning-text);
  font-family: var(--font-family);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.intl-chart-legend {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-4);
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}

.intl-legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.intl-legend-dot {
  width: 9px;
  height: 9px;
  border: 2px solid var(--color-success-dark);
  border-radius: var(--radius-full);
}

.intl-legend-dot.is-deposit {
  background: var(--color-success);
}

.intl-legend-dot.is-payment {
  background: var(--bg-surface);
}

.intl-legend-line {
  width: 18px;
  border-top: 2px dashed var(--color-warning);
}

.table.intl-history-table {
  min-width: 980px;
}

.intl-history-table th:nth-child(1) { width: 12%; }
.intl-history-table th:nth-child(2) { width: 12%; }
.intl-history-table th:nth-child(3) { width: 12%; }
.intl-history-table th:nth-child(4) { width: 12%; }
.intl-history-table th:nth-child(5) { width: 30%; }
.intl-history-table th:nth-child(6) { width: 22%; }

.intl-detail-cell {
  text-align: left !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

.intl-reference-cell {
  text-align: left !important;
}

.intl-reference-cell span {
  display: block;
  overflow: hidden;
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.intl-trend-line {
  fill: none;
  stroke: var(--color-info);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.intl-trend-point {
  fill: var(--color-success-dark);
  stroke: var(--bg-surface);
  stroke-width: 2;
}

.intl-trend-point.is-mismatch {
  fill: var(--color-warning);
}

.intl-trend-rate-label {
  fill: var(--color-success-text);
  font-family: var(--font-family);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.intl-trend-weight-label {
  fill: var(--text-secondary);
  font-family: var(--font-family);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.intl-reform-line {
  stroke: var(--color-primary);
  stroke-dasharray: 5 4;
  stroke-width: 2;
}

.intl-reform-label {
  fill: var(--color-primary);
  font-family: var(--font-family);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.table.intl-payment-table {
  min-width: 960px;
}

.intl-payment-table th:nth-child(1) { width: 12%; }
.intl-payment-table th:nth-child(2) { width: 14%; }
.intl-payment-table th:nth-child(3) { width: 13%; }
.intl-payment-table th:nth-child(4) { width: 14%; }
.intl-payment-table th:nth-child(5) { width: 17%; }
.intl-payment-table th:nth-child(6) { width: 20%; }
.intl-payment-table th:nth-child(7) { width: 10%; }

.intl-tracking-cell {
  text-align: left !important;
}

.intl-other-methods {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}

.intl-other-summary {
  padding: var(--space-3) var(--space-4);
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

.intl-other-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  padding: 0 var(--space-4) var(--space-4);
}

.card.intl-other-card {
  padding: var(--space-3);
}

.intl-other-card h4 {
  margin: 0;
  font-size: var(--font-size-md);
}

.intl-other-card p {
  margin: var(--space-1) 0;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.intl-other-card span {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}

@media (max-width: 900px) {
  .intl-shipping-root {
    padding: var(--space-3);
  }

  .intl-shipping-header {
    flex-wrap: wrap;
  }

  .intl-shipping-sync {
    order: 3;
    width: 100%;
    max-width: none;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .intl-kpi-grid,
  .intl-rate-detail-grid,
  .intl-other-grid {
    grid-template-columns: 1fr;
  }

  .intl-tabs {
    overflow-x: auto;
  }

  .intl-tab-btn {
    flex: none;
  }
}

.cs-notify-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  height: 100%;
  min-height: 0;
  overflow: auto;
  padding: var(--space-5);
  background: var(--bg-body);
}

.cs-notify-header,
.cs-notify-section-header,
.cs-notify-actions,
.cs-notify-checks {
  display: flex;
  align-items: center;
}

.cs-notify-header,
.cs-notify-section-header {
  justify-content: space-between;
  gap: var(--space-3);
}

.cs-notify-title,
.cs-notify-section-title,
.cs-notify-modal-title {
  margin: 0;
  color: var(--text-primary);
}

.cs-notify-title {
  font-size: var(--font-size-xl);
}

.cs-notify-section-title,
.cs-notify-modal-title {
  font-size: var(--font-size-lg);
}

.cs-notify-description,
.cs-notify-help {
  margin: var(--space-1) 0 0;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.cs-notify-status {
  min-height: var(--space-4);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.cs-notify-status.is-success { color: var(--color-success-text); }
.cs-notify-status.is-warning { color: var(--color-warning-text); }
.cs-notify-status.is-error { color: var(--color-danger-text); }

.cs-notify-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 0;
}

.cs-notify-table {
  min-width: 980px;
}

.cs-notify-table th:nth-child(1) { width: 15%; }
.cs-notify-table th:nth-child(2) { width: 16%; }
.cs-notify-table th:nth-child(3) { width: 13%; }
.cs-notify-table th:nth-child(4) { width: 25%; }
.cs-notify-table th:nth-child(5) { width: 8%; }
.cs-notify-table th:nth-child(6) { width: 8%; }
.cs-notify-table th:nth-child(7) { width: 15%; }

.cs-notify-table .cs-notify-text-cell {
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
}

.cs-notify-route-key {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: var(--font-size-sm);
}

.cs-notify-mentions {
  line-height: var(--line-height-relaxed);
}

.cs-notify-actions,
.cs-notify-checks {
  gap: var(--space-2);
}

.cs-notify-actions {
  justify-content: center;
}

.cs-notify-rules {
  width: 100%;
  min-height: 220px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  line-height: var(--line-height-relaxed);
}

.cs-notify-modal {
  max-width: 720px;
}

.cs-notify-mention-input {
  min-height: 120px;
}

.cs-notify-hidden {
  display: none;
}

#csLearnedRulesSubPanel {
  padding: 0;
  overflow: auto;
}

#csReplyFeedbackSubPanel { overflow: auto; }
.cs-feedback-page { padding: 20px; }
.cs-feedback-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.cs-feedback-head h2 { margin: 0 0 6px; }
.cs-feedback-head p { margin: 0; color: var(--text-muted, #64748b); }
.cs-feedback-flag { margin: 14px 0; padding: 10px 12px; border-radius: 8px; background: #fff7ed; color: #9a3412; }
.cs-feedback-flag.is-on { background: #ecfdf5; color: #166534; }
.cs-feedback-filter { margin: 12px 0; }
.cs-feedback-message { margin: 8px 0; color: #166534; }
.cs-feedback-table small { color: var(--text-muted, #64748b); }
.cs-feedback-state { display: inline-block; white-space: nowrap; border-radius: 999px; padding: 3px 8px; background: #e2e8f0; }
.cs-feedback-state.state-blocked { background: #fee2e2; color: #991b1b; }
.cs-feedback-state.state-completed { background: #dcfce7; color: #166534; }
.cs-feedback-state.state-ready { background: #dbeafe; color: #1e40af; }

.cs-learned-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 100%;
  padding: var(--space-4);
  background: var(--bg-body);
}

.cs-learned-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cs-learned-title {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-xl);
}

.cs-learned-description {
  margin: var(--space-1) 0 0;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.cs-learned-banner {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-md);
  color: var(--color-warning-text);
  background: var(--color-warning-bg);
  font-size: var(--font-size-sm);
}

.cs-learned-banner.is-enabled {
  border-color: var(--color-success);
  color: var(--color-success-text);
  background: var(--color-success-bg);
}

.cs-learned-status {
  min-height: var(--space-4);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.cs-learned-status.is-success { color: var(--color-success-text); }
.cs-learned-status.is-warning { color: var(--color-warning-text); }
.cs-learned-status.is-error { color: var(--color-danger-text); }

.cs-learned-tabs,
.cs-learned-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.cs-learned-card {
  min-height: 0;
}

.cs-learned-table {
  min-width: 1320px;
}

.cs-learned-table th:nth-child(1) { width: 6%; }
.cs-learned-table th:nth-child(2) { width: 8%; }
.cs-learned-table th:nth-child(3) { width: 12%; }
.cs-learned-table th:nth-child(4) { width: 28%; }
.cs-learned-table th:nth-child(5) { width: 7%; }
.cs-learned-table th:nth-child(6) { width: 11%; }
.cs-learned-table th:nth-child(7) { width: 10%; }
.cs-learned-table th:nth-child(8) { width: 11%; }
.cs-learned-table th:nth-child(9) { width: 10%; }

/* The base .table td truncates text. Learned rule bodies must remain reviewable. */
.cs-learned-table td.cs-learned-rule-text,
.cs-learned-table td.cs-learned-key-cell {
  max-width: none;
  text-align: left;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  line-height: var(--line-height-relaxed);
}

.cs-learned-key-cell,
.cs-learned-muted {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.cs-learned-key-cell {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.cs-learned-more {
  display: flex;
  justify-content: center;
}

.cs-learned-modal {
  max-width: 560px;
}

.cs-learned-modal .textarea {
  width: 100%;
}

.cs-learned-modal-error {
  min-height: var(--space-4);
  margin-top: var(--space-2);
  color: var(--color-danger-text);
  font-size: var(--font-size-sm);
}

#csLiveFlagsSubPanel {
  padding: 0;
  overflow: auto;
}

/* サブパネル（flex column）の中で縮まないこと。縮むとカードが潰れて行が切れる。 */
.cs-live-flags-page {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: var(--space-3);
  /* 親 .sub-panel は flex column なので、flex-shrink を残すと min-height:100% ぶんまで
     押し縮められ、親の overflow-y:auto が効かず（scrollHeight == clientHeight）
     ページ全体をスクロールできなくなる。 */
  flex-shrink: 0;
  min-height: 100%;
  padding: var(--space-4);
  background: var(--bg-body);
}

.cs-live-flags-title,
.cs-live-flags-group-title,
.cs-live-flags-modal .modal-header h3 {
  margin: 0;
  color: var(--text-primary);
}

.cs-live-flags-title { font-size: var(--font-size-xl); }
.cs-live-flags-group-title { font-size: var(--font-size-lg); }

.cs-live-flags-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cs-live-flags-description {
  margin: var(--space-1) 0 0;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.cs-live-flags-notice {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-info);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  background: var(--color-info-subtle);
  font-size: var(--font-size-sm);
}

.cs-live-flags-status,
.cs-live-flags-modal-error {
  min-height: var(--space-4);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.cs-live-flags-status.is-success { color: var(--color-success-text); }
.cs-live-flags-status.is-warning { color: var(--color-warning-text); }
.cs-live-flags-status.is-error,
.cs-live-flags-modal-error { color: var(--color-danger-text); }

/* カードは中身の高さのまま縦に積む（縮めると行が途中で切れて読めなくなる）。 */
.cs-live-flags-card {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: var(--space-3);
  /* カードを縮ませない。縮むと中の .table-scroll（flex:1・overflow:auto ＝ 自動最小サイズが
     効かない）が潰れ、内側の .table-container（overflow:hidden）が行を切り落として
     設定行が画面から消える。 */
  flex-shrink: 0;
  min-height: 0;
}

/* --- 設定一覧: 1行 = スイッチ + 設定名 --- */
.cs-live-flags-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cs-live-flags-item {
  padding: var(--space-2) 0;
  border-top: 1px solid var(--border-light);
}

.cs-live-flags-item:first-child { border-top: 0; }

.cs-live-flags-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.cs-live-flags-item-name {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  overflow-wrap: anywhere;
}

.cs-live-flags-lock {
  flex: 0 0 auto;
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

/* 3つから選ぶ設定（返送カンバンの delivery_owner）。ON/OFFのスイッチと同じ列に置く。 */
.cs-live-flags-select {
  flex: 0 0 auto;
  max-width: 340px;
}

/* 数を入れる設定（Amazon返品の自動受取の1回あたり上限）。スイッチ・プルダウンと同じ列に置く。 */
.cs-live-flags-number {
  flex: 0 0 auto;
  width: 96px;
}

.cs-live-flags-switch {
  position: relative;
  flex: 0 0 auto;
  width: 40px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-full);
  background: var(--bg-active);
  cursor: pointer;
  transition: background var(--transition-normal), border-color var(--transition-normal);
}

.cs-live-flags-switch[aria-checked="true"] {
  border-color: var(--color-success-hover);
  background: var(--color-success);
}

.cs-live-flags-switch:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.cs-live-flags-switch:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.cs-live-flags-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-normal);
}

.cs-live-flags-switch[aria-checked="true"] .cs-live-flags-switch-thumb {
  transform: translateX(18px);
}

/* 「?」= その場で詳細を開くボタン（別モーダルにしない） */
.cs-live-flags-help {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  line-height: 1;
  cursor: pointer;
}

.cs-live-flags-help:hover {
  background: var(--bg-hover);
  color: var(--text-secondary);
}

.cs-live-flags-help[aria-expanded="true"] {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
  color: var(--color-primary);
}

.cs-live-flags-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-2) 0 var(--space-1) calc(40px + var(--space-3));
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-muted);
}

.cs-live-flags-detail-text {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  overflow-wrap: anywhere;
}

.cs-live-flags-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  margin: 0;
}

.cs-live-flags-meta-row {
  display: flex;
  gap: var(--space-2);
  min-width: 0;
}

.cs-live-flags-meta dt {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  white-space: nowrap;
}

.cs-live-flags-meta dd {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  overflow-wrap: anywhere;
}

.cs-live-flags-key {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}

.cs-live-flags-key,
.cs-live-flags-confirm-text {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

/* 変更履歴は表のまま。列は%で配り、横スクロールは出さない。 */
.cs-live-flags-history th:nth-child(1) { width: 19%; }
.cs-live-flags-history th:nth-child(2) { width: 31%; }
.cs-live-flags-history th:nth-child(3) { width: 17%; }
.cs-live-flags-history th:nth-child(4) { width: 20%; }
.cs-live-flags-history th:nth-child(5) { width: 13%; }

.cs-live-flags-history td,
.cs-live-flags-confirm-text {
  overflow-wrap: anywhere;
  white-space: normal;
}

.cs-live-flags-modal { max-width: 620px; }
.cs-live-flags-modal .input { width: 100%; }

.cs-live-flags-confirm-text {
  margin-bottom: var(--space-3);
  padding: var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-muted);
}

.cs-live-flags-caution {
  margin: 0;
  padding: var(--space-2);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-md);
  color: var(--color-danger-text);
  background: var(--color-danger-subtle);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  overflow-wrap: anywhere;
}

.cs-live-flags-hidden { display: none; }

/* 取引先メール差出人（modules/cs-partner-mail-senders.js） */
.cs-partner-mail-senders-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 100%;
  padding: var(--space-4);
  background: var(--bg-body);
}

.cs-partner-mail-senders-title,
.cs-partner-mail-senders-subtitle {
  margin: 0;
  color: var(--text-primary);
}

.cs-partner-mail-senders-title { font-size: var(--font-size-xl); }
.cs-partner-mail-senders-subtitle { font-size: var(--font-size-lg); }

.cs-partner-mail-senders-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cs-partner-mail-senders-description {
  margin: var(--space-1) 0 0;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.cs-partner-mail-senders-guide p,
.cs-partner-mail-senders-guide ul {
  margin: 0;
}

.cs-partner-mail-senders-guide ul {
  margin-top: var(--space-2);
  padding-left: var(--space-4);
}

.cs-partner-mail-senders-status {
  min-height: var(--space-4);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.cs-partner-mail-senders-status.is-success { color: var(--color-success-text); }
.cs-partner-mail-senders-status.is-warning { color: var(--color-warning-text); }
.cs-partner-mail-senders-status.is-error { color: var(--color-danger-text); }

.cs-partner-mail-senders-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 0;
}

.cs-partner-mail-senders-form {
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) minmax(14rem, 2fr) minmax(12rem, 2fr) minmax(12rem, 2fr) auto;
  align-items: end;
  gap: var(--space-3);
}

.cs-partner-mail-senders-form .form-field { margin-top: 0; }

.cs-partner-mail-senders-form-action {
  display: flex;
  align-items: flex-end;
}

.cs-partner-mail-senders-table { min-width: 960px; }
.cs-partner-mail-senders-table th:nth-child(1) { width: 12%; }
.cs-partner-mail-senders-table th:nth-child(2) { width: 26%; }
.cs-partner-mail-senders-table th:nth-child(3) { width: 20%; }
.cs-partner-mail-senders-table th:nth-child(4) { width: 22%; }
.cs-partner-mail-senders-table th:nth-child(5) { width: 8%; }
.cs-partner-mail-senders-table th:nth-child(6) { width: 12%; }

.cs-partner-mail-senders-table td.cs-partner-mail-senders-value,
.cs-partner-mail-senders-table td.cs-partner-mail-senders-wrap {
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: var(--line-height-relaxed);
}

.cs-partner-mail-senders-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.cs-partner-mail-senders-muted {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}

.cs-learned-hidden {
  display: none;
}

.rmail-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--bg-body);
}

.rmail-page-title,
.rmail-section-title {
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
}

.rmail-table {
  min-width: 900px;
}

.rmail-table th:nth-child(1) { width: 16%; }
.rmail-table th:nth-child(2) { width: 36%; }
.rmail-table th:nth-child(3) { width: 8%; }
.rmail-table th:nth-child(4) { width: 13%; }
.rmail-table th:nth-child(5) { width: 15%; }
.rmail-table th:nth-child(6) { width: 12%; }
.rmail-table td:nth-child(2) { text-align: left; }

.rmail-pagination {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.rmail-modal {
  width: 94%;
  max-width: 1100px;
  max-height: 92vh;
}

.rmail-modal-title {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-xl);
}

.rmail-detail-grid {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  margin: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.rmail-detail-grid dt,
.rmail-detail-grid dd {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-light);
}

.rmail-detail-grid dt {
  background: var(--bg-muted);
  color: var(--text-secondary);
  font-weight: var(--font-weight-semibold);
}

.rmail-detail-grid dd {
  min-width: 0;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.rmail-content {
  max-height: 360px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: var(--line-height-relaxed);
}

.rmail-preview-card {
  margin-top: var(--space-3);
}

.rmail-preview-image {
  display: none;
  width: 100%;
  max-height: 70vh;
  object-fit: contain;
  margin-top: var(--space-2);
  background: var(--bg-muted);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}

@media (max-width: 720px) {
  .rmail-detail-grid {
    grid-template-columns: 1fr;
  }
}

/* === LINE > LP（飛び先） === */
.rlp-panel-host,
#rakutenLpPanel {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.rlp-list-page {
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: var(--space-5);
  background: var(--bg-body);
  color: var(--text-primary);
}

.rlp-list-header,
.rlp-section-heading,
.rlp-draft-row,
.rlp-draft-title,
.rlp-history-row,
.rlp-approval-header,
.rlp-approval-heading,
.rlp-action-buttons,
.rlp-toolbar,
.rlp-side-header,
.rlp-checkpoint-head,
.rlp-check-row {
  display: flex;
  align-items: center;
}

.rlp-list-header {
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.rlp-list-heading-copy h1 {
  font-size: var(--font-size-3xl);
  line-height: var(--line-height-tight);
}

.rlp-list-heading-copy p {
  margin-top: var(--space-1);
  color: var(--text-tertiary);
  font-size: var(--font-size-md);
}

.rlp-list-section {
  margin-bottom: var(--space-4);
  padding: 0;
  overflow: hidden;
}

.rlp-section-heading {
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-muted);
}

.rlp-section-heading h2 {
  font-size: var(--font-size-lg);
}

.rlp-draft-list,
.rlp-history-list {
  display: flex;
  flex-direction: column;
}

/* 本番反映の元栓（kill switch）カード */
.rlp-switch-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
}

.rlp-switch-copy {
  min-width: 0;
}

.rlp-switch-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}

.rlp-switch-help {
  margin-top: var(--space-1);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--text-tertiary);
}

.rlp-switch-meta {
  margin-top: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.rlp-switch-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 0 0 auto;
}

.rlp-switch {
  position: relative;
  width: 42px;
  height: 24px;
  flex: 0 0 auto;
}

.rlp-switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.rlp-switch span {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-full);
  background: var(--border-medium);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.rlp-switch span::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast);
}

.rlp-switch input:focus-visible + span {
  box-shadow: var(--shadow-focus);
}

.rlp-switch input:checked + span {
  background: var(--color-success);
}

.rlp-switch input:checked + span::before {
  transform: translateX(18px);
}

.rlp-switch input:disabled + span {
  cursor: not-allowed;
  opacity: .6;
}

.rlp-switch-confirm {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border-top: 1px solid var(--border-default);
  background: var(--bg-muted);
}

/* クラスの display は [hidden] の既定より強い。これが無いと閉じたはずの確認パネルが出たままになる。 */
.rlp-switch-confirm[hidden] {
  display: none;
}

.rlp-switch-warning {
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
  color: var(--color-danger-text);
}

.rlp-switch-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.rlp-switch-field-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--text-secondary);
}

.rlp-switch-error {
  padding: 0 var(--space-4) var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-danger-text);
}

.rlp-switch-confirm .rlp-switch-error {
  padding: 0;
}

/* 元栓の説明文の並びに置く異常表示（監査記録の食い違い・設定欠落）。
   .rlp-switch-error はカード直下に置く前提で左右paddingを持つため、
   説明文の中に入れるときは隣の .rlp-switch-meta と同じ左端にそろえる。 */
.rlp-switch-copy .rlp-switch-error {
  padding: 0;
  margin-top: var(--space-1);
}

.rlp-switch-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

.rlp-draft-row {
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-light);
}

.rlp-draft-row:last-child,
.rlp-history-row:last-child {
  border-bottom: 0;
}

.rlp-draft-copy {
  min-width: 0;
}

.rlp-draft-title {
  gap: var(--space-2);
  font-size: var(--font-size-md);
}

.rlp-kind-badge {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rlp-draft-meta,
.rlp-layout-id,
.rlp-history-date,
.rlp-no-change {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.rlp-draft-meta,
.rlp-layout-id {
  margin-top: var(--space-1);
}

.rlp-pending-empty {
  min-height: 96px;
}

.rlp-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.rlp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-base);
}

.rlp-table th,
.rlp-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-light);
  text-align: left;
  vertical-align: middle;
}

.rlp-table th {
  color: var(--text-secondary);
  background: var(--bg-muted);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

.rlp-layout-row:hover {
  background: var(--bg-hover);
}

.rlp-url-key {
  color: var(--color-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.rlp-pending-button {
  border: 1px solid var(--color-warning);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}

.rlp-history-row {
  gap: var(--space-3);
  min-height: 40px;
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--border-light);
}

.rlp-history-date {
  margin-left: auto;
}

.rlp-history-error {
  max-width: 360px;
  overflow: hidden;
  color: var(--color-danger-text);
  font-size: var(--font-size-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rlp-state-card {
  width: min(520px, calc(100% - 40px));
  margin: var(--space-8) auto;
  text-align: center;
}

.rlp-state-title {
  margin-bottom: var(--space-2);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
}

.rlp-state-message {
  margin-bottom: var(--space-4);
  color: var(--color-danger-text);
  overflow-wrap: anywhere;
}

.rlp-approval {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--bg-body);
  color: var(--text-primary);
}

.rlp-approval-header {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 68px;
  padding: var(--space-2) var(--space-5);
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}

.rlp-approval-title-group {
  min-width: 0;
}

.rlp-back {
  padding-left: 0;
}

.rlp-approval-heading {
  gap: var(--space-2);
}

.rlp-approval-heading h1 {
  overflow: hidden;
  font-size: var(--font-size-xl);
  line-height: var(--line-height-tight);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rlp-draft-id,
.rlp-approval-meta,
.rlp-approval-lock {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.rlp-approval-meta {
  margin-top: var(--space-1);
}

.rlp-approval-actions {
  flex: 0 0 auto;
  gap: var(--space-3);
}

.rlp-approval-lock {
  max-width: 220px;
  text-align: right;
  line-height: var(--line-height-normal);
}

.rlp-action-buttons {
  gap: var(--space-2);
}

.rlp-reject,
.rlp-approve {
  min-width: 72px;
}

.rlp-toolbar {
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: var(--space-3);
  min-height: 52px;
  padding: var(--space-2) var(--space-5);
}

.rlp-segment {
  display: inline-flex;
  padding: 3px;
  border-radius: var(--radius-full);
  background: var(--bg-active);
}

.rlp-segment-button {
  padding: 5px 12px;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}

.rlp-segment-button.is-active {
  background: var(--bg-surface);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.rlp-mode-hint {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.rlp-approval-body {
  display: flex;
  flex: 1 1 auto;
  gap: var(--space-4);
  min-width: 0;
  min-height: 0;
  padding: 0 var(--space-5) var(--space-4);
}

.rlp-stage {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background-color: var(--bg-surface);
  background-image: radial-gradient(var(--border-default) 1px, transparent 1px);
  background-size: 18px 18px;
  box-shadow: var(--shadow-sm);
}

.rlp-stage.is-scroll {
  overflow: auto;
}

.rlp-stage.is-pc-fit {
  overflow-x: hidden;
  overflow-y: auto;
}

.rlp-fit-note {
  position: absolute;
  z-index: 3;
  top: var(--space-2);
  left: var(--space-3);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  background: var(--bg-nav);
  color: var(--text-inverse);
  font-size: var(--font-size-sm);
  opacity: .8;
}

.rlp-scaler {
  flex: 0 0 auto;
  margin-top: var(--space-3);
  transform-origin: top center;
}

.rlp-stage.is-scroll .rlp-scaler {
  margin-top: 0;
}

.rlp-device {
  width: 414px;
  overflow: hidden;
  border: 1px solid var(--border-medium);
  border-radius: 26px;
  background: var(--bg-surface);
  box-shadow: var(--shadow-xl);
}

.rlp-device.is-pc {
  width: 1180px;
  border-radius: var(--radius-xl);
}

.rlp-pc-chrome,
.rlp-pc-cols,
.rlp-pc-main {
  display: contents;
}

.rlp-pc-topbar,
.rlp-pc-crumb,
.rlp-pc-side {
  display: none;
}

.rlp-device.is-pc > .rlp-device-chrome {
  display: none;
}

.rlp-device.is-pc .rlp-pc-chrome {
  display: block;
  background: var(--bg-surface);
}

.rlp-device.is-pc .rlp-pc-topbar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 10px var(--space-5);
  border-bottom: 1px solid var(--border-default);
}

.rlp-pc-logo {
  color: #bf0000;
  font-size: 18px;
  font-weight: var(--font-weight-bold);
}

.rlp-pc-search {
  flex: 1 1 auto;
  max-width: 520px;
  padding: 6px var(--space-3);
  border: 2px solid #bf0000;
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-size: var(--font-size-base);
}

.rlp-pc-icons {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

.rlp-device.is-pc .rlp-pc-crumb {
  display: block;
  overflow: hidden;
  padding: var(--space-2) var(--space-5);
  border-bottom: 1px solid var(--border-light);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rlp-device.is-pc .rlp-pc-cols {
  display: flex;
  align-items: stretch;
}

.rlp-device.is-pc .rlp-pc-side {
  display: block;
  flex: 0 0 230px;
  width: 230px;
  padding: var(--space-4);
  border-right: 1px solid var(--border-light);
  font-size: var(--font-size-base);
}

.rlp-pc-shop-placeholder {
  width: 84px;
  height: 84px;
  margin-bottom: var(--space-2);
  border-radius: var(--radius-lg);
  background: var(--bg-muted);
}

.rlp-pc-shop-name {
  margin: 0 0 var(--space-1);
  color: var(--text-primary);
  font-size: var(--font-size-md);
}

.rlp-pc-shop-description {
  margin: 0 0 var(--space-3);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  line-height: 1.6;
}

.rlp-pc-category {
  padding: 7px var(--space-1);
  border-bottom: 1px solid var(--border-light);
  color: var(--text-secondary);
}

.rlp-device.is-pc .rlp-pc-main {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}

.rlp-device-chrome {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-surface);
}

.rlp-rakuten-logo {
  color: var(--color-danger-text);
  font-size: var(--font-size-xl);
}

.rlp-device-page-title {
  overflow: hidden;
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rlp-hero {
  position: relative;
}

.rlp-hero-image {
  display: block;
  width: 100%;
  height: auto;
}

.rlp-widget {
  position: relative;
}

.rlp-widget-text {
  padding: var(--space-4);
  font-size: var(--font-size-md);
  line-height: 1.85;
  white-space: pre-wrap;
}

.rlp-device.is-pc .rlp-widget-text {
  padding: var(--space-5) var(--space-8);
  font-size: var(--font-size-lg);
}

.rlp-widget-title {
  padding: var(--space-3) var(--space-4);
  text-align: center;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

.rlp-widget-image,
.rlp-compare-image {
  display: block;
  width: 100%;
  height: auto;
}

.rlp-image-link {
  display: block;
}

.rlp-large-images,
.rlp-videos {
  display: flex;
  flex-direction: column;
}

.rlp-device.is-pc .rlp-widget-type-title > .rlp-widget-image,
.rlp-device.is-pc .rlp-videos {
  width: min(560px, 100%);
}

.rlp-image-caption {
  padding: var(--space-1) var(--space-3) var(--space-3);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  text-align: center;
}

.rlp-image-unavailable {
  padding: var(--space-6);
  background: var(--bg-muted);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  text-align: center;
}

.rlp-image-error {
  min-height: 80px;
  background: var(--color-danger-bg);
}

.rlp-widget-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: 92px;
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-muted);
  color: var(--text-secondary);
  text-align: center;
}

.rlp-widget-placeholder span {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.rlp-placeholder-large-common-banners {
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}

.rlp-ranking-placeholders {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  width: 100%;
  margin-top: var(--space-2);
}

.rlp-ranking-placeholders span {
  min-width: 0;
  padding: var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  text-align: center;
}

.rlp-device.is-pc .rlp-widget-type-in-shop-ranking > .rlp-widget-placeholder {
  width: min(640px, 100%);
}

.rlp-widget-items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  width: 100%;
  margin-top: var(--space-3);
}

.rlp-device.is-pc .rlp-widget-items {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.rlp-widget-item-placeholder {
  display: flex;
  min-width: 0;
  overflow: hidden;
  flex-direction: column;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}

.rlp-widget-item-image {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  background: var(--bg-muted);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}

.rlp-widget-item-label {
  padding: var(--space-1);
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  text-align: center;
}

.rlp-video-frame {
  position: relative;
}

.rlp-video-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--bg-nav) 20%, transparent);
  color: var(--text-inverse);
  font-size: 34px;
}

.rlp-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-4);
}

.rlp-keyword {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  color: var(--color-primary);
  font-size: var(--font-size-sm);
}

.rlp-mode-check .rlp-dim {
  opacity: .3;
  filter: grayscale(.7);
}

.rlp-checkpoint-mark {
  display: none;
}

.rlp-mode-check .rlp-checkpoint-target {
  z-index: 1;
  border-radius: var(--radius-lg);
  outline: 6px solid var(--color-danger);
  outline-offset: -2px;
  box-shadow: 0 0 0 12px var(--color-danger-subtle);
}

.rlp-mode-check .rlp-checkpoint-mark {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: var(--space-1);
  border-radius: var(--radius-full);
  background: var(--color-danger);
  color: var(--text-inverse);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
}

@keyframes rlp-checkpoint-pulse {
  0% { box-shadow: 0 0 0 0 var(--color-danger); }
  100% { box-shadow: 0 0 0 40px transparent; }
}

.rlp-mode-check .rlp-pulse {
  animation: rlp-checkpoint-pulse 1s ease-out 3;
}

.rlp-next-checkpoint {
  position: absolute;
  z-index: 4;
  right: var(--space-3);
  bottom: var(--space-3);
  display: none;
  padding: var(--space-2) var(--space-4);
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-danger);
  color: var(--text-inverse);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
}

.rlp-mode-check .rlp-next-checkpoint {
  display: block;
}

.rlp-side-panel {
  display: flex;
  flex: 0 0 350px;
  flex-direction: column;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

.rlp-side-header {
  flex: 0 0 auto;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-default);
}

.rlp-side-header h2 {
  font-size: var(--font-size-lg);
}

.rlp-confirmed-count {
  color: var(--color-primary);
  font-size: var(--font-size-sm);
}

.rlp-checkpoint-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.rlp-checkpoint-card {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-default);
  transition: background var(--transition-normal);
}

.rlp-checkpoint-card.is-checked {
  background: var(--color-success-bg);
}

.rlp-panel-pulse {
  background: var(--color-warning-bg);
}

.rlp-checkpoint-head {
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.rlp-checkpoint-number {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  background: var(--color-danger);
  color: var(--text-inverse);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
}

.rlp-checkpoint-card.is-checked .rlp-checkpoint-number {
  background: var(--color-success);
}

.rlp-checkpoint-title {
  font-size: var(--font-size-md);
}

.rlp-checkpoint-go {
  margin-left: auto;
  padding: 2px var(--space-2);
  border: 1px solid var(--color-info-border);
  border-radius: var(--radius-full);
  background: var(--color-primary-bg);
  color: var(--color-primary);
  cursor: pointer;
  font-size: var(--font-size-sm);
}

.rlp-checkpoint-compare {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2);
}

.rlp-compare-box {
  min-width: 0;
  padding: var(--space-2);
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-muted);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  overflow-wrap: anywhere;
}

.rlp-compare-box.is-after {
  border-color: var(--color-success);
  background: var(--color-success-bg);
}

.rlp-compare-box strong {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--font-size-xs);
}

.rlp-compare-image {
  border-radius: var(--radius-sm);
}

.rlp-compare-value {
  margin-top: var(--space-1);
  white-space: pre-wrap;
}

.rlp-coupon-box {
  margin-bottom: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--color-info-border);
  border-radius: var(--radius-md);
  background: var(--color-info-bg);
  color: var(--color-primary-active);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

.rlp-page-checkpoint,
.rlp-publish-checkpoint {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-info-border);
  border-radius: var(--radius-md);
  background: var(--color-info-bg);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  overflow-wrap: anywhere;
}

.rlp-public-url {
  color: var(--color-primary-active);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.rlp-publish-checkpoint .rlp-compare-image {
  max-height: 180px;
  object-fit: contain;
}

.rlp-coupon-after {
  font-weight: var(--font-weight-bold);
}

.rlp-coupon-note,
.rlp-thumbnail-note {
  margin-top: var(--space-1);
  color: var(--text-tertiary);
  font-family: var(--font-family);
  font-size: var(--font-size-xs);
}

.rlp-check-row {
  gap: var(--space-2);
  margin-top: var(--space-2);
  cursor: pointer;
  font-size: var(--font-size-base);
}

.rlp-check-row input {
  width: 16px;
  height: 16px;
  accent-color: var(--color-success);
}

.rlp-side-foot {
  flex: 0 0 auto;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border-default);
  background: var(--bg-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

.rlp-side-foot p {
  color: var(--text-tertiary);
}

@media (max-width: 1100px) {
  .rlp-approval-lock {
    display: none;
  }

  .rlp-side-panel {
    flex-basis: 310px;
  }

  .rlp-toolbar {
    gap: var(--space-2);
  }
}

@media (max-width: 820px) {
  .rlp-approval-body {
    flex-direction: column;
    overflow-y: auto;
  }

  .rlp-stage {
    min-height: 520px;
  }

  .rlp-side-panel {
    flex: 0 0 auto;
    min-height: 420px;
  }

  .rlp-approval-header {
    align-items: flex-start;
  }
}

/* === auPAY売上確定 === */
.aupay-capture-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.aupay-capture-heading h3 {
  margin: 0;
}

.aupay-capture-description {
  margin: 0 0 12px;
  color: var(--text-secondary);
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
}

.aupay-capture-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.aupay-capture-result {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.aupay-capture-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.aupay-capture-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.aupay-capture-note {
  color: var(--text-tertiary);
}

.aupay-capture-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.aupay-capture-section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.aupay-capture-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.aupay-capture-section-title h4 {
  margin: 0;
  font-size: var(--font-size-md);
}

.aupay-capture-table td.aupay-capture-left,
.aupay-capture-table th.aupay-capture-left {
  text-align: left;
}

.aupay-capture-table td.aupay-capture-check,
.aupay-capture-table th.aupay-capture-check {
  width: 44px;
  text-align: center;
}

.aupay-capture-table input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-danger);
  cursor: pointer;
}

.aupay-capture-table input[type="checkbox"]:disabled {
  cursor: not-allowed;
}

.aupay-capture-order-id {
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.aupay-capture-order-sub {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.aupay-capture-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}

.aupay-capture-summary-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.aupay-capture-summary-label {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.aupay-capture-summary-value {
  color: var(--text-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

.aupay-capture-status-groups {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.aupay-capture-modal-list,
.aupay-capture-breakdown {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.aupay-capture-modal-orders {
  margin: 0;
  padding-left: 18px;
  color: var(--text-primary);
}

.aupay-capture-modal-orders li,
.aupay-capture-breakdown li {
  line-height: var(--line-height-relaxed);
}

.aupay-capture-breakdown {
  margin: 0;
  padding-left: 18px;
  color: var(--text-secondary);
}

@media (max-width: 768px) {
  .aupay-capture-heading,
  .aupay-capture-section-header {
    align-items: flex-start;
  }

  .aupay-capture-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* === マニュアル既読/滞在分析 === */
.manual-analytics-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--bg-body);
}

.manual-analytics-notes {
  margin: var(--space-3);
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
}

.manual-analytics-title {
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.manual-analytics-sub-text {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.manual-analytics-main-text {
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
}

.manual-analytics-text-left {
  text-align: left;
}

.manual-analytics-clickable {
  cursor: pointer;
}

.manual-analytics-content {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0 var(--space-3) var(--space-3);
}

.manual-analytics-kpis {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

.manual-analytics-kpi {
  min-width: 140px;
}

.manual-analytics-kpi-label {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}

.manual-analytics-kpi-value {
  color: var(--text-primary);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
}

.manual-analytics-section {
  margin-top: var(--space-3);
}

.manual-analytics-section-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}

.manual-analytics-section-scroll {
  max-height: 320px;
}

.manual-analytics-chip-list {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}

.manual-analytics-empty-compact {
  padding: var(--space-5);
}

.manual-analytics-error {
  color: var(--color-danger-text);
}

.manual-analytics-table {
  min-width: 860px;
}

.manual-analytics-col-title {
  width: 34%;
}

.manual-analytics-col-rate {
  width: 16%;
}

.manual-analytics-col-dwell {
  width: 14%;
}

.manual-analytics-col-other,
.manual-analytics-col-sections {
  width: 10%;
}

.manual-analytics-col-date {
  width: 16%;
}

/* === 操作マニュアル === */
.manual-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-3);
  padding: var(--space-4);
}

.manual-card {
  width: 100%;
  text-align: left;
  cursor: pointer;
  background: var(--bg-surface);
  transition: background var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.manual-card:hover {
  background: var(--color-primary-bg);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.manual-card-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  line-height: var(--line-height-tight);
}

.manual-card-subtitle {
  margin-top: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: var(--line-height-normal);
}

.manual-card-meta {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
}

.manual-reader {
  max-width: 880px;
  margin: 0 auto;
  padding: var(--space-5) var(--space-4) var(--space-8);
  color: var(--text-primary);
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
}

.manual-back-btn {
  margin-bottom: var(--space-4);
}

.manual-reader-head {
  margin-bottom: var(--space-6);
}

.manual-reader-crumb {
  margin-bottom: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}

.manual-reader h2 {
  margin: 0;
  font-size: var(--font-size-3xl);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}

.manual-reader h3 {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-xl);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.manual-reader p {
  margin: var(--space-2) 0 0;
  color: var(--text-secondary);
}

.manual-sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.manual-section {
  padding: var(--space-5);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}

.manual-step-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.manual-step-head h3 {
  margin: 0;
}

.manual-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--color-warning);
  color: var(--text-inverse);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  flex: 0 0 auto;
}

.alert,
.manual-note,
.manual-warn,
.manual-tip {
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
}

.alert {
  background: var(--bg-surface);
  color: var(--text-secondary);
}

.alert-danger {
  border-color: var(--color-danger);
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
}

.alert-warning {
  border-color: var(--color-warning);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}

.alert-info {
  border-color: var(--color-info-border);
  background: var(--color-info-bg);
  color: var(--color-info);
}

.manual-note {
  background: var(--bg-muted);
  color: var(--text-secondary);
}

.manual-warn {
  border-color: var(--color-warning);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}

.manual-tip {
  border-color: var(--color-info-border);
  background: var(--color-info-bg);
  color: var(--color-info);
}

.manual-note + .manual-note,
.manual-note + .manual-warn,
.manual-note + .manual-tip,
.manual-warn + .manual-note,
.manual-warn + .manual-warn,
.manual-warn + .manual-tip,
.manual-tip + .manual-note,
.manual-tip + .manual-warn,
.manual-tip + .manual-tip {
  margin-top: var(--space-2);
}

.manual-shot-wrap {
  margin: var(--space-4) 0 0;
}

.manual-shot {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-muted);
}

.manual-shot.crop {
  max-width: 520px;
}

.manual-shot-wrap figcaption {
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
}

.manual-legend {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.manual-legend li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-muted);
}

.manual-legend-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--text-inverse);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

.manual-legend-desc {
  margin-top: var(--space-1);
  color: var(--text-secondary);
}

.manual-completion {
  border-color: var(--color-success);
  background: var(--color-success-bg);
}

.manual-completion h3 {
  color: var(--color-success-text);
}

.cell-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

.cell-text.truncated { cursor: pointer; }

/* === 楽天 共通バナー自動化 === */
.rb-page {
  --rb-lane-height: 56px;
  --rb-name-width: 240px;
  height: 100%;
  overflow-y: auto;
  padding: var(--space-4);
  background: var(--bg-body);
  color: var(--text-primary);
}

.rb-page > * + * {
  margin-top: var(--space-3);
}

.rb-page-heading h1,
.rb-page-heading p,
.rb-stage p,
.rb-hero h2,
.rb-hero p,
.rb-section-note,
.rb-history h4 {
  margin: 0;
}

.rb-page-heading h1 {
  font-size: var(--font-size-3xl);
}

.rb-page-heading p,
.rb-section-note,
.rb-hint,
.rb-section-meta,
.rb-table-note,
.rb-destination-label {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.rb-stage {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-info-border);
  border-radius: var(--radius-xl);
  background: var(--color-info-bg);
  color: var(--text-secondary);
  font-size: var(--font-size-md);
}

.rb-stage strong {
  color: var(--color-info);
}

.rb-stage-phase-1 {
  border-color: var(--color-warning);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}

.rb-stage-phase-1 strong {
  color: var(--color-warning-text);
}

.rb-stage-phase-1 .rb-stage-step-current {
  border-color: var(--color-warning);
  background: var(--color-warning);
}

.rb-stage-phase-2 {
  border-color: var(--color-success);
  background: var(--color-success-bg);
  color: var(--color-success-text);
}

.rb-stage-phase-2 strong {
  color: var(--color-success-text);
}

.rb-stage-phase-2 .rb-stage-step-current {
  border-color: var(--color-success);
  background: var(--color-success);
}

.rb-stage-steps,
.rb-timeline-tools,
.rb-timeline-legend,
.rb-slot-usage,
.rb-slot-indicators,
.rb-sync-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.rb-stage-steps {
  margin-top: var(--space-2);
}

.rb-stage-step {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  color: var(--text-tertiary);
  font-size: var(--font-size-base);
}

.rb-stage-step-current {
  border-color: var(--color-info);
  background: var(--color-info);
  color: var(--text-inverse);
  font-weight: var(--font-weight-bold);
}

.rb-hero {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-4) var(--space-5);
  border-left: 5px solid var(--border-medium);
  border-radius: var(--radius-xl);
  background: var(--bg-muted);
}

.rb-hero h2 {
  font-size: var(--font-size-2xl);
}

.rb-hero p {
  margin-top: var(--space-1);
  color: var(--text-secondary);
  font-size: var(--font-size-md);
}

.rb-hero .rb-coverage-note {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.rb-hero-icon {
  flex: none;
  font-size: var(--font-size-3xl);
  line-height: var(--line-height-tight);
}

.rb-hero-success {
  border-color: var(--color-success);
  background: var(--color-success-bg);
}

.rb-hero-success h2 {
  color: var(--color-success-text);
}

.rb-hero-warning {
  border-color: var(--color-warning);
  background: var(--color-warning-bg);
}

.rb-hero-warning h2 {
  color: var(--color-warning-text);
}

.rb-hero-critical {
  border-color: var(--color-danger);
  background: var(--color-danger-bg);
}

.rb-hero-critical h2,
.rb-sync-blocked {
  color: var(--color-danger-text);
}

.rb-hero-neutral {
  border-color: var(--color-info);
  background: var(--color-info-bg);
}

.rb-hero-neutral h2 {
  color: var(--color-info);
}

.rb-hero-todo {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: var(--font-size-base);
}

.rb-hero-todo ol {
  margin: var(--space-1) 0 0;
  padding-left: var(--space-5);
}

.rb-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.rb-section-header h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-lg);
}

.rb-tabs {
  min-width: 0;
}

.rb-tab-list {
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  border-bottom: 1px solid var(--border-default);
}

.rb-tab {
  flex: none;
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--text-tertiary);
  font-family: inherit;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

.rb-tab:hover {
  color: var(--text-primary);
}

.rb-tab:focus-visible {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  outline: 2px solid var(--border-focus);
  outline-offset: -2px;
}

.rb-tab-selected {
  border-bottom-color: var(--color-primary);
  color: var(--color-primary);
}

.rb-tab-panel {
  padding-top: var(--space-3);
}

.rb-tab-panel[hidden] {
  display: none;
}

.rb-timeline-card {
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}

.rb-slot-usage {
  justify-content: flex-end;
  margin-left: auto;
  color: var(--text-tertiary);
  font-size: var(--font-size-base);
  white-space: nowrap;
}

.rb-slot-indicators {
  gap: var(--space-1);
}

.rb-slot-indicator {
  width: 12px;
  height: 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
}

.rb-slot-indicator-used {
  border-color: var(--color-primary);
  background: var(--color-primary);
}

.rb-slot-indicator-ai {
  border-color: var(--color-primary-light);
  background: var(--color-primary-subtle);
}

.rb-slot-indicator-past {
  border-color: var(--border-medium);
  background: var(--bg-active);
}

.rb-now-summary {
  margin-bottom: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-success-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-success-bg);
  color: var(--text-secondary);
  font-size: var(--font-size-md);
}

.rb-now-note,
.rb-table-note,
.rb-destination-link,
.rb-destination-label {
  display: block;
}

.rb-now-note {
  margin-top: var(--space-1);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.rb-timeline-tools {
  margin-bottom: var(--space-2);
}

.rb-range-button {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: var(--font-size-base);
  cursor: pointer;
}

.rb-range-button-current {
  border-color: var(--text-primary);
  background: var(--text-primary);
  color: var(--text-inverse);
  font-weight: var(--font-weight-bold);
}

.rb-timeline-tools .rb-hint {
  margin-left: var(--space-2);
}

.rb-timeline-shell {
  display: flex;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
}

.rb-timeline-names {
  z-index: 2;
  width: var(--rb-name-width);
  flex: none;
  border-right: 2px solid var(--border-default);
  background: var(--bg-muted);
}

.rb-timeline-scroll {
  min-width: 0;
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
}

.rb-timeline-inner {
  position: relative;
  min-width: 100%;
}

.rb-timeline-name-head,
.rb-timeline-head {
  position: relative;
  height: 44px;
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-muted);
}

.rb-timeline-name-head {
  display: flex;
  align-items: center;
  padding: 0 var(--space-3);
  color: var(--text-tertiary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
}

.rb-timeline-name-lane,
.rb-timeline-lane {
  height: var(--rb-lane-height);
  border-bottom: 1px solid var(--border-light);
  position: relative;
}

.rb-timeline-name-lane:last-child,
.rb-timeline-lane:last-child {
  border-bottom: none;
}

.rb-timeline-name-lane {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-2);
}

.rb-timeline-lane-even {
  background: var(--bg-muted);
}

.rb-timeline-thumbnail {
  display: block;
  width: 56px;
  max-height: 38px;
  flex: none;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  object-fit: contain;
}

.rb-timeline-name-copy {
  min-width: 0;
}

.rb-timeline-name-copy strong {
  display: block;
  overflow: hidden;
  color: var(--text-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-tight);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.rb-timeline-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.rb-slot-number-label {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.rb-owner-badge,
.rb-owner-label {
  display: inline-block;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  white-space: nowrap;
}

.rb-owner-badge {
  padding: 1px var(--space-2);
}

.rb-owner-badge-ai,
.rb-owner-label-ai {
  background: var(--color-primary-subtle);
  color: var(--color-primary-active);
  font-weight: var(--font-weight-bold);
}

.rb-owner-badge-human,
.rb-owner-label-human {
  background: var(--bg-subtle);
  color: var(--text-tertiary);
}

.rb-timeline-weekend,
.rb-timeline-month-line,
.rb-timeline-today,
.rb-timeline-month,
.rb-timeline-tick,
.rb-timeline-today-flag,
.rb-timeline-bar,
.rb-timeline-no-period {
  position: absolute;
}

.rb-timeline-weekend {
  top: 0;
  bottom: 0;
  background: var(--bg-muted);
}

.rb-timeline-month-line {
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border-default);
}

.rb-timeline-month {
  top: 2px;
  padding-left: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

.rb-timeline-tick {
  top: 21px;
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  transform: translateX(-50%);
}

.rb-timeline-today {
  z-index: 4;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-danger);
}

.rb-timeline-today-flag {
  z-index: 5;
  top: 2px;
  padding: 1px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-danger);
  color: var(--text-inverse);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  transform: translateX(-50%);
  white-space: nowrap;
}

.rb-timeline-bar {
  z-index: 3;
  top: 16px;
  display: flex;
  align-items: center;
  height: 24px;
  overflow: hidden;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--text-inverse);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

.rb-timeline-bar-always {
  background: var(--color-success-subtle);
  color: var(--color-success-text);
}

.rb-timeline-bar-live {
  background: var(--color-success);
}

.rb-timeline-bar-booked {
  background: var(--color-primary);
}

.rb-timeline-bar-plan {
  border: 2px dashed var(--color-primary);
  background: var(--bg-surface);
  color: var(--color-primary);
}

.rb-timeline-bar-past {
  background: var(--bg-active);
  color: var(--text-tertiary);
}

.rb-timeline-bar-gap,
.rb-legend-gap {
  border: 1px solid var(--color-danger);
  background: repeating-linear-gradient(45deg, var(--color-danger-bg), var(--color-danger-bg) 5px, var(--color-danger-subtle) 5px, var(--color-danger-subtle) 10px);
  color: var(--color-danger-text);
}

.rb-timeline-no-period {
  top: 19px;
  right: 0;
  left: 0;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  text-align: center;
}

.rb-timeline-empty,
.rb-timeline-empty-lane {
  min-height: 72px;
}

.rb-timeline-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.rb-timeline-legend {
  margin-top: var(--space-3);
  color: var(--text-tertiary);
  font-size: var(--font-size-base);
}

.rb-timeline-legend > span {
  display: inline-flex;
  align-items: center;
}

.rb-legend-swatch {
  display: inline-block;
  width: 22px;
  height: 11px;
  margin-right: var(--space-1);
  border-radius: var(--radius-sm);
}

.rb-legend-always {
  background: var(--color-success-subtle);
}

.rb-legend-live {
  background: var(--color-success);
}

.rb-legend-booked {
  background: var(--color-primary);
}

.rb-legend-plan {
  height: 9px;
  border: 2px dashed var(--color-primary);
  background: var(--bg-surface);
}

.rb-legend-past {
  background: var(--bg-active);
}

.rb-banner-table th,
.rb-banner-table td {
  white-space: normal;
}

.rb-col-slot {
  width: 7%;
}

.rb-col-banner {
  width: 14%;
}

.rb-col-name {
  width: 30%;
}

.rb-col-when {
  width: 35%;
}

.rb-col-owner {
  width: 14%;
}

.rb-slot-cell {
  color: var(--text-primary);
  font-weight: var(--font-weight-bold);
  text-align: center;
}

.rb-table-thumbnail {
  display: block;
  width: 110px;
  max-width: 100%;
  max-height: 56px;
  margin: 0 auto;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  object-fit: contain;
}

.rb-image-fallback,
.rb-timeline-image-fallback {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.rb-image-fallback[hidden],
.rb-timeline-image-fallback[hidden],
.rb-fallback-image[hidden] {
  display: none;
}

.rb-banner-copy {
  text-align: left;
}

.rb-banner-copy strong {
  display: block;
  color: var(--text-primary);
}

.rb-destination-link,
.rb-destination-label,
.rb-table-note {
  margin-top: var(--space-1);
}

.rb-owner-label {
  padding: var(--space-1) var(--space-2);
}

.rb-cell-wrap {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: var(--line-height-normal);
}

.rb-sync-controls {
  align-items: flex-start;
  flex-direction: column;
  margin-top: var(--space-2);
}

.rb-sync-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.rb-plan-count {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.rb-sync-disabled-reason {
  margin: 0;
  font-size: var(--font-size-sm);
}

.rb-sync-message {
  flex-basis: 100%;
  margin: 0;
}

.rb-history {
  margin-top: var(--space-3);
}

.rb-history summary {
  padding: var(--space-2) 0;
  color: var(--text-secondary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}

.rb-history-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.rb-history h4 {
  margin-bottom: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-md);
}

/* === 楽天クーポン管理 === */
.rcpn-page {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  background: var(--bg-surface);
}

.rcpn-toolbar {
  height: auto;
  min-height: var(--toolbar-height);
  flex-wrap: wrap;
}

.rcpn-field {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
}

.rcpn-field-label,
.rcpn-meta,
.rcpn-rms-note,
.rcpn-note {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.rcpn-store-select { width: 190px; }
.rcpn-type-select { width: 92px; }
.rcpn-status-input { width: 112px; }
.rcpn-search-input { width: 180px; }

.rcpn-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.rcpn-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 30px;
  padding: var(--space-1) var(--space-3);
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-muted);
  flex-wrap: wrap;
}

.rcpn-messages:not(:empty) {
  padding: var(--space-2) var(--space-3) 0;
}

.rcpn-table-scroll {
  min-height: 200px;
}

.rcpn-table-container {
  min-width: 1480px;
  border-radius: 0;
}

.rcpn-table .rcpn-cell-name {
  text-align: left;
}

.rcpn-col-type { width: 76px; }
.rcpn-col-code { width: 150px; }
.rcpn-col-name { width: 260px; }
.rcpn-col-discount { width: 170px; }
.rcpn-col-status { width: 130px; }
.rcpn-col-counts { width: 150px; }
.rcpn-col-period { width: 210px; }
.rcpn-col-updated { width: 170px; }
.rcpn-col-snapshot { width: 130px; }

.rcpn-footer {
  flex-shrink: 0;
}

.shell-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-3);
  border: none;
  background: transparent;
  color: var(--text-inverse);
  font-size: var(--font-size-2xl);
  cursor: pointer;
  flex-shrink: 0;
}

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 190;
}

.u-flex { display: flex; }
.u-gap-1 { gap: var(--space-1); }
.u-gap-2 { gap: var(--space-2); }
.u-gap-3 { gap: var(--space-3); }
.u-text-right { text-align: right; }
.u-text-left { text-align: left; }
.u-text-center { text-align: center; }
.u-muted { color: var(--text-muted); }
.u-hidden { display: none !important; }

@media (max-width:768px) {
  .gifting-template-search,
  .gifting-template-select {
    width: 100%;
    min-width: 0;
  }

  .gifting-template-toolbar-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .gifting-template-table {
    min-width: 860px;
  }

  /* シェル: サイドバーをドロワー化 */
  .shell-hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .mode-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .app-sidebar {
    position: fixed;
    top: var(--shell-top, 42px);
    left: 0;
    height: calc(100vh - var(--shell-top, 42px));
    width: 280px;
    max-width: 85vw;
    transform: translateX(-100%);
    transition: transform .2s ease;
    z-index: 200;
    box-shadow: var(--shadow-lg, 0 4px 24px rgba(0,0,0,0.2));
  }

  .app-sidebar.open {
    transform: none;
  }

  .app-sidebar.collapsed {
    width: 280px;
  }

  .app-sidebar.collapsed .app-sidebar-nav {
    display: block;
  }

  .sidebar-toggle-btn {
    display: none;
  }

  .sidebar-backdrop.open {
    display: block;
  }

  .agent-toolbar {
    flex-wrap: wrap;
    height: auto;
    row-gap: var(--space-1);
    justify-content: flex-start;
  }

  .agent-dropdown-menu {
    min-width: 0;
    width: calc(100vw - 24px);
    right: 0;
    left: auto;
  }

  .ai-input-area {
    padding: var(--space-2);
    gap: var(--space-1);
  }

  .ai-input-area textarea {
    min-width: 0;
  }

  .ai-input-area button {
    width: 40px;
    height: 40px;
  }

  .tl-table {
    display: block;
    overflow-x: auto;
  }

  .tl-user .tl-bubble {
    max-width: 88%;
  }

  .tl-assistant .tl-content {
    max-width: 92%;
  }
}
/* Company Story */
.cs-wrap{display:flex;flex-direction:column;height:100%;min-height:0;background:var(--bg-body)}
.cs-toolbar{gap:var(--space-2);flex-shrink:0;flex-wrap:wrap;height:calc(var(--toolbar-height) + 8px)}
.cs-segment{display:inline-flex;border:1px solid var(--border-default);border-radius:var(--radius-sm);overflow:hidden;background:var(--bg-surface)}
.cs-segment-btn{height:30px;padding:0 var(--space-3);border:0;border-right:1px solid var(--border-default);background:transparent;color:var(--text-secondary);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);cursor:pointer}
.cs-segment-btn:last-child{border-right:0}
.cs-segment-btn:hover{background:var(--bg-hover);color:var(--text-primary)}
.cs-segment-btn.active{background:var(--color-primary-subtle);color:var(--color-primary)}
.cs-month-input{height:30px;padding:0 var(--space-2);border:1px solid var(--border-input);border-radius:var(--radius-sm);background:var(--bg-input);color:var(--text-primary);font-size:var(--font-size-sm)}
.cs-search-box{display:flex;align-items:center;gap:var(--space-2);margin-left:auto;min-width:min(100%,320px)}
.cs-search-input{height:30px;min-width:0;flex:1;padding:0 var(--space-2);border:1px solid var(--border-input);border-radius:var(--radius-sm);background:var(--bg-input);color:var(--text-primary);font-size:var(--font-size-sm)}
.cs-body{display:grid;grid-template-columns:minmax(260px,320px) minmax(0,1fr);min-height:0;flex:1;border-top:1px solid var(--border-default)}
.cs-list-pane{overflow:auto;border-right:1px solid var(--border-default);background:var(--bg-surface)}
.cs-detail-pane{overflow:auto;padding:var(--space-3);background:var(--bg-body)}
.cs-day-row{display:flex;flex-direction:column;gap:4px;width:100%;padding:10px 12px;border:0;border-bottom:1px solid var(--border-default);background:transparent;color:var(--text-primary);text-align:left;cursor:pointer}
.cs-day-row:hover{background:var(--bg-hover)}
.cs-day-row.active{background:var(--color-primary-subtle)}
.cs-day-date{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:var(--text-secondary)}
.cs-day-headline{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);line-height:var(--line-height-normal);color:var(--text-primary);word-break:break-word}
.cs-day-meta{font-size:var(--font-size-xs);color:var(--text-tertiary)}
.cs-empty{padding:var(--space-5);color:var(--text-tertiary);font-size:var(--font-size-sm);text-align:center}
.cs-detail-head{margin-bottom:var(--space-3)}
.cs-detail-date{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--text-secondary);margin-bottom:var(--space-1)}
.cs-headline{margin:0;font-size:var(--font-size-xl);line-height:var(--line-height-tight);font-weight:var(--font-weight-semibold);color:var(--text-primary)}
.cs-story-card{padding:var(--space-3);margin-bottom:var(--space-3)}
.cs-section-title{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--text-secondary);margin-bottom:var(--space-2)}
.cs-story-text{white-space:pre-wrap;word-break:break-word;line-height:var(--line-height-relaxed);font-size:var(--font-size-sm);color:var(--text-primary)}
.cs-day-chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.cs-day-chip{height:28px;padding:0 var(--space-2);border:1px solid var(--border-default);border-radius:var(--radius-sm);background:var(--bg-surface);color:var(--text-primary);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);cursor:pointer}
.cs-day-chip:hover{background:var(--bg-hover);border-color:var(--border-strong)}
.cs-muted{color:var(--text-tertiary);font-size:var(--font-size-sm)}
.cs-sections{display:flex;flex-direction:column;gap:var(--space-3)}
.cs-genre-section{padding:var(--space-3)}
.cs-genre-title{display:flex;align-items:center;gap:var(--space-2);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--text-primary);margin-bottom:var(--space-2)}
.cs-genre-swatch{width:10px;height:10px;border-radius:var(--radius-sm);background:var(--text-muted);flex:0 0 auto}
.cs-genre-product_dev .cs-genre-swatch{background:#3b82f6}
.cs-genre-store_ops .cs-genre-swatch{background:#10b981}
.cs-genre-marketing .cs-genre-swatch{background:#f59e0b}
.cs-genre-cs .cs-genre-swatch{background:#ef4444}
.cs-genre-design .cs-genre-swatch{background:#8b5cf6}
.cs-genre-infra .cs-genre-swatch{background:#6366f1}
.cs-genre-internal .cs-genre-swatch{background:#64748b}
.cs-genre-other .cs-genre-swatch{background:#94a3b8}
.cs-topic-row{border-top:1px solid var(--border-default);padding:var(--space-2) 0}
.cs-topic-row:first-of-type{border-top:0}
.cs-topic-head{display:flex;align-items:center;gap:var(--space-2);justify-content:space-between;margin-bottom:var(--space-1)}
.cs-topic-name{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--text-primary);word-break:break-word}
.cs-topic-link{border:0;background:transparent;color:var(--color-primary);font:inherit;font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);cursor:pointer;white-space:nowrap}
.cs-topic-link:hover{text-decoration:underline}
.cs-points{margin:0;padding-left:1.2em;color:var(--text-primary);font-size:var(--font-size-sm);line-height:var(--line-height-relaxed)}
.cs-points li{margin:2px 0;word-break:break-word}
@media(max-width:768px){.cs-search-box{width:100%;margin-left:0}.cs-body{grid-template-columns:1fr}.cs-list-pane{max-height:36vh;border-right:0;border-bottom:1px solid var(--border-default)}}

/* AGT communication flow */
.acf-canvas {
  min-height: 0;
}

.acf-scroll {
  position: relative;
  overflow: auto;
  min-height: 0;
  height: calc(100vh - var(--topnav-height) - var(--toolbar-height) - var(--space-8));
  padding: var(--space-3);
  background: var(--bg-body);
}

.acf-root {
  position: relative;
  min-width: 980px;
  padding: var(--space-2) var(--space-2) var(--space-6);
}

.acf-arrows {
  position: absolute;
  inset: 0;
  width: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 1;
}

.acf-set {
  position: relative;
  z-index: 2;
  margin-bottom: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}

.acf-set-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 42px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg);
  cursor: pointer;
  user-select: none;
}

.acf-set-header:hover {
  background: var(--bg-hover);
}

.acf-set-header:focus {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.acf-caret {
  flex: 0 0 auto;
  width: 16px;
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.acf-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
  color: var(--text-primary);
  font-size: var(--font-size-sm);
}

.acf-set-body {
  border-top: 1px solid var(--border-light);
  padding: var(--space-3);
}

.acf-cols {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.acf-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.acf-col-human {
  flex: 1 1 26%;
}

.acf-col-tl {
  flex: 1.15 1 32%;
}

.acf-col-member {
  flex: 1.4 1 42%;
}

.acf-box {
  width: 100%;
  min-width: 220px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.acf-box-human {
  border-color: var(--color-info-border);
  background: var(--color-info-bg);
}

.acf-box-tl {
  border-color: var(--color-primary-subtle);
}

.acf-box-member {
  border-color: var(--border-medium);
}

.acf-pending {
  border-style: dashed;
  border-color: var(--border-medium);
  background: var(--bg-muted);
  color: var(--text-tertiary);
  padding-bottom: var(--space-3);
}

.acf-box-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-light);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
}

.acf-box-header span {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}

.acf-msg,
.acf-stage {
  padding: var(--space-2) var(--space-3);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.acf-msg + .acf-msg,
.acf-stage + .acf-stage {
  border-top: 1px solid var(--border-light);
}

.acf-stage {
  background: var(--bg-surface);
}

.acf-msg-top,
.acf-stage-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.acf-stage-title {
  margin-bottom: var(--space-1);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.acf-excerpt,
.acf-agt-msg {
  margin-top: var(--space-1);
  overflow-wrap: anywhere;
}

.acf-excerpt {
  color: var(--text-secondary);
}

.acf-agt-msg {
  display: block;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--bg-muted);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
}

.acf-meta {
  margin-top: var(--space-1);
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  overflow-wrap: anywhere;
}

.acf-muted {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}

.acf-link {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.acf-link:hover {
  color: var(--color-primary-hover);
}

.acf-monitor {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.acf-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.acf-hours {
  min-height: 28px;
}

.acf-prov {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-full);
  padding: 1px 6px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

.acf-prov-claude {
  background: var(--color-warning-subtle);
  color: var(--color-warning-text);
}

.acf-prov-codex {
  background: var(--color-primary-subtle);
  color: var(--color-primary-active);
}

.acf-prov-unknown {
  background: var(--bg-subtle);
  color: var(--text-tertiary);
}

.acf-arrow-path {
  fill: none;
  stroke-width: 1.5;
  pointer-events: auto;
  marker-end: url(#acfArrowOpen);
}

.acf-arrow-default {
  stroke: var(--text-tertiary);
}

.acf-arrow-danger {
  stroke: var(--color-danger);
}

.acf-arrow-warning {
  stroke: var(--color-warning);
}

.acf-arrow-ignored {
  stroke: var(--text-muted);
}

.acf-arrow-unread {
  stroke-dasharray: 5 4;
}

.acf-arrow-inferred {
  opacity: 0.55;
  stroke-dasharray: 8 5;
}

.acf-marker-path {
  fill: none;
  stroke: var(--text-tertiary);
  stroke-width: 1.5;
}

.acf-arrow-label {
  pointer-events: auto;
}

.acf-arrow-label rect {
  fill: var(--bg-surface);
  stroke: var(--border-medium);
  rx: var(--radius-sm);
}

.acf-arrow-label text {
  fill: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-anchor: middle;
  dominant-baseline: middle;
}

@media (max-width: 900px) {
  .acf-scroll {
    height: calc(100vh - var(--topnav-height) - var(--toolbar-height) - var(--space-6));
    padding: var(--space-2);
  }

  .acf-root {
    min-width: 760px;
  }

  .acf-cols {
    gap: var(--space-2);
  }

  .acf-box {
    min-width: 190px;
  }
}

/* AGT communication flow: localized set arrows and summaries */
.acf-summary-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.acf-miniflow {
  max-width: 100%;
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-tight);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acf-set-body {
  position: relative;
}

.acf-set-arrows {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 0;
}

.acf-cols,
.acf-xset-chips {
  position: relative;
  z-index: 1;
}

.acf-xset-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.acf-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 24px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-2);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-tight);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acf-chip-read {
  border-color: var(--border-medium);
  background: var(--bg-muted);
}

.acf-chip-unread {
  border-color: var(--color-warning);
  background: var(--color-warning-subtle);
  color: var(--color-warning-text);
}

.acf-chip-link {
  cursor: pointer;
}

.acf-chip-link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.acf-chip-muted {
  color: var(--text-tertiary);
  opacity: 0.82;
}

.acf-set-highlight {
  border-color: var(--color-primary);
  background: var(--color-primary-subtle);
  transition: background var(--transition-normal), border-color var(--transition-normal);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  align-items: start;
}
.form-grid label,
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}
.form-field { margin-top: var(--space-3); }
.form-grid .form-field { margin-top: 0; }
.form-field .form-value {
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  overflow-wrap: anywhere;
}
.form-field .textarea,
.form-grid .textarea { resize: vertical; }
.form-check {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
}
.sk-modal-wide { max-width: 760px; width: 92%; }
.code-block {
  max-height: 360px;
  overflow-x: auto;
  white-space: pre-wrap;
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-muted);
  color: var(--text-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: var(--font-size-sm);
  line-height: 1.6;
}
@media (max-width: 900px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* Staff performance */
.sp-root{display:flex;flex:1;min-height:0;flex-direction:column;background:var(--bg-body)}
.sp-toolbar{gap:var(--space-2);flex-wrap:wrap}
.sp-toolbar-note{font-size:var(--font-size-xs);color:var(--text-tertiary)}
.sp-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--space-3);padding:var(--space-3)}
.sp-card-label{font-size:var(--font-size-xs);color:var(--text-tertiary);margin-bottom:var(--space-1)}
.sp-card-value{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--text-primary)}
.sp-card-value-muted{color:var(--text-secondary)}
.sp-status{padding:0 var(--space-3) var(--space-2);font-size:var(--font-size-sm);color:var(--text-secondary)}
.sp-status.is-error{color:var(--color-danger-text)}
.sp-create-bar{padding:0 var(--space-3) var(--space-3);display:flex;justify-content:flex-end}
.sp-project-list{display:flex;flex-direction:column;gap:var(--space-3);padding:0 var(--space-3) var(--space-3)}
.sp-project-card{padding:0;overflow:hidden}
.sp-project-toggle{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:var(--space-3);background:var(--bg-surface)}
.sp-project-toggle-btn{flex:1;border:0;background:transparent;padding:0;cursor:pointer;text-align:left}
.sp-project-toggle-btn:hover .sp-project-head{text-decoration:underline}
.sp-project-head{font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);color:var(--text-primary)}
.sp-project-tools{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap}
.sp-project-body{padding:0 var(--space-3) var(--space-3);display:flex;flex-direction:column;gap:var(--space-2)}
.sp-record-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:var(--space-3)}
.sp-record-main{min-width:0;flex:1}
.sp-record-meta{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.sp-record-chip{display:inline-flex;align-items:center;gap:var(--space-1);padding:4px 8px;border-radius:var(--radius-pill);background:var(--bg-muted);font-size:var(--font-size-xs);color:var(--text-secondary)}
.sp-record-actions{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap;justify-content:flex-end}
.sp-manage-id{font-weight:var(--font-weight-bold);color:var(--text-primary);white-space:nowrap}
.sp-meta{margin-top:var(--space-1);font-size:var(--font-size-xs);color:var(--text-tertiary)}
.sp-input,.sp-textarea,.sp-select{width:100%;border:1px solid var(--border-default);border-radius:var(--radius-sm);background:var(--bg-surface);color:var(--text-primary);font-size:var(--font-size-sm)}
.sp-input,.sp-select{min-height:30px;padding:4px 6px}
.sp-textarea{min-height:74px;padding:6px;resize:vertical}
.sp-input:disabled,.sp-textarea:disabled,.sp-select:disabled{background:var(--bg-subtle);color:var(--text-muted)}
.sp-checkbox{display:flex;align-items:center;justify-content:center;min-height:30px}
.sp-files{display:flex;flex-direction:column;gap:var(--space-2)}
.sp-file-list{display:flex;flex-direction:column;gap:var(--space-1)}
.sp-file-item{display:flex;align-items:flex-start;gap:var(--space-2);flex-wrap:wrap;justify-content:space-between;padding:var(--space-2);border:1px solid var(--border-light);border-radius:var(--radius-sm);background:var(--bg-surface)}
.sp-file-main{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.sp-file-link{border:0;background:transparent;color:var(--color-primary);cursor:pointer;padding:0;font-size:var(--font-size-xs);text-align:left}
.sp-file-link:hover{text-decoration:underline}
.sp-file-ai{display:flex;align-items:center;gap:var(--space-1);flex-wrap:wrap}
.sp-file-drop{border:1px dashed var(--border-medium);border-radius:var(--radius-sm);background:var(--bg-muted);color:var(--text-secondary);font-size:var(--font-size-xs);padding:var(--space-2);text-align:center;cursor:pointer}
.sp-file-drop.is-over{border-color:var(--color-primary);background:var(--color-primary-bg)}
.sp-file-drop.is-disabled{background:var(--bg-subtle);color:var(--text-muted);cursor:not-allowed}
.sp-actions{display:flex;flex-direction:column;gap:var(--space-2);min-width:86px}
.sp-ai-placeholder{display:flex;flex-direction:column;gap:var(--space-1);align-items:flex-start}
.sp-ai-note{font-size:var(--font-size-xs);color:var(--text-tertiary)}
.sp-ai-summary{padding:var(--space-2);border-radius:var(--radius-sm);background:var(--bg-muted);font-size:var(--font-size-sm);color:var(--text-primary)}
.sp-ai-issues{display:flex;flex-direction:column;gap:var(--space-2)}
.sp-ai-issue{padding:var(--space-2);border:1px solid var(--border-light);border-radius:var(--radius-sm);background:var(--bg-surface);font-size:var(--font-size-sm);color:var(--text-primary)}
.sp-modal{max-width:760px}
.sp-modal-wide{max-width:min(92vw,980px)}
.sp-modal-title{margin:0;font-size:var(--font-size-lg);color:var(--text-primary)}
.sp-modal-caption{margin-bottom:var(--space-3);font-size:var(--font-size-sm);color:var(--text-secondary)}
.sp-modal-section{display:flex;flex-direction:column;gap:var(--space-2);padding-top:var(--space-3);margin-top:var(--space-3);border-top:1px solid var(--border-default)}
.sp-modal-section:first-of-type{margin-top:0;padding-top:0;border-top:0}
.sp-modal-section h4{margin:0;font-size:var(--font-size-md);color:var(--text-primary)}
.sp-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2)}
.sp-form-grid-wide{grid-template-columns:repeat(4,minmax(0,1fr))}
.sp-form-stack{display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-2)}
.sp-form-row{display:flex;flex-direction:column;gap:var(--space-1);font-size:var(--font-size-xs);color:var(--text-secondary);min-width:0}
.sp-form-row-wide{width:100%}
.sp-form-check{display:flex;align-items:center;gap:var(--space-1);padding-top:22px;font-size:var(--font-size-sm);color:var(--text-primary)}
.sp-inline-note{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}
@media (max-width: 900px){.sp-form-grid,.sp-form-grid-wide{grid-template-columns:1fr}.sp-project-toggle,.sp-record-row{flex-direction:column;align-items:flex-start}.sp-record-actions,.sp-project-tools{justify-content:flex-start}}

/* Staff timecard */
.stc-table col:nth-child(1){width:15%}
.stc-table col:nth-child(2){width:9%}
.stc-table col:nth-child(3){width:9%}
.stc-table col:nth-child(4){width:10%}
.stc-table col:nth-child(5){width:39%}
.stc-table col:nth-child(6){width:18%}
.table td.stc-date-cell{white-space:nowrap}
.table td.stc-number-cell{text-align:right;font-variant-numeric:tabular-nums}
.stc-day-sat{color:var(--color-info)}
.stc-day-sun{color:var(--color-danger-text)}
.table td.stc-description-cell{text-align:left;white-space:normal}
.stc-description-body{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal;overflow-wrap:anywhere}
.stc-desc-clickable{cursor:pointer}
.stc-desc-clickable:hover{color:var(--color-primary)}
.stc-desc-muted{color:var(--text-tertiary)}
.stc-table tbody td{padding-top:var(--space-1);padding-bottom:var(--space-1)}
.stc-desc-popover{position:fixed;z-index:1000;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
.stc-desc-popover-body{padding:var(--space-2) var(--space-3);max-height:60vh;overflow-y:auto;white-space:pre-wrap;overflow-wrap:anywhere;font-size:var(--font-size-sm);line-height:1.6;color:var(--text-primary)}
.stc-table tfoot td{background:var(--bg-muted);border-top:1px solid var(--border-default);font-weight:var(--font-weight-semibold)}
.stc-table tfoot td:nth-child(2),.stc-table tfoot td:nth-child(4){text-align:right;font-variant-numeric:tabular-nums}
.stc-time-inputs{display:flex;gap:var(--space-2)}
.stc-time-inputs>.sp-form-row{flex:1}
.stc-presets{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;color:var(--text-tertiary);font-size:var(--font-size-xs)}
.stc-presets .filter-chip{font-family:var(--font-family)}
.stc-date-warning{padding:var(--space-2);border:1px solid var(--color-danger-subtle);border-radius:var(--radius-md);background:var(--color-danger-bg);color:var(--color-danger-text);font-size:var(--font-size-sm)}
.stc-reward-preview{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:var(--space-3);border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--bg-muted);color:var(--text-secondary)}
.stc-reward-preview strong{color:var(--text-primary);font-size:var(--font-size-lg)}
.stc-counter{align-self:flex-end;color:var(--text-tertiary);font-size:var(--font-size-xs)}
.stc-counter.is-over{color:var(--color-danger-text);font-weight:var(--font-weight-semibold)}

/* Staff invoice */
.inv-modal{width:96%;max-width:1180px;max-height:94vh}
.inv-modal-body{display:flex;flex-direction:column;gap:var(--space-3);background:var(--bg-muted)}
.inv-document{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-5);border:1px solid var(--border-default);border-radius:var(--radius-lg);background:var(--bg-surface)}
.inv-document-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);border-bottom:1px solid var(--border-default);padding-bottom:var(--space-3)}
.inv-document-head h2{margin:0;color:var(--text-primary);font-size:var(--font-size-3xl)}
.inv-meta{color:var(--text-tertiary);font-size:var(--font-size-sm)}
.inv-issued{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-2);flex-wrap:wrap;color:var(--text-secondary)}
.inv-recipient{display:flex;flex-direction:column;gap:var(--space-1);color:var(--text-tertiary);font-size:var(--font-size-sm)}
.inv-recipient strong{color:var(--text-primary);font-size:var(--font-size-xl)}
.inv-table col:nth-child(1){width:14%}
.inv-table col:nth-child(2){width:42%}
.inv-table col:nth-child(3){width:12%}
.inv-table col:nth-child(4){width:14%}
.inv-table col:nth-child(5){width:18%}
.table td.inv-description{text-align:left;white-space:pre-wrap;overflow-wrap:anywhere}
.inv-table td:nth-child(3),.inv-table td:nth-child(4),.inv-table td:nth-child(5){text-align:right;font-variant-numeric:tabular-nums}
.inv-table tfoot td{background:var(--bg-muted);border-top:1px solid var(--border-default);font-weight:var(--font-weight-semibold)}
.inv-total{display:flex;align-items:flex-end;justify-content:flex-end;gap:var(--space-4);padding-top:var(--space-3);border-top:1px solid var(--border-default);color:var(--text-secondary)}
.inv-total strong{color:var(--text-primary);font-size:var(--font-size-3xl)}
.inv-section{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3);border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--bg-surface)}
.inv-section h4{margin:0;color:var(--text-primary);font-size:var(--font-size-md)}
.inv-section-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}
.inv-void-row{display:flex;align-items:center;gap:var(--space-2)}
.inv-void-row .input{flex:1}
.inv-history .table-scroll{max-height:180px}
.inv-history-table th,.inv-history-table td{padding-top:var(--space-1);padding-bottom:var(--space-1)}
.inv-history-empty{padding:var(--space-3);text-align:center;color:var(--text-muted);font-size:var(--font-size-sm)}

@media print{
  body.inv-printing>*:not(#staffInvoiceModal){display:none!important}
  body.inv-printing #staffInvoiceModal{position:static;display:block!important;width:auto;height:auto;background:transparent}
  body.inv-printing #staffInvoiceModal .inv-modal{width:100%;max-width:none;max-height:none;box-shadow:none;overflow:visible}
  body.inv-printing #staffInvoiceModal .inv-modal-body{display:block;overflow:visible;padding:0;background:var(--bg-surface)}
  body.inv-printing #staffInvoiceModal .inv-document{border:0;padding:0}
  body.inv-printing #staffInvoiceModal .inv-no-print{display:none!important}
  body.inv-printing #staffInvoiceModal .table th{position:static}
}

/* ===== 再入荷日: 中国→輸送中→日本 ビジュアルフロー ===== */
.restock-headline {
  margin: var(--space-2) 0 var(--space-1);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}
/* ご案内文（左）とイラストフロー（右）の2カラム。狭幅では縦積みに折り返す。 */
.restock-main {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-5);
  margin-top: var(--space-3);
}
.restock-guidance {
  flex: 1 1 300px;
  min-width: 260px;
  max-width: 420px;
}
.restock-guidance .textarea { min-height: 140px; }
.restock-flow {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-2) var(--space-3);
}
/* 2カラム内ではフローが残り幅を取り、上余白を詰めてご案内文の見出しと頭を揃える。 */
.restock-main .restock-flow {
  flex: 1 1 480px;
  padding-top: var(--space-2);
}
.restock-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 116px;
}
.restock-arrow {
  align-self: center;
  margin-bottom: 48px;
  flex: 0 0 auto;
  color: var(--text-muted);
  line-height: 0;
}
.restock-bubble {
  position: relative;
  min-width: 98px;
  padding: var(--space-2) 14px 7px;
  text-align: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}
.restock-bubble::before,
.restock-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
}
.restock-bubble::before { bottom: -9px; border-top: 9px solid var(--border-default); }
.restock-bubble::after { bottom: -7px; border-top: 8px solid var(--bg-surface); }
.restock-bubble-cap {
  margin-bottom: 1px;
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}
.restock-bubble-qty { line-height: 1; }
.restock-qty-num {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}
.restock-bubble-unit {
  margin-left: 2px;
  font-size: var(--font-size-base);
  color: var(--text-tertiary);
}
.restock-bubble-sub {
  margin-top: 3px;
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}
/* 日本ステージの補助行。スナップショット→ライブ差し替え時の高さブレを抑える。 */
.restock-live-meta { min-height: 1.2em; }
.restock-illust {
  margin-top: 14px;
  line-height: 0;
}
.restock-illust img { display: block; }
.restock-img-globe { width: 92px; height: 92px; }
.restock-img-ship { width: 116px; height: auto; }
.restock-stage-label {
  margin-top: var(--space-2);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}
.restock-warn { margin: var(--space-3) 0; }
.restock-detail { margin-top: var(--space-3); }
.restock-detail > summary {
  cursor: pointer;
  font-size: var(--font-size-md);
  color: var(--color-primary);
}
.restock-detail-line {
  margin: var(--space-2) 0;
  font-size: var(--font-size-md);
  color: var(--text-secondary);
}
/* 確認中＝答えを断定できない状態。既定色のバッジと見分けがつくよう破線の警告色にする（D-10）。 */
.badge.restock-badge-checking {
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  border: 1px dashed var(--color-warning);
}
.restock-headline.is-checking { color: var(--color-warning-text); }
.restock-location-line {
  margin-top: var(--space-1);
  font-size: var(--font-size-md);
  color: var(--text-secondary);
}
.restock-withheld-box { margin-top: var(--space-2); }
.restock-withheld-title { font-weight: var(--font-weight-bold); }
.restock-withheld-reason,
.restock-withheld-note {
  margin-top: var(--space-1);
  font-size: var(--font-size-md);
}
/* 再入荷日の販路（会話から自動／単独では選択欄）。 */
#restockChannelSlot {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.restock-channel-picker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}
.restock-channel-auto {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}
.restock-channel-source {
  margin-left: var(--space-2);
  color: var(--text-tertiary);
}
.cs-hub-customer-item-restock {
  align-self: flex-start;
  margin-top: var(--space-1);
}

#workProductDevRakutenForecastPanel {
  padding: var(--space-3);
  background: var(--bg-body);
}

#pdRakutenForecastRoot {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 0;
}

#pdRakutenForecastIntro {
  border-color: var(--color-info-border);
  background: var(--color-info-bg);
  color: var(--text-secondary);
  line-height: var(--line-height-relaxed);
}

#pdRakutenForecastEntry {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

#pdRakutenForecastEntry .toolbar {
  height: auto;
  min-height: var(--toolbar-height);
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 0;
  background: transparent;
}

#pdRakutenForecastEntry label {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

#pdRakutenForecastUrl {
  flex: 1;
  min-width: min(100%, 280px);
}

#pdRakutenForecastStatus {
  display: none;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

#pdRakutenForecastStatus[data-visible="true"] {
  display: inline-flex;
}

#pdRakutenForecastStatus[data-tone="error"] {
  color: var(--color-danger-text);
}

#pdRakutenForecastStatus[data-tone="warn"] {
  color: var(--color-warning-text);
}

#pdRakutenForecastStatus[data-state="loading"]::before {
  content: "";
  width: 12px;
  height: 12px;
  border: 2px solid var(--color-primary-subtle);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: pd-rakuten-forecast-spin 0.8s linear infinite;
}

@keyframes pd-rakuten-forecast-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

#pdRakutenForecastLayout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(440px, 1.15fr);
  gap: var(--space-3);
  min-height: 0;
}

#pdRakutenForecastDetail,
#pdRakutenForecastListWrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 0;
}

#pdRakutenForecastHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

#pdRakutenForecastHeaderMain {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-width: 0;
  flex: 1 1 auto;
}

#pdRakutenForecastHeaderInfo {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

#pdRakutenForecastThumb {
  width: 104px;
  height: 104px;
  object-fit: contain;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  flex-shrink: 0;
}

.pd-list-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.pd-list-thumb {
  width: 38px;
  height: 38px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  flex-shrink: 0;
}

#pdRakutenForecastHeader h3 {
  margin: 0;
  font-size: var(--font-size-xl);
  color: var(--text-primary);
}

#pdRakutenForecastHeader p,
#pdRakutenForecastMeta,
#pdRakutenForecastPeriod {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

#pdRakutenForecastBadges,
#pdRakutenForecastSignals,
#pdRakutenForecastAudience,
#pdRakutenForecastVariations {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

#pdRakutenForecastBadges {
  justify-content: flex-end;
}

#pdRakutenForecastSignals .badge,
#pdRakutenForecastAudience .badge,
#pdRakutenForecastVariations .badge {
  max-width: 100%;
}

#pdRakutenForecastSummary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

#pdRakutenForecastSummary .card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

#pdRakutenForecastSummary .card strong {
  font-size: var(--font-size-2xl);
  color: var(--text-primary);
  line-height: var(--line-height-tight);
}

#pdRakutenForecastSummary .card span:first-child {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}

#pdRakutenForecastSummary .card span:last-child {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

#pdRakutenForecastDetail h4,
#pdRakutenForecastListWrap h4 {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-md);
  color: var(--text-primary);
}

#pdRakutenForecastReason {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-3);
}

#pdRakutenForecastReason dt {
  margin: 0 0 var(--space-1);
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

#pdRakutenForecastReason dd {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  overflow-wrap: anywhere;
}

#pdRakutenForecastReasonText {
  grid-column: 1 / -1;
}

#pdRakutenForecastListWrap .toolbar {
  height: auto;
  min-height: var(--toolbar-height);
  padding: var(--space-2) var(--space-3);
}

#pdRakutenForecastListWrap .toolbar span:last-child {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}

#pdRakutenForecastList .table td:first-child,
#pdRakutenForecastList .table th:first-child {
  text-align: left;
}

#pdRakutenForecastList .table td:last-child,
#pdRakutenForecastList .table th:last-child {
  width: 126px;
}

/* 推定売上30日 列は省略せず全桁表示する */
#pdRakutenForecastList .table td:nth-child(3),
#pdRakutenForecastList .table th:nth-child(3) {
  white-space: nowrap;
  text-overflow: clip;
  overflow: visible;
}

#pdRakutenForecastList tbody tr {
  cursor: pointer;
}

#pdRakutenForecastList tbody tr[data-active="true"] {
  background: var(--color-primary-bg);
}

#pdRakutenForecastList tbody tr td {
  overflow-wrap: anywhere;
}

#pdRakutenForecastList .badge,
#pdRakutenForecastHeader .badge {
  white-space: nowrap;
}

#pdRakutenForecastEmptyLink {
  color: var(--color-primary);
  text-decoration: none;
}

#pdRakutenForecastEmptyLink:hover {
  color: var(--color-primary-hover);
}

#pdRakutenForecastMonthlyNote,
#pdRakutenForecastDetailNote {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-relaxed);
}

#pdRakutenForecastList [data-note="true"] {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-relaxed);
}

.pd-folder-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 var(--space-3) var(--space-3);
}

.pd-folder-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: var(--font-size-xs);
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.pd-folder-chip:hover {
  border-color: var(--color-primary-subtle);
  background: var(--color-primary-bg);
  color: var(--color-primary);
}

.pd-folder-chip.active {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--text-inverse);
}

.pd-folder-chip-count {
  margin-left: var(--space-1);
  color: var(--text-tertiary);
}

.pd-folder-chip.active .pd-folder-chip-count {
  color: var(--text-inverse);
}

.pd-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: 0 var(--space-1);
}

.pd-pagination-pages {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.pd-page-btn {
  min-width: 32px;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: var(--font-size-xs);
}

.pd-page-btn.active {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--text-inverse);
}

.pd-page-btn:disabled {
  background: var(--bg-subtle);
  color: var(--text-muted);
  cursor: default;
}

.pd-pagination-total {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  white-space: nowrap;
}

.pd-row-actions {
  cursor: default !important;
}

.pd-row-actions td {
  background: var(--bg-muted);
}

.pd-row-actions-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.pd-row-actions-inner label {
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.pd-row-actions-inner .select {
  min-width: 180px;
}

@media (max-width: 960px) {
  #pdRakutenForecastLayout {
    grid-template-columns: 1fr;
  }

  #pdRakutenForecastSummary {
    grid-template-columns: 1fr;
  }

  #pdRakutenForecastReason {
    grid-template-columns: 1fr;
  }

  #pdRakutenForecastBadges {
    justify-content: flex-start;
  }

  .pd-pagination {
    flex-direction: column;
    align-items: flex-start;
  }
}

.payment-due-date-help {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 3px;
  vertical-align: middle;
  outline: none;
}

.payment-due-date-help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border: 1px solid #9ca3af;
  border-radius: 50%;
  background: #fff;
  color: #4b5563;
  cursor: help;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
}

.payment-due-date-tooltip {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  z-index: 10000;
  display: none;
  width: max-content;
  max-width: min(360px, 70vw);
  padding: 8px 10px;
  border-radius: 6px;
  background: #111827;
  color: #fff;
  box-shadow: 0 8px 18px rgba(17, 24, 39, 0.22);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
  transform: translateX(-50%);
  white-space: normal;
}

.payment-due-date-help:hover .payment-due-date-tooltip,
.payment-due-date-help:focus .payment-due-date-tooltip,
.payment-due-date-help:focus-within .payment-due-date-tooltip {
  display: block;
}

/* ============================================
   LINE配信作成 4ステップウィザード
   ============================================ */
.lc-wrap.lc-lseg-page {
  --lc-wizard-radius-card: 12px;
  --lc-wizard-radius-panel: 16px;
  --lc-wizard-radius-phone: 36px;
  --lc-wizard-radius-screen: 26px;
  --lc-wizard-font-display: 32px;
  --lc-wizard-talk-bg: #8cabd8;
  height: 100%;
  padding: 0 0 var(--space-8);
  overflow: auto;
  background: var(--bg-body);
  color: var(--text-primary);
}

/* 配信メッセージ編集ウィザードを全画面オーバーレイ化（左ナビ・ヘッダーを覆う） */
.lc-wrap.lc-lseg-page.lc-fullscreen {
  position: fixed;
  inset: 0;
  z-index: var(--z-fullscreen);
  height: auto;
  overscroll-behavior: contain;
}

.lc-lseg-page .lc-lseg-head {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  min-height: 60px;
  margin: 0;
  padding: var(--space-2) var(--space-6);
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  flex-wrap: nowrap;
}

.lc-lseg-page .lc-lseg-titleblock {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}

.lc-lseg-page .lc-lseg-title {
  gap: var(--space-3);
  font-size: var(--font-size-3xl);
}

.lc-lseg-page .lc-lseg-back {
  font-size: var(--lc-wizard-font-display);
  color: var(--text-tertiary);
  border: none;
  background: none;
  padding: 0;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
}

.lc-wizard-channel-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 280px;
  padding: var(--space-1) var(--space-3);
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  background: var(--bg-muted);
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lc-wizard-channel-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-success);
}

.lc-lseg-page .lc-lseg-actions {
  gap: var(--space-2);
  flex-wrap: nowrap;
}

.lc-lseg-page .lc-lseg-actions #lcChannel.lc-wizard-channel-select {
  display: block;
  max-width: 210px;
}

.lc-lseg-page .lc-lseg-draft-btn {
  min-width: 112px;
  height: 34px;
  padding: 0 var(--space-4);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
}

.lc-lseg-page .lc-lseg-saved-flash {
  margin: 0;
  color: var(--color-success-dark);
  font-size: var(--font-size-base);
}

.lc-wizard-cta-hint {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

.lc-lseg-actions .lc-wizard-header-cta {
  min-width: 0;
  height: 34px;
  margin: 0;
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-success);
  color: var(--text-inverse);
  box-shadow: var(--shadow-sm);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
}

.lc-lseg-actions .lc-wizard-header-cta:hover:not(:disabled) {
  background: var(--color-success-hover);
}

.lc-lseg-actions .lc-wizard-header-cta:disabled {
  background: var(--border-default);
  color: var(--text-muted);
  box-shadow: none;
  opacity: 1;
  cursor: not-allowed;
}

.lc-wizard-layout {
  display: grid;
  grid-template-columns: 220px minmax(520px, 1fr) 360px;
  align-items: start;
  gap: var(--space-6);
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: var(--space-6);
}

.lc-wizard-rail,
.lc-wizard-side {
  position: sticky;
  top: 84px;
}

.lc-wizard-rail-title {
  margin: var(--space-1) 0 var(--space-3) var(--space-2);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.lc-wizard-step {
  position: relative;
  display: flex;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-2) var(--space-4);
  border: 0;
  border-radius: var(--radius-xl);
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  transition: background var(--transition-normal);
}

.lc-wizard-step:hover,
.lc-wizard-step.active {
  background: var(--bg-surface);
}

.lc-wizard-step::after {
  position: absolute;
  top: 47px;
  bottom: -7px;
  left: 23px;
  width: 2px;
  border-radius: var(--radius-full);
  background: var(--border-default);
  content: "";
}

.lc-wizard-step:last-child::after {
  display: none;
}

.lc-wizard-step.done::after {
  background: var(--color-primary-subtle);
}

.lc-wizard-step-num {
  position: relative;
  z-index: 1;
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 2px solid var(--border-medium);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  color: var(--text-muted);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
}

.lc-wizard-step.active .lc-wizard-step-num {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--text-inverse);
  box-shadow: 0 0 0 4px var(--color-primary-subtle);
}

.lc-wizard-step.done .lc-wizard-step-num {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
  color: var(--color-primary);
}

.lc-wizard-step.done .lc-wizard-step-num span {
  display: none;
}

.lc-wizard-step.done .lc-wizard-step-num::after {
  content: "✓";
}

.lc-wizard-step-meta {
  display: block;
  min-width: 0;
}

.lc-wizard-step-label,
.lc-wizard-step-summary {
  display: block;
}

.lc-wizard-step-label {
  color: var(--text-secondary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

.lc-wizard-step-summary {
  display: -webkit-box;
  margin-top: var(--space-1);
  overflow: hidden;
  color: var(--text-muted);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.lc-wizard-step.done .lc-wizard-step-summary {
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
}

.lc-wizard-main {
  min-width: 0;
}

.lc-wizard-panel {
  display: none;
  padding: var(--space-8);
  border: 1px solid var(--border-default);
  border-radius: var(--lc-wizard-radius-panel);
  background: var(--bg-surface);
  box-shadow: var(--shadow-md);
}

.lc-wizard-panel.active {
  display: block;
  animation: lc-wizard-panel-in var(--transition-slow) both;
}

.lc-wizard-panel.locked > * {
  pointer-events: none;
  opacity: .58;
}

@keyframes lc-wizard-panel-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.lc-wizard-panel-head {
  margin-bottom: var(--space-6);
}

.lc-wizard-eyebrow {
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: .1em;
}

.lc-wizard-panel-head h2 {
  margin-top: var(--space-1);
  font-size: var(--font-size-3xl);
  line-height: var(--line-height-tight);
}

.lc-wizard-panel-head p {
  margin-top: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
}

.lc-wizard-panel-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-default);
}

.lc-wizard-panel-foot .btn {
  min-height: 36px;
}

.lc-wizard-choice-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.lc-wizard-choice {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 154px;
  padding: var(--space-5);
  border: 2px solid var(--border-default);
  border-radius: var(--lc-wizard-radius-card);
  background: var(--bg-surface);
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--transition-normal), background var(--transition-normal), box-shadow var(--transition-normal);
}

.lc-wizard-choice:hover {
  border-color: var(--border-medium);
  box-shadow: var(--shadow-sm);
}

.lc-wizard-choice.selected {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
  box-shadow: 0 0 0 3px var(--color-primary-subtle);
}

.lc-wizard-choice:disabled {
  cursor: default;
  opacity: .6;
}

.lc-wizard-choice-check {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid var(--border-medium);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  color: transparent;
  font-size: var(--font-size-sm);
}

.lc-wizard-choice.selected .lc-wizard-choice-check {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--text-inverse);
}

.lc-wizard-choice-icon {
  font-size: var(--font-size-3xl);
}

.lc-wizard-choice strong {
  margin-top: var(--space-3);
  font-size: var(--font-size-xl);
}

.lc-wizard-choice small {
  margin-top: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
}

.lc-wizard-legacy-banner,
.lc-wizard-scheduled-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-lg);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
}

.lc-wizard-legacy-banner strong,
.lc-wizard-legacy-banner span,
.lc-wizard-scheduled-banner strong,
.lc-wizard-scheduled-banner span {
  display: block;
}

.lc-wizard-builder {
  margin-top: var(--space-6);
}

.lc-wizard-or-group {
  padding: var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--lc-wizard-radius-card);
  background: var(--bg-muted);
}

.lc-wizard-or-head,
.lc-wizard-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
}

.lc-wizard-group-delete,
.lc-wizard-picker-head button {
  padding: var(--space-1) var(--space-2);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-tertiary);
  font-size: var(--font-size-base);
  cursor: pointer;
}

.lc-wizard-group-delete:hover {
  background: var(--color-danger-subtle);
  color: var(--color-danger-text);
}

.lc-wizard-audience-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.lc-wizard-audience-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
}

.lc-wizard-audience-chip.excluded {
  border-color: var(--color-danger);
  background: var(--color-danger-bg);
}

.lc-wizard-exclude-tag {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--color-danger-text);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

.lc-wizard-audience-count {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.lc-wizard-chip-action {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--bg-subtle);
  color: var(--text-tertiary);
  cursor: pointer;
}

.lc-wizard-chip-action:hover {
  background: var(--color-danger-subtle);
  color: var(--color-danger-text);
}

.lc-wizard-and-word {
  color: var(--color-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

.lc-wizard-add-audience,
.lc-wizard-add-group {
  padding: var(--space-2) var(--space-3);
  border: 1px dashed var(--border-medium);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

.lc-wizard-add-group {
  margin-top: var(--space-3);
}

.lc-wizard-add-audience:hover,
.lc-wizard-add-group:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
  color: var(--color-primary);
}

.lc-wizard-add-audience:disabled,
.lc-wizard-add-group:disabled {
  cursor: default;
  opacity: .5;
}

.lc-wizard-or-joint {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-3) 0;
}

.lc-wizard-or-joint span {
  flex: 1;
  height: 1px;
  background: var(--border-default);
}

.lc-wizard-or-joint b {
  padding: var(--space-1) var(--space-3);
  border: 1px dashed var(--border-medium);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.lc-wizard-builder-legend {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-3);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.lc-wizard-builder-legend b {
  color: var(--text-secondary);
}

.lc-wizard-builder > .alert {
  margin-top: var(--space-3);
}

.lc-wizard-audience-picker {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-primary-subtle);
  border-radius: var(--lc-wizard-radius-card);
  background: var(--bg-surface);
  box-shadow: var(--shadow-xl);
}

.lc-wizard-audience-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.lc-wizard-audience-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
}

.lc-wizard-audience-option:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
}

.lc-wizard-audience-option:disabled {
  cursor: default;
  opacity: .45;
}

.lc-wizard-audience-option strong,
.lc-wizard-audience-option small {
  display: block;
}

.lc-wizard-audience-option small {
  margin-top: var(--space-1);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}

.lc-wizard-optional {
  margin-left: var(--space-2);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
}

.lc-lseg-page .lc-demographic-card {
  gap: var(--space-4);
  margin: 0;
  background: transparent;
}

.lc-lseg-page .lc-demographic-header > div {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.lc-wizard-clear-link {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  text-decoration: underline;
}

.lc-lseg-page .lc-demographic-field {
  padding: var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--lc-wizard-radius-card);
  background: var(--bg-surface);
}

.lc-lseg-page .lc-demographic-field.on {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
}

.lc-lseg-page .lc-demographic-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.lc-lseg-page .lc-demographic-label span:last-child {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.lc-lseg-page .lc-demographic-field.on .lc-demographic-label span:last-child {
  color: var(--color-primary);
}

.lc-lseg-page .lc-demographic-checks label,
.lc-lseg-page .lc-demographic-areas label {
  position: relative;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  cursor: pointer;
}

.lc-lseg-page .lc-demographic-checks label:has(input:checked),
.lc-lseg-page .lc-demographic-areas label:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--text-inverse);
}

.lc-lseg-page .lc-demographic-checks input,
.lc-lseg-page .lc-demographic-areas input {
  position: absolute;
  opacity: 0;
}

.lc-lseg-page .lc-demographic-range {
  gap: var(--space-2);
}

.lc-lseg-page .lc-demographic-areas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  max-height: 190px;
  padding: 0;
  border: 0;
  background: transparent;
}

.lc-wizard-attr-note,
.lc-wizard-estimate-note {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-muted);
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
}

.lc-lseg-page .lc-demographic-estimate {
  border: 1px solid var(--color-info-border);
  border-left: 3px solid var(--color-info);
}

.lc-wizard-schedule-message {
  margin-bottom: var(--space-4);
}

.lc-wizard-schedule-detail {
  margin-top: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--border-default);
  border-radius: var(--lc-wizard-radius-card);
  background: var(--bg-muted);
}

.lc-wizard-schedule-row,
.lc-wizard-time-presets {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.lc-wizard-schedule-row input {
  font-weight: var(--font-weight-semibold);
}

.lc-wizard-schedule-row span,
.lc-wizard-schedule-detail p {
  color: var(--text-tertiary);
  font-size: var(--font-size-base);
}

.lc-wizard-time-presets {
  margin-top: var(--space-3);
}

.lc-wizard-time-presets button {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}

.lc-wizard-time-presets button:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.lc-wizard-time-presets button.selected {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--text-inverse);
}

.lc-wizard-schedule-detail p {
  margin-top: var(--space-3);
  line-height: var(--line-height-relaxed);
}

.lc-wizard-message-types {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.lc-wizard-message-types button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  min-height: 78px;
  padding: var(--space-3) var(--space-2);
  border: 2px solid var(--border-default);
  border-radius: var(--lc-wizard-radius-card);
  background: var(--bg-surface);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
}

.lc-wizard-message-types button span {
  font-size: var(--font-size-3xl);
}

.lc-wizard-message-types button.selected {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
  color: var(--color-primary);
}

.lc-wizard-title-field {
  margin-bottom: var(--space-4);
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}

.lc-wizard-editor {
  overflow: hidden;
  border: 1px solid var(--border-medium);
  border-radius: var(--lc-wizard-radius-card);
}

.lc-wizard-editor-toolbar,
.lc-wizard-editor-foot {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-muted);
}

.lc-wizard-editor-toolbar {
  border-bottom: 1px solid var(--border-default);
}

.lc-wizard-editor-toolbar button,
.lc-wizard-editor-toolbar label {
  padding: var(--space-1) var(--space-2);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}

.lc-wizard-editor-toolbar button:hover,
.lc-wizard-editor-toolbar label:hover {
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}

.lc-wizard-editor .lc-lseg-textarea {
  display: block;
  width: 100%;
  min-height: 180px;
  margin: 0;
  padding: var(--space-4);
  border: 0;
  border-radius: 0;
  outline: 0;
  font-size: var(--font-size-lg);
  line-height: 1.8;
}

.lc-wizard-editor-foot {
  justify-content: space-between;
  border-top: 1px solid var(--border-default);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.lc-cmp-selected {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}

.lc-cmp-selected.is-empty {
  background: var(--bg-muted);
}

.lc-cmp-selected-media {
  position: relative;
  display: grid;
  width: 72px;
  aspect-ratio: 1;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--bg-subtle);
}

.lc-cmp-selected-media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lc-cmp-selected-body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-1);
}

.lc-cmp-selected-body small {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}

.lc-cmp-selected-body strong {
  overflow: hidden;
  color: var(--text-primary);
  font-size: var(--font-size-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lc-cmp-selected-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.lc-cmp-selected-note {
  grid-column: 1 / -1;
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.lc-cmp-picker-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  background: rgba(15, 23, 42, 0.5);
}

.lc-cmp-picker {
  display: flex;
  width: 840px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 80px);
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
  box-shadow: var(--shadow-xl);
}

.lc-cmp-picker-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5) var(--space-3);
  border-bottom: 1px solid var(--border-default);
}

.lc-cmp-picker-head h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-lg);
}

.lc-cmp-picker-count {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}

.lc-cmp-picker-search {
  width: 230px;
  margin-left: auto;
  padding: 7px 14px;
  border: 1px solid var(--border-input);
  border-radius: var(--radius-full);
  outline: 0;
  background: var(--bg-input);
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--font-size-sm);
}

.lc-cmp-picker-search:focus {
  border-color: var(--border-focus);
  background: var(--bg-surface);
  box-shadow: var(--shadow-focus);
}

.lc-cmp-picker-close {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-tertiary);
  font-family: inherit;
  font-size: var(--font-size-xl);
  cursor: pointer;
}

.lc-cmp-picker-close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.lc-cmp-grid {
  display: grid;
  min-height: 220px;
  flex: 1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  overflow-y: auto;
}

.lc-cmp-tile {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 174px;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
  border: 2px solid var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-normal);
}

.lc-cmp-tile:hover {
  transform: translateY(-2px);
  border-color: var(--border-medium);
  box-shadow: var(--shadow-lg);
}

.lc-cmp-tile:focus-visible {
  outline: 0;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}

.lc-cmp-tile.selected {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-subtle), var(--shadow-md);
}

.lc-cmp-tile-img {
  position: relative;
  display: grid;
  width: 100%;
  height: 108px;
  flex: 0 0 108px;
  place-items: center;
  overflow: hidden;
  background: var(--bg-subtle);
}

.lc-cmp-tile-img > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lc-cmp-media-placeholder {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  padding: var(--space-2);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  text-align: center;
}

.lc-cmp-media-placeholder[hidden] {
  display: none;
}

.lc-cmp-tile-check {
  position: absolute;
  top: 7px;
  right: 7px;
  display: none;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--text-inverse);
  box-shadow: var(--shadow-sm);
  font-size: var(--font-size-sm);
}

.lc-cmp-tile.selected .lc-cmp-tile-check {
  display: grid;
}

.lc-cmp-tile-body {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3) var(--space-3);
}

.lc-cmp-tile-body strong {
  display: -webkit-box;
  min-height: 30px;
  overflow: hidden;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.lc-cmp-tile-meta {
  margin-top: auto;
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}

.lc-cmp-picker-foot {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5) var(--space-4);
  border-top: 1px solid var(--border-default);
}

.lc-cmp-picker-selection {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lc-cmp-picker-empty {
  grid-column: 1 / -1;
  padding: var(--space-8) 0;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  text-align: center;
}

@media (max-width: 700px) {
  .lc-cmp-selected {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .lc-cmp-selected-media {
    width: 64px;
  }

  .lc-cmp-selected-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .lc-cmp-picker-head {
    flex-wrap: wrap;
  }

  .lc-cmp-picker-search {
    width: calc(100% - 42px);
    margin-left: 0;
    order: 2;
  }

  .lc-cmp-picker-close {
    margin-left: auto;
  }

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

  .lc-cmp-picker-foot {
    flex-wrap: wrap;
  }

  .lc-cmp-picker-selection {
    flex-basis: 100%;
  }
}

.lc-wizard-track-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  cursor: pointer;
}

.lc-wizard-track-option input {
  accent-color: var(--color-primary);
}

.lc-wizard-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.lc-wizard-side-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-subtle);
  margin-bottom: var(--space-3);
}

.lc-wizard-side-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-tertiary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: all .15s;
}

.lc-wizard-side-tab:hover {
  color: var(--text-secondary);
}

.lc-wizard-side-tab.active {
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

.lc-wizard-side-reach {
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--color-primary-subtle);
  color: var(--color-primary-active);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

.lc-wizard-side-tab.active .lc-wizard-side-reach {
  background: var(--color-primary);
  color: var(--text-inverse);
}

.lc-wizard-side-pane {
  display: none;
}

.lc-wizard-side-pane.active {
  display: block;
}

.lc-wizard-summary-card {
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--lc-wizard-radius-panel);
  background: var(--bg-surface);
  box-shadow: var(--shadow-md);
}

.lc-wizard-summary-head {
  padding: var(--space-4) var(--space-5);
  background: linear-gradient(135deg, var(--bg-nav), var(--color-primary-active));
  color: var(--text-inverse);
}

.lc-wizard-summary-head > span {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: .16em;
  opacity: .72;
}

.lc-wizard-summary-head > div {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.lc-wizard-summary-head strong {
  font-size: var(--lc-wizard-font-display);
  line-height: var(--line-height-tight);
}

.lc-wizard-summary-head small {
  font-size: var(--font-size-md);
  opacity: .8;
}

.lc-wizard-summary-head p {
  margin-top: var(--space-1);
  overflow: hidden;
  font-size: var(--font-size-sm);
  opacity: .7;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lc-wizard-funnel-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
}

.lc-wizard-funnel-row + .lc-wizard-funnel-row {
  border-top: 1px dashed var(--border-default);
}

.lc-wizard-funnel-row > span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-xl);
  background: var(--bg-muted);
}

.lc-wizard-funnel-row b {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  letter-spacing: .04em;
}

.lc-wizard-funnel-row p {
  display: -webkit-box;
  margin-top: 2px;
  overflow: hidden;
  color: var(--text-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.lc-wizard-funnel-row > strong {
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  white-space: nowrap;
}

.lc-wizard-funnel-row.pending p {
  color: var(--text-muted);
}

.lc-wizard-warning,
.lc-wizard-estimate-note {
  margin: 0 var(--space-4) var(--space-3);
}

.lc-wizard-warning {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-lg);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

/* ============================================================================
   LINE Native Preview (.lnp-*)
   iOS版LINE（393pt幅）の実測比を共有するプレビュー用プリミティブ。
   各サーフェスはトーク画面の内側幅を --lnp-w で指定する。
   ========================================================================== */
.lnp {
  --lnp-pt: calc(var(--lnp-w, 320px) / 393);
  --lnp-bg: #8cabd8;
  --lnp-bubble-bg: #ffffff;
  --lnp-ink: #1f2328;
  --lnp-meta: rgba(0, 0, 0, .45);
  width: var(--lnp-w, 320px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--lnp-bg);
  color: var(--lnp-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif;
  text-align: left;
}

.lnp-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: calc(6 * var(--lnp-pt));
  height: calc(44 * var(--lnp-pt));
  padding: 0 calc(12 * var(--lnp-pt));
  background: #fff;
  color: #14161a;
  font-size: calc(15 * var(--lnp-pt));
  font-weight: 700;
}

.lnp-head-back { opacity: .75; font-weight: 400; }
.lnp-head-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lnp-head-verified {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(15 * var(--lnp-pt));
  height: calc(15 * var(--lnp-pt));
  border-radius: 50%;
  background: #06c755;
  color: #fff;
  font-size: calc(9 * var(--lnp-pt));
}
.lnp-head-icons { margin-left: auto; opacity: .55; letter-spacing: calc(5 * var(--lnp-pt)); font-weight: 400; }

.lnp-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: calc(10 * var(--lnp-pt)) 0 calc(12 * var(--lnp-pt));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.lnp-body::-webkit-scrollbar { width: calc(3 * var(--lnp-pt)); }
.lnp-body::-webkit-scrollbar-thumb { border-radius: 99px; background: rgba(255, 255, 255, .45); }

.lnp-datepill { display: flex; justify-content: center; margin-bottom: calc(8 * var(--lnp-pt)); }
.lnp-datepill > span {
  padding: calc(3.5 * var(--lnp-pt)) calc(11 * var(--lnp-pt));
  border-radius: 99px;
  background: rgba(0, 0, 0, .15);
  color: #fff;
  font-size: calc(10 * var(--lnp-pt));
  line-height: 1.4;
}

.lnp-row {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-top: calc(5 * var(--lnp-pt));
}
.lnp-row:first-child { margin-top: 0; }
.lnp-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(27 * var(--lnp-pt));
  height: calc(27 * var(--lnp-pt));
  margin-left: calc(6.6 * var(--lnp-pt));
  overflow: hidden;
  border-radius: 50%;
  background: #fff;
  color: #06c755;
  font-size: calc(10 * var(--lnp-pt));
  font-weight: 800;
}
.lnp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.lnp-avatar.is-blank { visibility: hidden; }
.lnp-break { flex: 0 0 100%; height: 0; }

.lnp-bubble {
  max-width: calc(255 * var(--lnp-pt));
  margin-left: calc(6 * var(--lnp-pt));
  padding: calc(8 * var(--lnp-pt)) calc(12.5 * var(--lnp-pt));
  border-radius: calc(11 * var(--lnp-pt));
  background: var(--lnp-bubble-bg);
  font-size: calc(13.4 * var(--lnp-pt));
  line-height: 1.35;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.lnp-bubble.is-placeholder { color: rgba(0, 0, 0, .4); }

.lnp-time {
  flex: none;
  align-self: flex-end;
  margin-left: calc(5.5 * var(--lnp-pt));
  color: var(--lnp-meta);
  font-size: calc(9 * var(--lnp-pt));
  line-height: 1;
}
.lnp-time.is-below {
  flex: 0 0 100%;
  align-self: auto;
  margin: calc(3 * var(--lnp-pt)) 0 0;
  padding-right: calc(13 * var(--lnp-pt));
  text-align: right;
}

.lnp-imagemap {
  position: relative;
  flex: 0 0 auto;
  width: calc(383 * var(--lnp-pt));
  margin-left: calc(3.6 * var(--lnp-pt));
  overflow: hidden;
  border-radius: calc(3.6 * var(--lnp-pt));
  background: rgba(255, 255, 255, .35);
}
.lnp-imagemap > img,
.lnp-imagemap > video { display: block; width: 100%; height: auto; }

.lnp-image {
  flex: 0 0 auto;
  max-width: calc(240 * var(--lnp-pt));
  margin-left: calc(6 * var(--lnp-pt));
  overflow: hidden;
  border-radius: calc(11 * var(--lnp-pt));
}
.lnp-image > img { display: block; width: 100%; height: auto; }

.lnp-carousel {
  flex: 0 0 100%;
  display: flex;
  gap: calc(7.1 * var(--lnp-pt));
  padding: 0 calc(6.6 * var(--lnp-pt)) calc(3 * var(--lnp-pt));
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}
.lnp-carousel::-webkit-scrollbar { height: 0; }
.lnp-card {
  flex: 0 0 calc(266 * var(--lnp-pt));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  scroll-snap-align: start;
  border-radius: calc(11.8 * var(--lnp-pt));
  background: #fff;
  font-size: calc(13.4 * var(--lnp-pt));
}
.lnp-card.is-image { background: transparent; }
.lnp-card-img { position: relative; display: block; width: 100%; background: rgba(0, 0, 0, .06); }
.lnp-card-img > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lnp-card-imglabel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: calc(16 * var(--lnp-pt)) calc(10 * var(--lnp-pt)) calc(8 * var(--lnp-pt));
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .6));
  color: #fff;
  font-size: calc(11 * var(--lnp-pt));
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lnp-card-body { padding: calc(11 * var(--lnp-pt)) calc(13 * var(--lnp-pt)) calc(6 * var(--lnp-pt)); }
.lnp-card-title { font-weight: 700; font-size: calc(15 * var(--lnp-pt)); line-height: 1.35; overflow-wrap: anywhere; }
.lnp-card-desc { margin-top: calc(4 * var(--lnp-pt)); color: #888; font-size: calc(11 * var(--lnp-pt)); line-height: 1.4; }
.lnp-card-price { margin-top: calc(6 * var(--lnp-pt)); font-weight: 700; font-size: calc(13 * var(--lnp-pt)); }
.lnp-card-actions { margin-top: auto; }
.lnp-card-action {
  padding: calc(10 * var(--lnp-pt));
  border-top: 1px solid rgba(0, 0, 0, .08);
  color: #06c755;
  font-size: calc(12.5 * var(--lnp-pt));
  font-weight: 700;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lnp-input {
  flex: none;
  display: flex;
  align-items: center;
  gap: calc(8 * var(--lnp-pt));
  height: calc(42 * var(--lnp-pt));
  padding: 0 calc(12 * var(--lnp-pt));
  background: #fff;
  color: rgba(0, 0, 0, .35);
  font-size: calc(15 * var(--lnp-pt));
}
.lnp-input-field {
  flex: 1;
  height: calc(26 * var(--lnp-pt));
  border-radius: 99px;
  background: rgba(0, 0, 0, .05);
}

.lnp-device {
  width: fit-content;
  margin: 0 auto;
  padding: calc(6 * var(--lnp-pt));
  border-radius: calc(46 * var(--lnp-pt));
  background: #111418;
  box-shadow: var(--shadow-xl);
}
.lnp-device > .lnp { border-radius: calc(40 * var(--lnp-pt)); }
.lnp-notch {
  flex: none;
  display: flex;
  justify-content: center;
  height: calc(22 * var(--lnp-pt));
  background: #fff;
}
.lnp-notch > span {
  width: calc(92 * var(--lnp-pt));
  height: calc(17 * var(--lnp-pt));
  border-radius: 0 0 calc(11 * var(--lnp-pt)) calc(11 * var(--lnp-pt));
  background: #111418;
}

.lc-wizard-preview-sim .lnp-card > .lc-muted {
  margin-top: calc(4 * var(--lnp-pt));
  padding: calc(3 * var(--lnp-pt)) calc(7 * var(--lnp-pt));
  border-radius: calc(6 * var(--lnp-pt));
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: calc(10 * var(--lnp-pt));
  line-height: 1.3;
  text-align: center;
  overflow-wrap: anywhere;
}

.lc-wizard-phone-wrap {
  text-align: center;
}

.lc-wizard-preview-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
  width: 356px;
  margin: 0 auto var(--space-2);
  padding: 3px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-subtle);
}

.lc-wizard-preview-tab {
  min-width: 0;
  padding: 7px 2px;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-tertiary);
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.lc-wizard-preview-tab:hover {
  color: var(--text-secondary);
}

.lc-wizard-preview-tab.is-on,
.lc-wizard-preview-tab.active {
  background: var(--bg-surface);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.lc-wizard-preview-tab:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.lc-wizard-phone {
  --lnp-w: 344px;
  --lnp-pt: calc(var(--lnp-w) / 393);
  width: 356px;
  margin: 0 auto;
  padding: 6px;
}

.lc-wizard-phone-screen {
  height: 570px;
}

.lc-wizard-preview-screen,
.lc-wizard-preview-talk,
.lc-wizard-preview-sim {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.lnp-content,
.lnp-content-body {
  min-width: 0;
}

.lnp-content {
  display: flex;
  align-items: flex-end;
}

.lnp-row.is-wide .lnp-content {
  flex: 0 0 100%;
  flex-wrap: wrap;
}

.lnp-row.is-wide .lnp-content-body {
  flex: 0 0 100%;
}

.lc-wizard-preview-video-unavailable {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.lc-wizard-preview-media span,
.lc-wizard-preview-card strong,
.lc-wizard-preview-card span {
  display: block;
  padding: var(--space-2);
}

.lc-wizard-preview-card span {
  padding-top: 0;
  color: var(--text-tertiary);
}

.lc-wizard-preview-carousel-placeholder {
  height: 100%;
  background: var(--bg-subtle);
}

.lc-wizard-preview-carousel-placeholder {
  display: grid;
  place-items: center;
  padding: var(--space-2);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  text-align: center;
}

.lc-wizard-sim-stack {
  display: flex;
  flex-direction: column;
}

.lc-wizard-sim-stack .lc-wizard-preview-media {
  margin-top: 0;
}

.lc-wizard-sim-canvas {
  position: relative;
}

.lc-wizard-sim-canvas img {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
}

.lc-wizard-sim-area {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 2px solid var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 18%, transparent);
  color: var(--text-inverse);
  text-shadow: 0 1px 2px var(--text-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  pointer-events: auto;
  cursor: pointer;
}

.lc-wizard-sim-area:hover {
  background: color-mix(in srgb, var(--color-primary) 30%, transparent);
}

.lc-wizard-sim-area:focus-visible {
  outline: 3px solid var(--color-warning);
  outline-offset: -3px;
}

.lc-wizard-sim-action {
  width: 100%;
  margin-top: 2px;
  padding: var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}

.lc-wizard-sim-action:focus-visible,
.lc-wizard-sim-card-button:focus-visible,
.lc-wizard-sim-card-image:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.lc-wizard-sim-card-button {
  width: 100%;
  border: 0;
  cursor: pointer;
}

.lc-wizard-sim-card-image {
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: var(--bg-subtle);
  cursor: pointer;
}

.lc-wizard-sim-card-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lc-wizard-preview-toast {
  position: absolute;
  right: var(--space-3);
  bottom: 52px;
  left: var(--space-3);
  z-index: 5;
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-nav);
  color: var(--text-inverse);
  box-shadow: var(--shadow-xl);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  text-align: left;
}

.lc-wizard-preview-toast[hidden] {
  display: none;
}

.lc-wizard-preview-toast > span,
.lc-wizard-preview-toast b,
.lc-wizard-preview-toast b + span {
  display: block;
}

.lc-wizard-preview-toast b + span {
  margin-top: var(--space-1);
  color: var(--border-light);
  font-size: var(--font-size-xs);
  overflow-wrap: anywhere;
}

.lc-wizard-tl {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  background: var(--bg-surface);
  color: var(--text-primary);
  text-align: left;
}

.lc-wizard-tl-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 54px;
  padding: 0 var(--space-4);
  border-bottom: 1px solid var(--border-default);
  font-size: var(--font-size-lg);
}

.lc-wizard-tl-head span {
  color: var(--text-tertiary);
  font-size: var(--font-size-base);
}

.lc-wizard-tl-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  min-height: 70px;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-light);
}

.lc-wizard-tl-row.is-highlight {
  background: var(--color-primary-subtle);
}

.lc-wizard-tl-avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-lg);
  background: var(--color-success);
  color: var(--text-inverse);
  font-size: 10px;
  font-weight: var(--font-weight-bold);
}

.lc-wizard-tl-avatar.is-muted {
  border-radius: var(--radius-full);
  background: var(--bg-subtle);
  color: var(--text-secondary);
  font-size: var(--font-size-base);
}

.lc-wizard-tl-body,
.lc-wizard-tl-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.lc-wizard-tl-name {
  overflow: hidden;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lc-wizard-tl-verified {
  color: var(--color-primary);
}

.lc-wizard-tl-message {
  margin-top: 2px;
  overflow: hidden;
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lc-wizard-tl-meta {
  align-items: flex-end;
  gap: var(--space-1);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}

.lc-wizard-tl-badge {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  background: #06c755;
  color: var(--text-inverse);
  font-weight: var(--font-weight-bold);
}

.lc-wizard-nt {
  flex: 1 1 auto;
  min-height: 0;
  padding: 64px var(--space-3) var(--space-5);
  overflow-y: auto;
  background: linear-gradient(160deg, var(--color-primary-subtle), var(--bg-muted));
  color: var(--text-primary);
}

.lc-wizard-nt-time {
  margin-bottom: var(--space-6);
  font-size: 42px;
  font-weight: var(--font-weight-normal);
  line-height: 1;
}

.lc-wizard-nt-card {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
  box-shadow: var(--shadow-lg);
  text-align: left;
}

.lc-wizard-nt-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--color-success);
  color: var(--text-inverse);
  font-size: 9px;
  font-weight: var(--font-weight-bold);
}

.lc-wizard-nt-body,
.lc-wizard-nt-top {
  min-width: 0;
  display: flex;
}

.lc-wizard-nt-body {
  flex-direction: column;
}

.lc-wizard-nt-top {
  align-items: center;
  justify-content: space-between;
}

.lc-wizard-nt-top small,
.lc-wizard-nt-from {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}

.lc-wizard-nt-text {
  display: -webkit-box;
  margin-top: var(--space-1);
  overflow: hidden;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.lc-wizard-phone-wrap > p {
  margin-top: var(--space-2);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.lc-wizard-test-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.lc-wizard-test-recipients {
  display: flex;
  justify-content: center;
  gap: var(--space-1);
  margin-top: var(--space-2);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.lc-wizard-test-recipients span + span::before {
  content: "・";
}

.lc-wizard-test-recipients span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.lc-wizard-test-recipients button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.lc-test-send-backdrop {
  padding: var(--space-4);
}

.lc-test-send-modal {
  width: 460px;
  max-width: calc(100vw - (2 * var(--space-4)));
}

.lc-test-send-title {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
}

.lc-test-send-hint {
  margin: 0 0 var(--space-4);
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
}

.lc-test-send-toolbar,
.lc-test-send-toolbar-actions,
.lc-test-send-footer,
.lc-test-send-footer-actions {
  display: flex;
  align-items: center;
}

.lc-test-send-toolbar {
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.lc-test-send-toolbar-actions,
.lc-test-send-footer-actions {
  gap: var(--space-2);
}

.lc-test-send-count,
.lc-test-send-footer-count {
  color: var(--text-secondary);
  font-size: var(--font-size-base);
}

.lc-test-send-count strong,
.lc-test-send-footer-count strong {
  color: var(--text-primary);
  font-size: var(--font-size-lg);
}

.lc-test-send-list {
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}

.lc-test-send-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-surface);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.lc-test-send-row:last-child {
  border-bottom: 0;
}

.lc-test-send-row:hover {
  background: var(--bg-muted);
}

.lc-test-send-row:focus-within {
  background: var(--color-primary-bg);
  box-shadow: inset var(--shadow-focus);
}

.lc-test-send-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.lc-test-send-row-main {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.lc-test-send-row-name {
  overflow: hidden;
  color: var(--text-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lc-test-send-row-sub {
  overflow: hidden;
  color: var(--text-muted);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--font-size-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lc-test-send-charge,
.lc-test-send-warning {
  margin-top: var(--space-4);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
}

.lc-test-send-charge {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  border: 1px solid var(--color-warning-subtle);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}

.lc-test-send-warning {
  margin-bottom: var(--space-3);
  border: 1px solid var(--color-info-border);
  background: var(--color-info-bg);
  color: var(--color-info);
}

.lc-test-send-caption {
  margin: var(--space-4) 0 0;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.lc-test-send-empty {
  padding: var(--space-6);
}

.lc-test-send-footer {
  justify-content: space-between;
}

.lc-wizard-history {
  width: calc(100% - (2 * var(--space-6)));
  max-width: 1600px;
  margin: var(--space-4) auto 0;
}

.lc-wizard-history .card {
  box-shadow: var(--shadow-sm);
}

.lc-wizard-row-actions {
  display: inline-flex;
  gap: var(--space-1);
}

.lc-wizard-confirm-funnel {
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-muted);
}

.lc-wizard-confirm-funnel > div {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
}

.lc-wizard-confirm-funnel > div + div {
  border-top: 1px solid var(--border-default);
}

.lc-wizard-confirm-funnel span {
  color: var(--text-tertiary);
  font-size: var(--font-size-base);
}

.lc-wizard-confirm-funnel strong {
  color: var(--text-primary);
  font-size: var(--font-size-base);
  overflow-wrap: anywhere;
}

.lc-lseg-page .lc-modal-error {
  white-space: pre-line;
}

@media (max-width: 1500px) {
  .lc-wizard-cta-hint {
    display: none;
  }
}

@media (max-width: 1400px) {
  .lc-wizard-layout {
    grid-template-columns: 190px minmax(500px, 1fr) 320px;
    gap: var(--space-4);
  }

  .lc-wizard-panel {
    padding: var(--space-6);
  }

  .lc-wizard-phone {
    --lnp-w: 302px;
    --lnp-pt: calc(var(--lnp-w) / 393);
    width: 312px;
    padding: 5px;
  }

  .lc-wizard-preview-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 312px;
  }

  .lc-wizard-preview-tab {
    font-size: var(--font-size-xs);
  }

  .lc-wizard-phone-screen {
    height: 500px;
  }
}

/* === 納品差異回答ボード / 相殺タブ2段化 === */
.inquiry-badge-offset { background: #ede9fe; color: #7c3aed; }
.inquiry-badge-muted { background: var(--bg-subtle); color: var(--text-tertiary); }
.inquiry-status-sub { display: block; font-size: var(--font-size-xs); color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inquiry-resolve-check { display: flex; align-items: center; gap: 4px; margin-top: 3px; font-size: var(--font-size-xs); color: var(--text-secondary); cursor: pointer; }
.inquiry-resolve-check input { accent-color: var(--color-success-dark); margin: 0; cursor: pointer; }
.inquiry-sku { font-weight: var(--font-weight-semibold); }
.inquiry-muted { color: var(--text-muted); }
.inquiry-notes { color: var(--text-tertiary); }
.inquiry-actions { white-space: nowrap; }
.inquiry-board-table th, .inquiry-board-table td { text-align: left; }
.inquiry-board-table tbody td { padding-top: 6px; padding-bottom: 6px; }
tr.inquiry-row-resolved td { color: var(--text-muted); }
.inquiry-board-legend { font-size: var(--font-size-xs); color: var(--text-muted); padding: 8px 12px; background: var(--bg-muted); border-top: 1px solid var(--border-light); }
.offset-pair-minus { color: var(--color-danger-text); font-weight: var(--font-weight-semibold); }
.offset-pair-plus { color: var(--color-success-dark); font-weight: var(--font-weight-semibold); }
.offset-amount-num { text-align: right; font-weight: var(--font-weight-semibold); }
.offset-toolbar-note { font-size: var(--font-size-sm); color: var(--text-muted); }
.offset-modal-row { display: grid; grid-template-columns: 110px 90px 1fr 70px 85px 90px 24px; gap: 8px; align-items: center; margin-bottom: 8px; }
.offset-modal-heads { display: grid; grid-template-columns: 110px 90px 1fr 70px 85px 90px 24px; gap: 8px; font-size: var(--font-size-xs); color: var(--text-muted); margin-bottom: 4px; }
.offset-modal-amount { text-align: right; font-size: var(--font-size-sm); color: var(--text-tertiary); }
.offset-modal-balance { display: flex; align-items: center; gap: 18px; background: var(--bg-muted); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 10px 14px; margin-top: 10px; font-size: var(--font-size-base); }
.offset-modal-balance-ok { color: var(--color-success-dark); font-weight: var(--font-weight-bold); margin-left: auto; }
.offset-modal-hint { margin-top: 12px; border-radius: var(--radius-md); padding: 10px 14px; font-size: var(--font-size-sm); color: var(--text-secondary); background: #ede9fe; }
.offset-modal-hint b { color: #7c3aed; }
.offset-side-label { font-size: var(--font-size-md); font-weight: var(--font-weight-bold); margin: 0 0 8px; }
.offset-side-label.minus { color: var(--color-danger-text); }
.offset-side-label.plus { color: var(--color-success-dark); }
.offset-add-row-btn { background: none; border: none; padding: 0; font-size: var(--font-size-sm); color: var(--color-primary); font-weight: var(--font-weight-medium); cursor: pointer; }

/* === LINE console / 楽天RMS公式月次サマリー === */
.lcona-rms-section {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
}

.lcona-rms-heading,
.lcona-rms-demographic-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.lcona-rms-title {
  color: var(--text-primary);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.lcona-rms-period,
.lcona-rms-basis,
.lcona-rms-empty {
  margin-top: var(--space-1);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.lcona-rms-note {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-info-border);
  border-radius: var(--radius-md);
  background: var(--color-info-bg);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

.lcona-rms-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-2);
}

.lcona-rms-kpi,
.lcona-rms-stat,
.lcona-rms-demographic-group {
  min-width: 0;
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}

.lcona-rms-kpi-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--font-size-base);
}

.lcona-rms-kpi-value {
  margin-top: var(--space-2);
  color: var(--text-primary);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.lcona-rms-delta {
  display: inline-block;
  margin-top: var(--space-1);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.lcona-rms-delta.up {
  color: var(--color-success-dark);
}

.lcona-rms-delta.down {
  color: var(--color-danger-text);
}

.lcona-rms-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-2);
}

.lcona-rms-stat {
  display: grid;
  gap: var(--space-1);
}

.lcona-rms-stat > span,
.lcona-rms-stat > small {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.lcona-rms-stat > strong {
  color: var(--text-primary);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
}

.lcona-rms-demographics {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-1);
}

.lcona-rms-subtitle,
.lcona-rms-demographic-title {
  color: var(--text-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.lcona-rms-demographic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-2);
}

.lcona-rms-demographic-group {
  display: grid;
  align-content: start;
  gap: var(--space-2);
}

.lcona-rms-bar-row {
  display: grid;
  gap: var(--space-1);
}

.lcona-rms-bar-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.lcona-rms-bar-track {
  height: var(--space-2);
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--bg-subtle);
}

.lcona-rms-bar-fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--color-primary);
}

/* === LINE console / dashboard multi-view shell === */
.lcona-shell {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-4);
}

.lcona-tabs {
  display: flex;
  overflow-x: auto;
  flex-wrap: wrap;
  gap: var(--space-1);
  border-bottom: 1px solid var(--border-default);
}

.lcona-tab {
  padding: var(--space-2) var(--space-3);
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text-tertiary);
  cursor: pointer;
  font-family: var(--font-family);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
}

.lcona-tab:hover {
  color: var(--text-primary);
}

.lcona-tab:focus-visible {
  border-radius: var(--radius-md);
  outline: 2px solid var(--border-focus);
  outline-offset: calc(var(--space-1) * -1);
}

.lcona-tab[aria-selected="true"] {
  box-shadow: inset 0 -2px 0 var(--color-primary);
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

.lcona-view,
.lcona-view-host {
  min-width: 0;
}

.lcona-bdg,
.lcona-att {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
}

.lcona-bdg {
  padding: var(--space-1) var(--space-2);
}

.lcona-bdg-text {
  background: var(--bg-subtle);
  color: var(--text-secondary);
}

.lcona-bdg-image {
  background: var(--color-success-bg);
  color: var(--color-success-text);
}

.lcona-bdg-imagemap {
  background: var(--color-primary-bg);
  color: var(--color-primary);
}

.lcona-bdg-card {
  background: var(--color-info-bg);
  color: var(--color-info);
}

.lcona-bdg-video {
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}

.lcona-bdg-other {
  background: var(--bg-muted);
  color: var(--text-tertiary);
}

.lcona-att {
  margin-left: var(--space-1);
  padding: 0 var(--space-1);
}

.lcona-att-actual {
  background: var(--color-success-bg);
  color: var(--color-success-text);
}

.lcona-table th.lcona-cell-number,
.lcona-table td.lcona-cell-number {
  text-align: right;
}

.lcona-list-name {
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
}

.lcona-pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.lcona-placeholder {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  padding: var(--space-8);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
  color: var(--text-tertiary);
  text-align: center;
}

.lcona-placeholder strong {
  color: var(--text-primary);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
}

.lcona-trend {
  gap: var(--space-4);
}

.lcona-trend-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.lcona-trend-controls {
  display: grid;
  gap: var(--space-3);
}

.lcona-trend-chip-group,
.lcona-trend-period {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.lcona-trend-control-label {
  min-width: calc(var(--space-8) * 2);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.lcona-chips {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.lcona-chip {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
}

.lcona-chip:hover,
.lcona-chip:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.lcona-chip:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: var(--space-1);
}

.lcona-chip[aria-selected="true"] {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

.lcona-chip[aria-disabled="true"] {
  border-color: var(--border-light);
  background: var(--bg-muted);
  color: var(--text-muted);
  cursor: not-allowed;
}

.lcona-trend-note,
.lcona-trend-source-status {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.lcona-trend-source-status {
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}

.lcona-trend-chart {
  min-height: 220px;
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
}

.lcona-trend-chart .loading-state,
.lcona-trend-chart .lcona-error {
  min-height: 190px;
}

.lcona-trend-svg {
  display: block;
  width: 100%;
  height: 220px;
}

.lcona-trend-axis {
  stroke: var(--border-default);
  stroke-width: 1;
}

.lcona-trend-line {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.lcona-trend-point {
  fill: var(--color-primary);
  stroke: var(--bg-surface);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.lcona-trend-y-label,
.lcona-trend-x-label {
  fill: var(--text-tertiary);
  font-family: var(--font-family);
  font-size: var(--font-size-xs);
}

.lcona-trend-empty {
  display: grid;
  min-height: 190px;
  place-items: center;
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  text-align: center;
}

.lcona-trend-mini {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-3);
}

@media (max-width: 900px) {
  .lcona-trend-mini {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lcona-trend-control-label {
    min-width: 100%;
  }
}

/* === LINE console / dashboard scatter + calendar === */
.lcona-fetch-note,
.lcona-scatter-excluded,
.lcona-cal-empty {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.lcona-fetch-note {
  border: 1px solid var(--color-warning);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}

.lcona-scatter-head,
.lcona-cal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.lcona-scatter-metrics {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.lcona-scatter-control-label {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.lcona-scatter {
  width: 100%;
  min-height: 260px;
  overflow-x: auto;
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}

.lcona-scatter > .lcona-empty {
  display: grid;
  min-height: 260px;
  place-items: center;
  text-align: center;
}

.lcona-scatter-svg {
  display: block;
  width: 100%;
  min-width: 720px;
  height: auto;
}

.lcona-scatter-bubble {
  vector-effect: non-scaling-stroke;
}

.lcona-scatter-axis-label {
  fill: var(--text-tertiary);
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
}

.lcona-scatter-label {
  fill: var(--text-secondary);
  font-family: var(--font-family);
  font-size: var(--font-size-xs);
}

.lcona-scatter-excluded {
  margin-top: var(--space-2);
}

.lcona-legend {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
}

.lcona-legend b {
  color: var(--text-secondary);
}

.lcona-legend-item {
  display: inline-flex;
  align-items: center;
}

.lcona-scatter-summary {
  display: grid;
  gap: var(--space-2);
}

.lcona-cal-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.lcona-cal-toolbar strong {
  min-width: calc(var(--space-8) * 3);
  color: var(--text-primary);
  font-size: var(--font-size-lg);
  text-align: center;
}

.lcona-cal-panel {
  overflow-x: auto;
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
}

.lcona-cal {
  display: grid;
  min-width: 840px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-1);
}

.lcona-cal-dow {
  padding: var(--space-1);
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-align: center;
}

.lcona-cell {
  min-height: 96px;
  min-width: 0;
  padding: var(--space-1);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  font-size: var(--font-size-xs);
}

.lcona-cell.out {
  border-color: var(--border-light);
  background: var(--bg-muted);
  color: var(--text-muted);
  opacity: 0.6;
}

.lcona-cell-day {
  color: var(--text-tertiary);
  font-weight: var(--font-weight-semibold);
}

.lcona-ev {
  display: block;
  margin-top: var(--space-1);
  overflow: hidden;
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-tight);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lcona-ev.done {
  background: var(--color-primary-bg);
  color: var(--color-primary);
}

.lcona-ev.plan {
  border: 1px dashed var(--color-warning);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}

.lcona-legend .lcona-ev {
  margin-top: 0;
}

.lcona-cell-sales,
.lcona-cal-sales-key {
  color: var(--color-success-text);
  font-weight: var(--font-weight-bold);
}

.lcona-cell-sales {
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-tight);
}

.lcona-cal-empty {
  text-align: center;
}

@media (max-width: 900px) {
  .lcona-scatter-head .lcona-toolbar,
  .lcona-cal-toolbar {
    width: 100%;
  }
}

/* === LINE console / dashboard funnel + acquisition routes === */
.lcona-funnel-view {
  gap: var(--space-4);
}

.lcona-funnel-head,
.lcona-funnel-section-head,
.lcona-funnel-period,
.lcona-fstage-head,
.lcona-route-name,
.lcona-route-notes {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.lcona-funnel-head,
.lcona-funnel-section-head,
.lcona-fstage-head {
  justify-content: space-between;
}

.lcona-funnel-head,
.lcona-funnel-section-head {
  align-items: flex-start;
}

.lcona-funnel-controls,
.lcona-funnel-period {
  flex-wrap: wrap;
}

.lcona-funnel-control-label {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.lcona-funnel-layout {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(280px, 2fr) minmax(420px, 3fr);
  gap: var(--space-4);
  align-items: start;
}

.lcona-funnel-source {
  align-content: start;
  min-width: 0;
  gap: var(--space-3);
}

.lcona-stock {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.lcona-stock-card {
  display: grid;
  min-width: 0;
  gap: var(--space-1);
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}

.lcona-stock-card span,
.lcona-frate,
.lcona-route-notes {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.lcona-stock-card strong {
  color: var(--text-primary);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.lcona-fn,
.lcona-fstage {
  display: grid;
}

.lcona-fn {
  gap: var(--space-3);
}

.lcona-fstage {
  min-width: 0;
  gap: var(--space-1);
}

.lcona-fstage-head {
  color: var(--text-secondary);
  font-size: var(--font-size-base);
}

.lcona-fstage-head strong {
  color: var(--text-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

.lcona-fbar-track {
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
}

.lcona-fbar {
  display: block;
  min-width: var(--space-6);
  height: var(--space-6);
  border-radius: var(--radius-md);
  background: var(--color-primary);
}

.lcona-fbar.sales {
  background: var(--color-success-dark);
}

.lcona-frate {
  text-align: right;
}

.lcona-funnel-note {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-info-border);
  border-radius: var(--radius-md);
  background: var(--color-info-bg);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.lcona-route-name {
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
}

.lcona-route-key {
  flex: none;
}

.lcona-route-notes {
  justify-content: space-between;
  flex-wrap: wrap;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
}

@media (max-width: 900px) {
  .lcona-funnel-head,
  .lcona-funnel-period {
    align-items: flex-start;
  }

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

  .lcona-funnel-head {
    flex-direction: column;
  }
}

/* === LINE console / F-5c URL tracking observation === */
.f5c-dashboard {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: var(--space-3);
}

.f5c-toolbar {
  height: auto;
  min-height: var(--toolbar-height);
  flex-wrap: wrap;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
}

.f5c-field {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.f5c-note {
  flex: none;
}

.f5c-content {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: var(--space-3);
}

.f5c-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-2);
}

.f5c-kpi-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
}

.f5c-kpi-label {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.f5c-kpi-value {
  color: var(--text-primary);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.f5c-section-grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  align-items: start;
}

.f5c-table-card {
  min-width: 0;
  overflow: hidden;
  padding: 0;
}

.f5c-section-wide {
  grid-column: 1 / -1;
}

.f5c-section-heading {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-default);
  color: var(--text-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
}

.f5c-table-card .table-container {
  border: 0;
  border-radius: 0;
}

.f5c-table-card .empty-state {
  padding: var(--space-4);
}

@media (max-width: 900px) {
  .f5c-section-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .f5c-section-wide {
    grid-column: auto;
  }
}

/* ===== Staff timecard redesign (stc2) ===== */
.stc2 { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4); }

/* ---- エントランス（stagger） ---- */
@keyframes stc2-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.stc2-rise { animation: stc2-rise .45s cubic-bezier(.22,.9,.35,1) both; }
.stc2-delay-1 { animation-delay: .06s; }
.stc2-delay-2 { animation-delay: .12s; }

/* ---- ヒーロー ---- */
.stc2-hero {
  position: relative; overflow: hidden;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(1200px 420px at 88% -60%, rgba(59,130,246,.32), transparent 60%),
    radial-gradient(700px 320px at -8% 120%, rgba(34,197,94,.14), transparent 55%),
    linear-gradient(135deg, #0b1220 0%, var(--bg-nav) 55%, #1a2436 100%);
  color: var(--text-inverse);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-lg);
}
.stc2-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.4px);
  background-size: 22px 22px;
}
.stc2-hero-top { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.stc2-hero-ident { display: flex; align-items: center; gap: var(--space-3); }
.stc2-hero-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--font-size-lg); font-weight: var(--font-weight-bold);
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary-hover));
  box-shadow: 0 0 0 3px rgba(255,255,255,.12);
}
.stc2-hero-name { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); letter-spacing: .01em; }
.stc2-hero-caption { font-size: var(--font-size-xs); color: rgba(255,255,255,.62); margin-top: 2px; display: flex; align-items: center; gap: var(--space-2); }
.stc2-hero-caption .stc2-dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.35); }

.stc2-monthnav { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.stc2-monthnav .stc2-navbtn {
  width: 32px; height: 32px; border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.07);
  color: var(--text-inverse); font-size: var(--font-size-base); line-height: 1;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.stc2-monthnav .stc2-navbtn:hover { background: rgba(255,255,255,.16); }
.stc2-monthnav .stc2-navbtn:active { transform: scale(.94); }
.stc2-month-input {
  height: 32px; padding: 0 var(--space-2);
  border-radius: var(--radius-md); border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.07); color: var(--text-inverse);
  font-family: inherit; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold);
  color-scheme: dark;
}
.stc2-ghostbtn {
  height: 32px; padding: 0 var(--space-3); border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.07);
  color: var(--text-inverse); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium);
  transition: background var(--transition-fast);
  display: inline-flex; align-items: center; gap: 6px;
}
.stc2-ghostbtn:hover { background: rgba(255,255,255,.16); }
.stc2-addbtn {
  height: 32px; padding: 0 var(--space-4); border: none; border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
  color: var(--text-inverse); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold);
  box-shadow: 0 4px 14px rgba(37,99,235,.45);
  transition: filter var(--transition-fast), transform var(--transition-fast);
  display: inline-flex; align-items: center; gap: 6px;
}
.stc2-addbtn:hover { filter: brightness(1.08); }
.stc2-addbtn:active { transform: translateY(1px); }

.stc2-hero-kpis {
  position: relative; margin-top: var(--space-5);
  display: grid; grid-template-columns: minmax(240px, 1.5fr) repeat(3, minmax(140px, 1fr));
  gap: var(--space-3);
}
.stc2-kpi {
  border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09);
  backdrop-filter: blur(2px);
}
.stc2-kpi-label { font-size: var(--font-size-xs); color: rgba(255,255,255,.6); letter-spacing: .06em; }
.stc2-kpi-value { margin-top: 4px; font-size: 20px; font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.stc2-kpi-sub { font-size: var(--font-size-xs); color: rgba(255,255,255,.5); margin-top: 3px; font-variant-numeric: tabular-nums; }
.stc2-kpi-main { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.14); }
.stc2-kpi-main .stc2-kpi-value { font-size: 34px; line-height: 1.15; letter-spacing: -.02em; }
.stc2-kpi-main .stc2-kpi-value .stc2-yen { font-size: 20px; margin-right: 2px; color: rgba(255,255,255,.75); }
.stc2-kpi-badge {
  display: inline-block; margin-left: var(--space-2); padding: 2px 8px; border-radius: 999px;
  font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); vertical-align: 4px;
  background: rgba(34,197,94,.18); color: #86efac; border: 1px solid rgba(34,197,94,.35);
}
.stc2-kpi-badge.is-warning { background: rgba(245,158,11,.18); color: #fcd34d; border-color: rgba(245,158,11,.4); }

/* ---- 稼働カレンダー ---- */
.stc2-cal {
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--radius-xl); padding: var(--space-4) var(--space-5); box-shadow: var(--shadow-sm);
}
.stc2-cal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.stc2-cal-title { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--text-secondary); display: flex; align-items: center; gap: var(--space-2); }
.stc2-cal-legend { display: flex; align-items: center; gap: 5px; font-size: var(--font-size-xs); color: var(--text-tertiary); }
.stc2-cal-legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.stc2-cal-legend i.lv0 { background: var(--bg-subtle); }
.stc2-cal-legend i.lv1 { background: var(--color-primary-bg); }
.stc2-cal-legend i.lv2 { background: var(--color-primary-subtle); }
.stc2-cal-legend i.lv3 { background: var(--color-primary-light); }
.stc2-cal-legend i.lv4 { background: var(--color-primary-hover); }
.stc2-cal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(26px, 1fr)); gap: 6px; }
.stc2-cal-day { position: relative; text-align: center; }
.stc2-cal-dow { font-size: 10px; color: var(--text-muted); margin-bottom: 3px; }
.stc2-cal-dow.is-sat { color: var(--color-info); }
.stc2-cal-dow.is-sun { color: var(--color-danger-text); }
.stc2-cal-cell {
  width: 100%; aspect-ratio: 1; border-radius: var(--radius-md);
  background: var(--bg-subtle); border: 1px solid transparent;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.stc2-cal-cell.lv1 { background: var(--color-primary-bg); color: var(--color-primary-hover); }
.stc2-cal-cell.lv2 { background: var(--color-primary-subtle); color: var(--color-primary-hover); }
.stc2-cal-cell.lv3 { background: var(--color-primary-light); color: var(--text-inverse); }
.stc2-cal-cell.lv4 { background: var(--color-primary-hover); color: var(--text-inverse); }
.stc2-cal-cell.is-today { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary-subtle); }
.stc2-cal-day.is-clickable .stc2-cal-cell { cursor: pointer; }
.stc2-cal-day.is-clickable:hover .stc2-cal-cell { transform: translateY(-2px) scale(1.06); box-shadow: var(--shadow-md); }
.stc2-cal-day .stc2-cal-tip {
  position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%);
  background: var(--bg-nav); color: var(--text-inverse); font-size: var(--font-size-xs);
  padding: 4px 8px; border-radius: var(--radius-md); white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity var(--transition-fast); z-index: 5;
}
.stc2-cal-day:hover .stc2-cal-tip { opacity: 1; }
.stc2-cal-day:focus-within .stc2-cal-tip { opacity: 1; }

/* ---- デイリスト ---- */
.stc2-list { display: flex; flex-direction: column; gap: var(--space-2); }
.stc2-listhead {
  display: grid; grid-template-columns: 128px 210px 96px 118px 1fr 168px;
  gap: var(--space-3); padding: 0 var(--space-4);
  font-size: var(--font-size-xs); color: var(--text-tertiary); font-weight: var(--font-weight-semibold);
  letter-spacing: .04em;
}
.stc2-listhead .num { text-align: right; }
.stc2-row {
  display: grid; grid-template-columns: 128px 210px 96px 118px 1fr 168px;
  gap: var(--space-3); align-items: center;
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); padding: var(--space-2) var(--space-4);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base, .2s ease), transform var(--transition-base, .2s ease), border-color var(--transition-base, .2s ease);
}
.stc2-row:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); border-color: var(--border-medium); }
.stc2-row.is-today-row { border-color: var(--color-primary-subtle); background: linear-gradient(0deg, var(--color-primary-bg), var(--bg-surface) 70%); }
.stc2-row.is-highlighted { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-subtle); }

.stc2-date { display: flex; align-items: center; gap: var(--space-2); }
.stc2-date-num { font-size: 22px; font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; letter-spacing: -.02em; width: 30px; text-align: right; }
.stc2-date-meta { display: flex; flex-direction: column; gap: 2px; }
.stc2-date-month { font-size: 10px; color: var(--text-muted); }
.stc2-dow-chip {
  font-size: 10px; font-weight: var(--font-weight-bold); padding: 1px 7px; border-radius: 999px;
  background: var(--bg-subtle); color: var(--text-tertiary); width: fit-content;
}
.stc2-dow-chip.is-sat { background: var(--color-info-subtle); color: var(--color-info); }
.stc2-dow-chip.is-sun { background: var(--color-danger-subtle); color: var(--color-danger-text); }

.stc2-time { display: flex; flex-direction: column; gap: 4px; }
.stc2-time-val { font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; font-size: var(--font-size-base); }
.stc2-time-val small { color: var(--text-muted); font-weight: var(--font-weight-medium); font-size: var(--font-size-xs); margin-left: 2px; }
.stc2-bar { height: 5px; border-radius: 999px; background: var(--bg-subtle); overflow: hidden; }
.stc2-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--color-primary-light), var(--color-primary)); }
.stc2-bar.is-over8 i { background: linear-gradient(90deg, var(--color-warning), #fb923c); }

.stc2-rate { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-secondary); font-size: var(--font-size-sm); }
.stc2-reward { text-align: right; font-variant-numeric: tabular-nums; font-weight: var(--font-weight-bold); font-size: var(--font-size-base); }

.stc2-desc { min-width: 0; display: flex; align-items: center; gap: var(--space-2); }
.stc2-desc-text {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: var(--font-size-sm); color: var(--text-secondary); line-height: 1.5; overflow-wrap: anywhere;
  cursor: pointer;
}
.stc2-desc-text:hover { color: var(--color-primary); }
.stc2-desc-empty { color: var(--text-muted); font-size: var(--font-size-sm); }
.stc2-ai-chip {
  flex: none; font-size: 10px; font-weight: var(--font-weight-bold); padding: 2px 7px; border-radius: 999px;
  background: linear-gradient(135deg, var(--color-info-subtle), var(--color-primary-subtle));
  color: var(--color-info); border: 1px solid var(--color-primary-subtle);
}
@keyframes stc2-shimmer { 0% { background-position: -200px 0; } 100% { background-position: 200px 0; } }
.stc2-desc-pending {
  color: var(--text-muted); font-size: var(--font-size-sm);
  background: linear-gradient(90deg, var(--bg-subtle) 25%, var(--border-light) 50%, var(--bg-subtle) 75%);
  background-size: 400px 100%; animation: stc2-shimmer 1.4s linear infinite;
  border-radius: var(--radius-sm); padding: 2px 8px;
}

.stc2-actions { display: flex; justify-content: flex-end; gap: 6px; opacity: 0; transition: opacity var(--transition-fast); }
.stc2-row:hover .stc2-actions, .stc2-row:focus-within .stc2-actions { opacity: 1; }
.stc2-iconbtn {
  height: 26px; padding: 0 10px; border-radius: var(--radius-md);
  border: 1px solid var(--border-medium); background: var(--bg-surface);
  font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--text-secondary);
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.stc2-iconbtn:hover { background: var(--bg-subtle); }
.stc2-iconbtn.is-ai:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-bg); }
.stc2-iconbtn.is-danger:hover { border-color: var(--color-danger); color: var(--color-danger-text); background: var(--color-danger-bg); }
.stc2-iconbtn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---- 合計フッター行 ---- */
.stc2-total {
  display: grid; grid-template-columns: 128px 210px 96px 118px 1fr 168px;
  gap: var(--space-3); align-items: center;
  border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4);
  background: var(--bg-nav); color: var(--text-inverse); box-shadow: var(--shadow-md);
}
.stc2-total-label { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: rgba(255,255,255,.85); }
.stc2-total .stc2-time-val, .stc2-total .stc2-reward { color: var(--text-inverse); }
.stc2-total .stc2-reward { font-size: var(--font-size-xl); }
.stc2-total .muted { color: rgba(255,255,255,.4); text-align: right; font-size: var(--font-size-sm); }

/* ---- ステータス／空状態 ---- */
.stc2-status { font-size: var(--font-size-sm); color: var(--color-success-dark); min-height: 18px; padding: 0 var(--space-1); }
.stc2-status.is-error { color: var(--color-danger-text); }
.stc2-empty {
  background: var(--bg-surface); border: 1px dashed var(--border-medium); border-radius: var(--radius-xl);
  padding: 52px var(--space-6); text-align: center; color: var(--text-tertiary);
}
.stc2-empty-icon { font-size: 40px; margin-bottom: var(--space-3); opacity: .55; }
.stc2-empty-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--text-secondary); margin-bottom: var(--space-1); }
.stc2-empty-sub { font-size: var(--font-size-sm); margin-bottom: var(--space-4); }
.stc2-empty-cta {
  height: 36px; padding: 0 var(--space-4); border: none; border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
  color: var(--text-inverse); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold);
  box-shadow: 0 4px 14px rgba(37,99,235,.32);
  transition: filter var(--transition-fast), transform var(--transition-fast);
}
.stc2-empty-cta:hover { filter: brightness(1.08); }
.stc2-empty-cta:active { transform: translateY(1px); }

/* ---- レスポンシブ ---- */
@media (max-width: 900px) {
  .stc2-hero-kpis { grid-template-columns: 1fr 1fr; }
  .stc2-listhead { display: none; }
  .stc2-row, .stc2-total { grid-template-columns: 1fr 1fr; row-gap: var(--space-2); }
  .stc2-desc { grid-column: 1 / -1; }
  .stc2-actions { opacity: 1; justify-content: flex-start; grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .stc2-hero-kpis { grid-template-columns: 1fr; }
}
@media (hover: none) {
  .stc2-actions { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .stc2-rise { animation: none; }
  .stc2-desc-pending { animation: none; }
}

/* ============================================
   統合カレンダー
   ============================================ */
.cal-host {
  min-height: 0;
  overflow: auto;
}

.cal-page {
  min-height: 100%;
  padding: var(--space-4);
  color: var(--text-primary);
  background: var(--bg-body);
  font-size: var(--font-size-md);
}

.cal-layout {
  display: grid;
  grid-template-columns: 284px minmax(0, 1fr);
  gap: var(--space-4);
  max-width: 1680px;
  margin: 0 auto;
  align-items: start;
}

.cal-side {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cal-panel,
.cal-card,
.cal-timeline-card {
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}

.cal-panel-head {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-muted);
}

.cal-panel-head h2 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

.cal-panel-head p {
  margin: var(--space-1) 0 0;
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.cal-layers {
  padding: var(--space-2) 0;
}

.cal-layer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px var(--space-4);
  cursor: pointer;
  transition: background var(--transition-normal), opacity var(--transition-normal);
}

.cal-layer:hover {
  background: var(--bg-muted);
}

.cal-layer-off {
  opacity: 0.42;
}

.cal-layer input {
  width: 15px;
  height: 15px;
  flex: none;
  accent-color: var(--color-primary);
}

.cal-swatch {
  width: 13px;
  height: 13px;
  flex: none;
  border-radius: var(--radius-md);
}

.cal-layer-words {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  line-height: var(--line-height-tight);
}

.cal-layer-name {
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
}

.cal-layer-description {
  overflow: hidden;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-layer-count {
  min-width: 30px;
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  color: var(--text-tertiary);
  background: var(--bg-subtle);
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--font-size-sm);
  text-align: center;
}

.cal-add-category {
  width: calc(100% - 32px);
  margin: 2px var(--space-4) var(--space-3);
  padding: var(--space-2);
  border: 1px dashed var(--border-medium);
  border-radius: var(--radius-xl);
  color: var(--text-tertiary);
  background: transparent;
  font: inherit;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

.cal-add-category:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.cal-legend {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
}

.cal-legend-row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.cal-legend-sample {
  display: inline-flex;
  width: 82px;
  height: 23px;
  flex: none;
  align-items: center;
  padding: 0 6px;
  border-left: 4px solid;
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

.cal-legend-fixed {
  border-color: var(--color-danger);
  color: var(--color-danger-text);
  background: var(--color-danger-bg);
}

.cal-legend-draft {
  border: 1px dashed var(--color-danger);
  border-left: 4px solid var(--color-danger);
  color: var(--color-danger-text);
  background: var(--color-danger-bg);
}

.cal-legend-auto {
  border-color: var(--color-primary);
  color: var(--color-primary-hover);
  background: var(--color-primary-bg);
}

.cal-queue-badge {
  margin-left: auto;
  padding: 1px 9px;
  border-radius: var(--radius-full);
  color: var(--text-inverse);
  background: var(--color-warning);
  font-size: var(--font-size-sm);
}

.cal-queue {
  max-height: 430px;
  overflow-y: auto;
}

.cal-queue-card {
  margin: 10px var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-warning-subtle);
  border-radius: var(--radius-xl);
  background: var(--color-warning-bg);
}

.cal-queue-title {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-primary);
  font-weight: var(--font-weight-bold);
}

.cal-queue-period {
  margin-top: var(--space-1);
  color: var(--text-secondary);
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}

.cal-queue-source {
  display: inline-flex;
  margin-top: 6px;
  padding: 2px 9px;
  border: 1px solid var(--color-warning-subtle);
  border-radius: var(--radius-full);
  color: var(--color-warning-text);
  background: var(--bg-surface);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.cal-queue-note {
  margin-top: var(--space-1);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.cal-queue-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--space-2);
}

.cal-main {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-3);
}

.cal-page-head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.cal-page-head > .btn {
  margin-left: auto;
}

.cal-title {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
}

.cal-subtitle {
  margin-top: var(--space-1);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.cal-alerts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.cal-alert-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid;
  border-radius: var(--radius-xl);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}

.cal-alert-current,
.cal-alert-clear {
  border-color: var(--border-default);
  color: var(--text-secondary);
  background: var(--bg-muted);
}

.cal-alert-po {
  border-color: var(--color-primary-subtle);
  color: var(--color-primary-hover);
  background: var(--color-primary-bg);
}

.cal-alert-pending {
  border-color: var(--color-warning-subtle);
  color: var(--color-warning-text);
  background: var(--color-warning-bg);
}

.cal-num {
  font-family: ui-monospace, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

.cal-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cal-month-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cal-nav-button {
  width: 34px;
  height: 34px;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-xl);
  color: var(--text-secondary);
  background: var(--bg-surface);
  font: inherit;
  font-size: var(--font-size-xl);
  cursor: pointer;
}

.cal-nav-button:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.cal-current-month {
  min-width: 126px;
  color: var(--text-primary);
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  text-align: center;
}

.cal-view-switch {
  display: inline-flex;
  gap: var(--space-1);
  margin-left: auto;
  padding: 3px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  background: var(--bg-subtle);
}

.cal-view-button {
  padding: 6px var(--space-4);
  border: 0;
  border-radius: var(--radius-full);
  color: var(--text-tertiary);
  background: transparent;
  font: inherit;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

.cal-view-button.cal-active {
  color: var(--text-primary);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}

.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-muted);
}

.cal-weekdays div {
  padding: 9px var(--space-3);
  color: var(--text-tertiary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
}

.cal-weekdays div:first-child {
  color: var(--color-danger-text);
}

.cal-weekdays div:last-child {
  color: var(--color-primary);
}

.cal-week {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-bottom: 1px solid var(--border-light);
}

.cal-week:last-child {
  border-bottom: 0;
}

.cal-day {
  position: relative;
  min-width: 0;
  padding: var(--space-2) 10px 6px;
  border: 0;
  border-right: 1px solid var(--border-light);
  color: var(--text-secondary);
  background: var(--bg-surface);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.cal-day:last-of-type {
  border-right: 0;
}

.cal-day:hover {
  background: var(--bg-muted);
}

.cal-day-out {
  color: var(--text-muted);
  background: var(--bg-muted);
}

.cal-day-sunday .cal-day-number,
.cal-day-holiday .cal-day-number {
  color: var(--color-danger-text);
}

.cal-day-saturday .cal-day-number {
  color: var(--color-primary);
}

.cal-day-number {
  color: inherit;
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

.cal-day-today {
  background: var(--color-primary-bg);
  box-shadow: inset 0 0 0 1px var(--color-primary-subtle);
}

.cal-day-today .cal-day-number {
  display: inline-flex;
  min-width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  color: var(--text-inverse);
  background: var(--color-primary);
}

.cal-today-label,
.cal-holiday-name {
  margin-left: 5px;
  color: var(--color-primary-hover);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

.cal-holiday-name {
  color: var(--color-danger-text);
}

.cal-bars {
  position: absolute;
  top: 39px;
  right: 0;
  left: 0;
  pointer-events: none;
}

.cal-event-bar,
.cal-timeline-bar {
  position: absolute;
  display: flex;
  height: 26px;
  min-width: 0;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  padding: 0 8px;
  border: 0;
  border-left: 4px solid;
  border-radius: var(--radius-lg);
  font: inherit;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
}

.cal-event-bar:hover,
.cal-timeline-bar:hover {
  filter: brightness(0.97);
  box-shadow: var(--shadow-md);
  z-index: 5;
}

.cal-event-draft {
  border: 1px dashed;
  border-left-width: 4px;
  border-left-style: solid;
}

.cal-event-icon {
  flex: none;
}

.cal-mall {
  display: inline-flex;
  flex: none;
  padding: 1px 5px;
  border-radius: var(--radius-md);
  color: var(--text-inverse);
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

.cal-mall-small {
  padding: 1px 4px;
  font-size: 9px;
}

.cal-timeline-card {
  display: none;
  padding: 18px var(--space-5) var(--space-6);
  overflow-x: auto;
}

.cal-timeline-title {
  color: var(--text-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

.cal-timeline-subtitle {
  margin: var(--space-1) 0 var(--space-3);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.cal-timeline-grid {
  min-width: 780px;
}

.cal-timeline-months {
  position: relative;
  height: 30px;
  margin-left: 150px;
  border-bottom: 2px solid var(--border-default);
}

.cal-timeline-month {
  position: absolute;
  top: 0;
  height: 30px;
  padding-left: var(--space-2);
  border-left: 2px solid var(--border-medium);
  color: var(--text-secondary);
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
}

.cal-timeline-row {
  display: flex;
  min-height: 74px;
  border-bottom: 1px dashed var(--border-light);
}

.cal-timeline-row:nth-child(odd) {
  background: var(--bg-muted);
}

.cal-timeline-two-lanes {
  min-height: 96px;
}

.cal-timeline-row-label {
  display: flex;
  width: 150px;
  flex: none;
  align-items: center;
  gap: 9px;
  padding-left: var(--space-1);
  color: var(--text-secondary);
  font-weight: var(--font-weight-bold);
}

.cal-timeline-lane {
  position: relative;
  min-width: 0;
  flex: 1;
}

.cal-timeline-vline,
.cal-timeline-today {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 2px solid var(--border-default);
}

.cal-timeline-today {
  z-index: 4;
  border-color: var(--color-danger);
}

.cal-timeline-today-label {
  position: absolute;
  top: -25px;
  padding: 2px 9px;
  transform: translateX(-50%);
  border-radius: var(--radius-full);
  color: var(--text-inverse);
  background: var(--color-danger);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

.cal-timeline-flag {
  position: absolute;
  top: 0;
  bottom: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.cal-flag-pole {
  position: absolute;
  top: 14px;
  bottom: 14px;
  border-left: 2px solid;
}

.cal-flag-label {
  position: absolute;
  padding: 3px 9px;
  transform: translateX(-50%);
  border: 1px solid;
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

.cal-flag-up .cal-flag-label {
  top: 6px;
}

.cal-flag-down .cal-flag-label {
  bottom: 6px;
}

.cal-timeline-bar {
  font-size: var(--font-size-sm);
}

.cal-timeline-out-label {
  position: absolute;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
  cursor: pointer;
}

.cal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal-backdrop);
  background: rgba(17, 24, 39, 0.32);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-slow);
}

.cal-overlay.cal-open {
  opacity: 1;
  pointer-events: auto;
}

.cal-drawer {
  position: fixed;
  top: 0;
  right: -430px;
  bottom: 0;
  z-index: var(--z-modal);
  display: flex;
  width: 410px;
  flex-direction: column;
  background: var(--bg-surface);
  box-shadow: var(--shadow-xl);
  transition: right var(--transition-slow);
}

.cal-drawer.cal-open {
  right: 0;
}

.cal-drawer-head {
  position: relative;
  padding: var(--space-5) 22px var(--space-4);
  border-bottom: 1px solid var(--border-light);
}

.cal-category-tag {
  display: inline-flex;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  color: var(--text-inverse);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}

.cal-drawer-head h3 {
  margin: 10px 40px 0 0;
  color: var(--text-primary);
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-normal);
}

.cal-drawer-period {
  margin-top: var(--space-1);
  color: var(--text-secondary);
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

.cal-drawer-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--radius-xl);
  color: var(--text-tertiary);
  background: var(--bg-subtle);
  cursor: pointer;
}

.cal-drawer-body {
  flex: 1;
  padding: 18px 22px;
  overflow-y: auto;
}

.cal-detail-section {
  margin-bottom: var(--space-5);
}

.cal-detail-section h4 {
  margin: 0 0 var(--space-2);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  letter-spacing: 0.07em;
}

.cal-detail-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 7px 0;
  border-bottom: 1px dashed var(--border-light);
}

.cal-detail-key {
  color: var(--text-tertiary);
}

.cal-detail-value {
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
  text-align: right;
}

.cal-state-pill {
  display: inline-flex;
  padding: 5px var(--space-3);
  border: 1px solid;
  border-radius: var(--radius-full);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
}

.cal-state-fixed {
  border-color: var(--color-success-subtle);
  color: var(--color-success-dark);
  background: var(--color-success-bg);
}

.cal-state-draft {
  border-color: var(--color-warning-subtle);
  color: var(--color-warning-text);
  background: var(--color-warning-bg);
}

.cal-state-auto {
  border-color: var(--color-primary-subtle);
  color: var(--color-primary-hover);
  background: var(--color-primary-bg);
}

.cal-impact-card {
  padding: var(--space-3);
  border: 1px solid var(--color-primary-subtle);
  border-radius: var(--radius-xl);
  color: var(--text-secondary);
  background: var(--color-primary-bg);
  line-height: var(--line-height-relaxed);
  white-space: pre-wrap;
}

.cal-drawer-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3) 22px;
  border-top: 1px solid var(--border-light);
}

.cal-delete-button {
  margin-left: auto;
}

.cal-toast {
  position: fixed;
  bottom: 26px;
  left: 50%;
  z-index: var(--z-toast);
  padding: var(--space-3) 22px;
  transform: translate(-50%, 90px);
  border-radius: var(--radius-xl);
  color: var(--text-inverse);
  background: var(--bg-nav);
  box-shadow: var(--shadow-xl);
  font-weight: var(--font-weight-semibold);
  transition: transform var(--transition-slow);
}

.cal-toast.cal-open {
  transform: translate(-50%, 0);
}

.cal-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: rgba(17, 24, 39, 0.45);
}

.cal-modal {
  width: min(560px, 100%);
  max-height: 90vh;
}

.cal-modal-title {
  margin: 0;
  font-size: var(--font-size-xl);
}

.cal-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  overflow-y: auto;
}

.cal-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.cal-color-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cal-form-field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-1);
}

.cal-form-label {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.cal-form-field input[type="color"] {
  min-height: 36px;
  padding: 3px;
}

.cal-loading,
.cal-error,
.cal-empty {
  padding: var(--space-4);
  color: var(--text-muted);
  text-align: center;
}

.cal-error {
  color: var(--color-danger-text);
  background: var(--color-danger-bg);
}

@media (max-width: 1100px) {
  .cal-layout {
    grid-template-columns: 230px minmax(0, 1fr);
  }
}

@media (max-width: 800px) {
  .cal-page {
    padding: var(--space-3);
  }

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

  .cal-side {
    position: static;
  }

  .cal-page-head,
  .cal-toolbar {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .cal-view-switch {
    margin-left: 0;
  }

  .cal-card {
    overflow-x: auto;
  }

  .cal-weekdays,
  .cal-weeks {
    min-width: 760px;
  }

  .cal-drawer {
    right: -100%;
    width: min(410px, 100%);
  }

  .cal-form-row,
  .cal-color-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 統合カレンダー: 日程修正提案 */
.cal-queue-section-title {
  margin: var(--space-3) var(--space-3) var(--space-1);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}

.cal-correction-card {
  border-left: 4px solid var(--color-primary);
  background: var(--color-primary-bg);
}

.cal-correction-dot {
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: var(--radius-full);
  background: var(--color-primary);
}

/* 確認待ちキューは幅の狭いサイドバーに入る（実測 約300px）。
   現在/提案を横2列に置くと1列あたりの幅が足りず、文字単位で折り返して読めなくなる。
   ⚠️ ビューポート幅のメディアクエリでは切り替わらない（狭いのはコンテナであってビューポートではない）。
   そのため項目ごとに1行へまとめ、入りきらないときは矢印の位置で折り返す。 */
.cal-correction-diff {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
}

.cal-correction-diff-row {
  display: grid;
  min-width: 0;
  grid-template-columns: 3.5em minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-2);
}

.cal-correction-diff-label {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}

.cal-correction-diff-values {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1);
  font-family: ui-monospace, Menlo, monospace;
  font-weight: var(--font-weight-semibold);
  /* ⚠️ overflow-wrap: anywhere を付けない。狭いときに文字単位で折り返す原因になる。 */
  overflow-wrap: break-word;
}

.cal-correction-diff-current {
  color: var(--text-muted);
}

.cal-correction-diff-arrow {
  color: var(--text-tertiary);
}

.cal-correction-diff-proposed {
  color: var(--color-primary-hover);
}

.cal-correction-diff-current.cal-correction-diff-changed {
  color: var(--color-danger-text);
  text-decoration: line-through;
}

.cal-correction-diff-proposed.cal-correction-diff-changed {
  color: var(--color-success-text);
  font-weight: var(--font-weight-bold);
}

.cal-correction-reason,
.cal-correction-stale {
  margin-top: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.cal-correction-stale {
  padding: 6px var(--space-2);
  border-radius: var(--radius-lg);
  color: var(--color-danger-text);
  background: var(--color-danger-bg);
  font-weight: var(--font-weight-semibold);
}

.cal-correction-evidence {
  display: inline-block;
  margin-top: var(--space-2);
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

/* ============================================
   在庫フライトビュー
   ============================================ */
.fv-host {
  --fv-mono: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
  min-width: 0;
  color: var(--text-primary);
  background: var(--bg-body);
}

.fv-page {
  flex: 1;
  min-width: 0;
  overflow: auto;
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
}

.fv-page *,
.fv-page *::before,
.fv-page *::after {
  box-sizing: border-box;
}

.fv-page button,
.fv-page input {
  font: inherit;
}

.fv-wrap {
  display: grid;
  grid-template-columns: 292px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  width: 100%;
  max-width: 1660px;
  min-width: 0;
  margin: 0 auto;
  padding: 18px 20px 40px;
}

.fv-num {
  font-family: var(--fv-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.fv-fleet {
  position: sticky;
  top: 18px;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  background: var(--bg-surface);
  animation: fv-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.fv-fleet-head {
  padding: 13px 14px 11px;
  border-bottom: 1px solid var(--border-default);
  background: linear-gradient(180deg, #fdfefe, #f7f9fc);
}

.fv-fleet-head h2 {
  display: flex;
  gap: 7px;
  align-items: center;
  margin: 0;
  font-size: 13px;
  font-weight: 700;
}

.fv-tower {
  font-size: 15px;
}

.fv-fleet-head p {
  margin: 3px 0 0;
  color: var(--text-tertiary);
  font-size: 11px;
}

.fv-search {
  width: 100%;
  height: 32px;
  margin-top: 10px;
  padding: 0 10px;
  border: 1px solid var(--border-medium);
  border-radius: 7px;
  outline: none;
  color: var(--text-primary);
  background: #fff;
  font-size: 11px;
}

.fv-unit-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  margin-top: 10px;
  padding: 3px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--bg-subtle);
}

.fv-unit-button {
  min-height: 27px;
  border: 0;
  border-radius: 6px;
  color: var(--text-tertiary);
  background: transparent;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
}

.fv-unit-button.fv-is-on {
  color: var(--color-primary-hover);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}

.fv-search:focus {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}

.fv-search::placeholder {
  color: var(--text-muted);
}

.fv-fleet-controls {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 8px;
}

.fv-sort-button,
.fv-refresh-button {
  min-height: 25px;
  padding: 3px 9px;
  border: 1px solid var(--border-medium);
  border-radius: 999px;
  color: var(--text-secondary);
  background: #fff;
  font-size: 10.5px;
  cursor: pointer;
}

.fv-sort-button:hover,
.fv-refresh-button:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.fv-sort-button.fv-is-on {
  border-color: var(--color-primary);
  color: #fff;
  background: var(--color-primary);
  font-weight: 600;
}

.fv-refresh-button {
  margin-left: auto;
}

.fv-refresh-button:disabled {
  cursor: wait;
  opacity: 0.65;
}

.fv-fleet-count {
  margin-top: 7px;
  color: var(--text-muted);
  font-size: 10px;
  text-align: right;
}

.fv-fleet-list {
  max-height: calc(100vh - 245px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.fv-sku-card {
  position: relative;
  display: block;
  width: 100%;
  padding: 11px 14px 12px;
  border: 0;
  border-bottom: 1px solid var(--bg-subtle);
  border-radius: 0;
  color: inherit;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
  animation: fv-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.fv-sku-card:hover {
  background: var(--bg-muted);
}

.fv-sku-card:focus-visible {
  z-index: 1;
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.fv-sku-card.fv-is-active {
  background: var(--color-primary-bg);
}

.fv-sku-card.fv-is-active::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--color-primary);
  content: "";
}

.fv-sku-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.fv-sku-card-code {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-family: var(--fv-mono);
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fv-sku-card-name {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  color: var(--text-tertiary);
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fv-chip {
  flex: none;
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.fv-chip-stack {
  display: inline-flex;
  flex: none;
  gap: 4px;
  align-items: center;
  margin-left: auto;
}

.fv-chip-stack .fv-chip {
  margin-left: 0;
}

.fv-chip-unavoidable {
  border: 1px solid #fca5a5;
  color: var(--color-danger-text);
  background: var(--color-danger-bg);
}

.fv-chip-order {
  color: var(--color-danger-text);
  background: var(--color-danger-subtle);
}

.fv-chip-batch {
  color: var(--color-primary-hover);
  background: var(--color-primary-subtle);
}

.fv-chip-next {
  color: var(--text-tertiary);
  background: var(--bg-subtle);
}

.fv-chip-watch {
  color: var(--color-success-text);
  background: var(--color-success-subtle);
}

.fv-chip-insufficient {
  color: var(--color-warning-text);
  background: var(--color-warning-subtle);
}

.fv-runway {
  display: block;
  margin-top: 8px;
}

.fv-runway-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 3px;
  color: var(--text-muted);
  font-size: 10px;
}

.fv-runway-label .fv-num {
  font-size: 10.5px;
}

.fv-runway-bar {
  position: relative;
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--bg-subtle);
}

.fv-runway-fill {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  border-radius: 3px;
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.fv-runway-ok {
  background: linear-gradient(90deg, #34d399, #22c55e);
}

.fv-runway-warn {
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
}

.fv-runway-critical {
  background: linear-gradient(90deg, #f87171, #ef4444);
}

.fv-runway-unknown {
  background: repeating-linear-gradient(45deg, #fcd34d 0 6px, #fde68a 6px 12px);
}

.fv-fleet-loading {
  padding: 11px 14px;
}

.fv-skeleton {
  height: 72px;
  margin-bottom: 9px;
  border-radius: 8px;
  background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 40%, #f3f4f6 60%);
  background-size: 300% 100%;
  animation: fv-shimmer 1.25s infinite;
}

.fv-fleet-empty,
.fv-error {
  padding: 24px 16px;
  color: var(--text-tertiary);
  font-size: 11px;
  line-height: 1.6;
  text-align: center;
}

.fv-fleet-sentinel {
  padding: 12px;
  color: var(--text-muted);
  background: var(--bg-muted);
  font-size: 10px;
  text-align: center;
}

.fv-error {
  color: var(--color-danger-text);
}

.fv-error strong,
.fv-error p {
  display: block;
  margin: 0 0 8px;
}

.fv-error-retry {
  padding: 6px 12px;
  border: 1px solid var(--border-medium);
  border-radius: 7px;
  color: var(--text-secondary);
  background: #fff;
  font-size: 11px;
  cursor: pointer;
}

.fv-main {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 14px;
}

.fv-page-head {
  display: flex;
  gap: 14px;
  align-items: flex-end;
  animation: fv-rise 0.5s 0.05s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.fv-page-head h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.fv-page-subtitle {
  display: block;
  margin-top: 3px;
  color: var(--text-tertiary);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.fv-generated {
  display: block;
  margin-top: 3px;
  color: var(--text-muted);
  font-family: var(--fv-mono);
  font-size: 9.5px;
  font-weight: 400;
}

.fv-sku-title {
  min-width: 210px;
  margin-left: auto;
  text-align: right;
}

.fv-sku-code {
  overflow: hidden;
  font-family: var(--fv-mono);
  font-size: 17px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fv-sku-name {
  margin-top: 2px;
  color: var(--text-tertiary);
  font-size: 11.5px;
}

.fv-data-warning {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-end;
  margin-top: 5px;
}

.fv-warning-pill {
  padding: 2px 7px;
  border: 1px solid #fcd34d;
  border-radius: 999px;
  color: var(--color-warning-text);
  background: var(--color-warning-bg);
  font-size: 9.5px;
  font-weight: 600;
}

.fv-stockout-warning {
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 10px 14px;
  border: 1px solid #fca5a5;
  border-radius: 10px;
  color: var(--color-danger-text);
  background: repeating-linear-gradient(
    135deg,
    var(--color-danger-bg) 0 10px,
    #fff 10px 20px
  );
  font-size: 12px;
  line-height: 1.5;
}

.fv-stockout-warning[hidden] {
  display: none;
}

.fv-stockout-warning-icon {
  flex: none;
  font-size: 17px;
}

.fv-stockout-warning strong {
  flex: none;
}

.fv-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
  animation: fv-rise 0.5s 0.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.fv-missed-constraints {
  display: grid;
  gap: 6px;
}

.fv-missed-constraints[hidden] {
  display: none;
}

.fv-missed-constraint {
  padding: 8px 12px;
  border: 1px solid #fcd34d;
  border-radius: 8px;
  color: var(--color-warning-text);
  background: var(--color-warning-bg);
  font-size: 11.5px;
  font-weight: 600;
}

.fv-kpi {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: 11px 14px 12px;
  border: 1px solid var(--border-default);
  border-radius: 10px;
  background: var(--bg-surface);
}

.fv-kpi-label {
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 500;
}

.fv-kpi-value {
  overflow: hidden;
  margin-top: 3px;
  font-size: 21px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fv-kpi-value small {
  margin-left: 3px;
  color: var(--text-muted);
  font-family: var(--font-family);
  font-size: 11.5px;
  font-weight: 500;
}

.fv-kpi-value.fv-kpi-immediate {
  color: var(--color-danger-text);
  font-family: var(--font-family);
  font-size: 14px;
  white-space: normal;
}

.fv-kpi-description {
  overflow: hidden;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fv-kpi-hot {
  border-color: #fca5a5;
  background: linear-gradient(180deg, #fff, var(--color-danger-bg));
}

.fv-kpi-hot .fv-kpi-value {
  color: var(--color-danger-text);
}

.fv-kpi-hot::after {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-danger);
  content: "";
  animation: fv-pulse 1.6s ease-out infinite;
}

.fv-detail-loading,
.fv-detail-error {
  grid-column: 1 / -1;
  min-height: 86px;
  padding: 28px;
  border: 1px solid var(--border-default);
  border-radius: 10px;
  color: var(--text-tertiary);
  background: var(--bg-surface);
  text-align: center;
}

.fv-detail-loading {
  background: linear-gradient(90deg, #fff 25%, var(--bg-muted) 50%, #fff 75%);
  background-size: 300% 100%;
  animation: fv-shimmer 1.25s infinite;
}

.fv-detail-error {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  color: var(--color-danger-text);
}

.fv-chart-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: 14px;
  background: var(--bg-surface);
  animation: fv-rise 0.55s 0.15s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.fv-chart-head {
  display: flex;
  gap: 14px;
  align-items: center;
  min-width: 0;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--bg-subtle);
}

.fv-chart-head h3 {
  display: flex;
  gap: 8px;
  align-items: center;
  flex: none;
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}

.fv-chart-horizon {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 400;
}

.fv-legend {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-left: 8px;
}

.fv-legend > span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: var(--text-tertiary);
  font-size: 11px;
  white-space: nowrap;
}

.fv-lg {
  width: 18px;
  height: 0;
  border-top: 3px solid;
  border-radius: 2px;
}

.fv-lg-a {
  border-color: var(--color-danger);
}

.fv-lg-b {
  border-color: var(--color-primary);
}

.fv-lg-c {
  border-color: #7c3aed;
}

.fv-lg-ghost {
  border-color: var(--text-muted);
  border-top-style: dashed;
}

.fv-scenario-toggle {
  position: relative;
  display: inline-flex;
  flex: none;
  margin-left: auto;
  padding: 3px;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  background: var(--bg-subtle);
}

.fv-toggle-button {
  position: relative;
  z-index: 1;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 6px 15px;
  border: 0;
  border-radius: 999px;
  color: var(--text-tertiary);
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.25s;
}

.fv-toggle-button-wrap {
  display: inline-flex;
}

.fv-scenario-toggle[data-mode="A"] .fv-toggle-button[data-mode="A"],
.fv-scenario-toggle[data-mode="B"] .fv-toggle-button[data-mode="B"],
.fv-scenario-toggle[data-mode="C"] .fv-toggle-button[data-mode="C"] {
  color: var(--text-primary);
  background: #fff;
  box-shadow: 0 1px 4px rgba(17, 24, 39, 0.16);
}

.fv-toggle-button:disabled {
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: 0.52;
}

.fv-toggle-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.fv-toggle-dot-a {
  background: var(--color-danger);
}

.fv-toggle-dot-b {
  background: var(--color-primary);
}

.fv-toggle-dot-c {
  background: #7c3aed;
}

.fv-scenario-note {
  flex: none;
  color: var(--text-muted);
  font-size: 10.5px;
  white-space: nowrap;
}

.fv-ghost-check {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  flex: none;
  color: var(--text-tertiary);
  font-size: 11.5px;
  cursor: pointer;
  user-select: none;
}

.fv-ghost-check input {
  accent-color: var(--color-primary);
}

.fv-chart-body {
  position: relative;
  min-width: 0;
  padding: 6px 8px 2px;
}

.fv-chart {
  display: block;
  width: 100%;
  height: 430px;
}

.fv-axis-label {
  fill: var(--text-muted);
  font-family: var(--fv-mono);
  font-size: 10px;
}

.fv-band-label {
  font-size: 10px;
  font-weight: 600;
}

.fv-stockout-band-label {
  font-size: 10px;
  font-weight: 700;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, 0.92);
  stroke-width: 3px;
}

.fv-annotation-label,
.fv-arrival-label,
.fv-margin-label {
  font-size: 10.5px;
  font-weight: 700;
}

.fv-arrival-label,
.fv-margin-label {
  paint-order: stroke;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 3px;
}

.fv-svg-badge-text {
  font-size: 11px;
  font-weight: 700;
}

.fv-plane-marker {
  font-size: 17px;
}

.fv-svg-empty {
  fill: var(--text-muted);
  font-size: 13px;
}

.fv-hover-target {
  cursor: crosshair;
}

.fv-tooltip {
  position: absolute;
  z-index: 5;
  min-width: 160px;
  padding: 9px 12px;
  border-radius: 9px;
  opacity: 0;
  color: #f9fafb;
  background: rgba(17, 24, 39, 0.94);
  box-shadow: 0 6px 20px rgba(17, 24, 39, 0.25);
  font-size: 11.5px;
  line-height: 1.55;
  pointer-events: none;
  transform: translate(-50%, -110%);
  transition: opacity 0.12s;
}

.fv-tooltip.fv-is-visible {
  opacity: 1;
}

.fv-tooltip-date {
  font-size: 12px;
  font-weight: 700;
}

.fv-tooltip-row {
  display: flex;
  gap: 14px;
  justify-content: space-between;
}

.fv-tooltip-row .fv-num {
  font-weight: 600;
}

.fv-tooltip-ghost {
  opacity: 0.65;
}

.fv-tooltip-event {
  margin-top: 2px;
  color: #fcd34d;
  font-size: 10.5px;
}

.fv-tooltip-stockout {
  margin-top: 2px;
  color: #fecaca;
  font-size: 10.5px;
  font-weight: 700;
}

.fv-verdict {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 0 18px 14px;
  padding: 11px 16px;
  border: 1px solid;
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.5;
  transition: background 0.3s, border-color 0.3s;
}

.fv-verdict strong {
  margin-right: 3px;
  font-weight: 700;
}

.fv-verdict-icon {
  flex: none;
  font-size: 17px;
}

.fv-verdict-a {
  border-color: #fca5a5;
  color: var(--color-danger-text);
  background: var(--color-danger-bg);
}

.fv-verdict-b {
  border-color: #86efac;
  color: var(--color-success-text);
  background: var(--color-success-bg);
}

.fv-verdict-c {
  border-color: #c4b5fd;
  color: #5b21b6;
  background: #f5f3ff;
}

.fv-verdict-consult {
  border-color: #fcd34d;
  color: var(--color-warning-text);
  background: var(--color-warning-bg);
}

.fv-verdict-neutral {
  border-color: var(--border-default);
  color: var(--text-tertiary);
  background: var(--bg-muted);
}

.fv-lower {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 14px;
  min-width: 0;
  animation: fv-rise 0.55s 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.fv-panel {
  min-width: 0;
  padding: 15px 18px 16px;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  background: var(--bg-surface);
}

.fv-panel h4 {
  display: flex;
  gap: 7px;
  align-items: center;
  margin: 0 0 11px;
  font-size: 12.5px;
  font-weight: 700;
}

.fv-ai-badge {
  padding: 2px 7px;
  border-radius: 4px;
  color: #fff;
  background: var(--bg-nav);
  font-size: 9.5px;
  letter-spacing: 0.1em;
}

.fv-trace-note {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 400;
  text-align: right;
}

.fv-trace {
  max-height: 330px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.fv-trace li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  min-width: 0;
  padding: 7px 0;
  border-bottom: 1px dashed var(--bg-subtle);
  color: var(--text-secondary);
  font-size: 12px;
}

.fv-trace li:last-child {
  border-bottom: 0;
}

.fv-trace-number {
  min-width: 20px;
  color: var(--text-muted);
  font-family: var(--fv-mono);
  font-size: 10px;
  text-align: right;
}

.fv-trace-label {
  min-width: 0;
}

.fv-trace-value {
  max-width: 58%;
  margin-left: auto;
  overflow-wrap: anywhere;
  font-weight: 600;
  text-align: right;
}

.fv-trace-value.fv-is-high {
  color: var(--color-danger-text);
}

.fv-trace-summary {
  padding: 9px 12px !important;
  border-bottom: 0 !important;
  border-radius: 8px;
  color: var(--text-primary) !important;
  background: var(--color-primary-bg);
  font-weight: 600;
}

.fv-trace-summary .fv-trace-value {
  color: var(--color-primary-hover);
  font-size: 12px;
}

.fv-product-note {
  display: block !important;
  padding: 9px 11px !important;
  border: 1px solid var(--color-primary-subtle);
  border-radius: 7px;
  color: var(--color-primary-hover) !important;
  background: var(--color-primary-bg);
  font-weight: 700;
}

.fv-product-components {
  display: block !important;
}

.fv-component-table-wrap {
  max-height: 275px;
  overflow: auto;
  border: 1px solid var(--border-default);
  border-radius: 8px;
}

.fv-component-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10.5px;
}

.fv-component-table th,
.fv-component-table td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--border-light);
  text-align: left;
  white-space: nowrap;
}

.fv-component-table th {
  position: sticky;
  top: 0;
  color: var(--text-tertiary);
  background: var(--bg-muted);
  font-weight: 700;
}

.fv-component-table tr.fv-is-shortest td {
  color: var(--color-danger-text);
  background: var(--color-danger-bg);
  font-weight: 700;
}

.fv-component-stockout-badge {
  display: inline-flex;
  padding: 2px 6px;
  border-radius: 999px;
  color: var(--color-danger-text);
  background: var(--color-danger-bg);
  font-size: 9.5px;
  font-weight: 700;
}

.fv-component-stockout-none {
  color: var(--text-tertiary);
}

.fv-lt-bar {
  display: flex;
  min-height: 34px;
  margin-top: 4px;
  overflow: hidden;
  border-radius: 8px;
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.fv-lt-segment {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 0 6px;
  overflow: hidden;
  white-space: nowrap;
}

.fv-lt-production {
  background: linear-gradient(180deg, #60a5fa, #3b82f6);
}

.fv-lt-transit {
  background: linear-gradient(180deg, #34d399, #059669);
}

.fv-lt-unavailable {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  color: var(--color-warning-text);
  background: var(--color-warning-subtle);
  text-shadow: none;
}

.fv-product-arrivals {
  display: grid;
  width: 100%;
  max-height: 150px;
  overflow-y: auto;
  color: var(--text-primary);
  background: var(--bg-surface);
  text-shadow: none;
}

.fv-product-arrival {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border-light);
  font-family: var(--fv-mono);
  font-size: 10.5px;
}

.fv-lt-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  color: var(--text-muted);
  font-size: 10px;
}

.fv-lt-note {
  margin-top: 9px;
  color: var(--text-tertiary);
  font-size: 11px;
  line-height: 1.7;
}

.fv-uncertain-lots {
  display: flex;
  gap: 7px;
  align-items: center;
  margin-top: 12px;
  padding: 8px 10px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  color: var(--color-success-text);
  background: var(--color-success-bg);
  font-size: 11px;
  font-weight: 600;
}

.fv-uncertain-lots.fv-has-uncertain {
  border-color: #fcd34d;
  color: var(--color-warning-text);
  background: var(--color-warning-bg);
}

.fv-uncertain-icon {
  flex: none;
}

.fv-draft-bar {
  display: flex;
  gap: 22px;
  align-items: center;
  min-width: 0;
  padding: 14px 20px;
  border-radius: 13px;
  color: #e2e8f0;
  background: linear-gradient(90deg, #0f172a, #1e293b 60%, #1e3a5f);
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.28);
  animation: fv-rise 0.55s 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.fv-draft-plane {
  flex: none;
  font-size: 22px;
}

.fv-draft-title {
  flex: none;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.fv-draft-title small {
  display: block;
  margin-top: 2px;
  color: #94a3b8;
  font-size: 10.5px;
  font-weight: 400;
}

.fv-draft-stats {
  display: flex;
  gap: 22px;
  min-width: 0;
  margin-left: 4px;
}

.fv-draft-stat {
  min-width: 58px;
  text-align: center;
}

.fv-draft-value {
  overflow: hidden;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fv-draft-value small {
  color: #94a3b8;
  font-family: var(--font-family);
  font-size: 10px;
}

.fv-draft-label {
  margin-top: 1px;
  color: #94a3b8;
  font-size: 10px;
}

.fv-draft-note {
  max-width: 180px;
  margin-left: auto;
  color: #94a3b8;
  font-size: 10.5px;
  line-height: 1.5;
}

.fv-draft-cta {
  flex: none;
  padding: 10px 18px;
  border: 0;
  border-radius: 9px;
  color: #cbd5e1;
  background: #475569;
  font-size: 12px;
  font-weight: 700;
}

.fv-draft-cta:disabled {
  cursor: not-allowed;
  opacity: 0.82;
}

.fv-scope-toggle {
  flex: none;
  align-self: center;
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  color: var(--text-secondary);
  background: var(--bg-surface);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  cursor: pointer;
}

.fv-scope-toggle:hover,
.fv-scope-toggle:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-primary-hover);
}

.fv-scope-toggle:focus-visible,
.fv-scope-button:focus-visible,
.fv-scope-checkbox:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.fv-scope-toggle-on {
  border-color: var(--color-primary-subtle);
  color: var(--color-primary-hover);
  background: var(--color-primary-bg);
}

.fv-scope-panel {
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  animation: fv-rise 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.fv-scope-panel[hidden] {
  display: none;
}

.fv-scope-loading,
.fv-scope-load-error {
  padding: var(--space-6);
  color: var(--text-tertiary);
  font-size: var(--font-size-md);
  text-align: center;
}

.fv-scope-load-error {
  color: var(--color-danger-text);
}

.fv-scope-load-error strong,
.fv-scope-load-error p {
  display: block;
  margin-bottom: var(--space-3);
}

.fv-scope-card-head {
  padding: 14px var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--border-default);
}

.fv-scope-card-head h2 {
  margin: 0 0 6px;
  font-size: var(--font-size-xl);
}

.fv-scope-card-head p {
  margin: 0;
  color: var(--text-tertiary);
  font-size: 12.5px;
  line-height: var(--line-height-relaxed);
}

.fv-scope-card-head p + p {
  font-weight: var(--font-weight-semibold);
}

.fv-scope-card-body {
  padding: 14px var(--space-4);
}

.fv-scope-note {
  padding: 9px var(--space-3);
  border: 1px solid var(--color-primary-subtle);
  border-radius: var(--radius-lg);
  color: var(--color-primary-active);
  background: var(--color-primary-bg);
  font-size: 12.5px;
  line-height: var(--line-height-relaxed);
}

.fv-scope-note strong,
.fv-scope-note span {
  display: block;
}

.fv-scope-presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin: 14px 0 var(--space-3);
}

.fv-scope-presets-label {
  margin-right: 2px;
  color: var(--text-tertiary);
  font-size: var(--font-size-base);
}

.fv-scope-button {
  min-height: 30px;
  padding: 5px var(--space-3);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  color: var(--text-secondary);
  background: var(--bg-surface);
  font-size: 12.5px;
  white-space: nowrap;
  cursor: pointer;
}

.fv-scope-button:hover:not(:disabled) {
  background: var(--bg-subtle);
}

.fv-scope-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.fv-scope-button-primary {
  border-color: var(--color-primary);
  color: var(--text-inverse);
  background: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

.fv-scope-button-primary:hover:not(:disabled) {
  border-color: var(--color-primary-hover);
  background: var(--color-primary-hover);
}

.fv-scope-table-wrap {
  max-height: 560px;
  overflow: auto;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
}

.fv-scope-table {
  width: 100%;
  border-collapse: collapse;
}

.fv-scope-table th,
.fv-scope-table td {
  padding: var(--space-2) 10px;
  border-bottom: 1px solid var(--border-default);
  text-align: left;
  vertical-align: middle;
}

.fv-scope-table thead th {
  position: sticky;
  z-index: 1;
  top: 0;
  color: var(--text-secondary);
  background: var(--bg-muted);
  font-size: 11.5px;
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.fv-scope-table thead th:first-child {
  min-width: 210px;
}

.fv-scope-table thead th:nth-child(5) {
  min-width: 205px;
}

.fv-scope-table tbody tr:last-child td {
  border-bottom: 0;
}

.fv-scope-event-row {
  background: var(--bg-surface);
}

.fv-scope-center {
  width: 125px;
  text-align: center !important;
}

.fv-scope-mall-row td {
  color: var(--text-secondary);
  background: var(--bg-subtle);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
}

.fv-scope-event-off .fv-scope-event,
.fv-scope-event-off .fv-scope-count {
  color: var(--text-muted);
}

.fv-scope-event {
  color: var(--text-primary);
}

.fv-scope-event-name {
  font-size: 12.5px;
  font-weight: var(--font-weight-semibold);
}

.fv-scope-event-meta {
  margin-top: 2px;
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.fv-scope-checkbox {
  width: 15px;
  height: 15px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.fv-scope-checkbox:disabled {
  cursor: not-allowed;
}

.fv-scope-count {
  color: var(--text-tertiary);
  font-size: 11.5px;
  white-space: nowrap;
}

.fv-scope-status {
  display: inline-block;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: 10.5px;
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.fv-scope-status-unconfigured,
.fv-scope-status-calendar {
  color: var(--color-warning-text);
  background: var(--color-warning-subtle);
}

.fv-scope-status-registered {
  color: var(--color-success-text);
  background: var(--color-success-subtle);
}

.fv-scope-preview-wrap {
  padding: 14px var(--space-4);
  border-top: 1px solid var(--border-default);
  background: var(--bg-muted);
}

.fv-scope-preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-3);
}

.fv-scope-gauge {
  min-width: 0;
}

.fv-scope-gauge-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: 6px;
}

.fv-scope-gauge-key {
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}

.fv-scope-gauge-value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

.fv-scope-gauge-bar {
  height: 10px;
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--bg-subtle);
}

.fv-scope-gauge-fill {
  display: block;
  height: 100%;
  transition: width var(--transition-slow), background var(--transition-slow);
}

.fv-scope-gauge-ok {
  background: var(--color-success);
}

.fv-scope-gauge-warn {
  background: var(--color-warning);
}

.fv-scope-gauge-danger {
  background: var(--color-danger);
}

.fv-scope-hint {
  margin: 6px 0 0;
  color: var(--text-tertiary);
  font-size: 11.5px;
  line-height: var(--line-height-relaxed);
}

.fv-scope-effect {
  min-width: 0;
}

.fv-scope-alert {
  padding: 9px var(--space-3);
  border: 1px solid;
  border-radius: var(--radius-lg);
  font-size: 12.5px;
  line-height: var(--line-height-relaxed);
}

.fv-scope-alert-ok {
  border-color: var(--color-success-subtle);
  color: var(--color-success-text);
  background: var(--color-success-bg);
}

.fv-scope-alert-warn {
  border-color: var(--color-warning-subtle);
  color: var(--color-warning-text);
  background: var(--color-warning-bg);
}

.fv-scope-alert-danger {
  border-color: var(--color-danger-subtle);
  color: var(--color-danger-text);
  background: var(--color-danger-bg);
}

.fv-scope-message {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  margin: var(--space-3) var(--space-4) 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid;
  border-radius: var(--radius-lg);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
}

.fv-scope-message span {
  flex: 1;
}

.fv-scope-message-success {
  border-color: var(--color-success-subtle);
  color: var(--color-success-text);
  background: var(--color-success-bg);
}

.fv-scope-message-conflict {
  border-color: var(--color-warning-subtle);
  color: var(--color-warning-text);
  background: var(--color-warning-bg);
}

.fv-scope-message-error {
  border-color: var(--color-danger-subtle);
  color: var(--color-danger-text);
  background: var(--color-danger-bg);
}

.fv-scope-message-placeholder {
  display: none;
}

.fv-scope-footer {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border-default);
  background: var(--bg-muted);
}

.fv-scope-new-sale-note {
  flex: 1;
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
}

.fv-scope-footer-actions {
  display: flex;
  flex: none;
  gap: var(--space-2);
  align-items: center;
}

.fv-scope-readonly,
.fv-scope-unsaved {
  color: var(--text-tertiary);
  font-size: 11.5px;
}

.fv-scope-unsaved {
  color: var(--color-warning-text);
  font-weight: var(--font-weight-semibold);
}

@keyframes fv-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fv-shimmer {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: 0 0;
  }
}

@keyframes fv-pulse {
  from {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.45);
  }
  to {
    box-shadow: 0 0 0 12px rgba(239, 68, 68, 0);
  }
}

@media (max-width: 1320px) {
  .fv-wrap {
    grid-template-columns: 260px minmax(0, 1fr);
    padding-right: 14px;
    padding-left: 14px;
  }

  .fv-chart-head {
    flex-wrap: wrap;
  }

  .fv-scenario-toggle {
    margin-left: 0;
  }

  .fv-ghost-check {
    margin-left: auto;
  }

  .fv-draft-bar {
    flex-wrap: wrap;
  }

  .fv-draft-note {
    margin-left: 0;
  }

  .fv-draft-cta {
    margin-left: auto;
  }
}

@media (max-width: 1050px) {
  .fv-wrap {
    grid-template-columns: 1fr;
  }

  .fv-fleet {
    position: static;
  }

  .fv-fleet-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: 320px;
  }

  .fv-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .fv-lower {
    grid-template-columns: 1fr;
  }

  .fv-scope-preview {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .fv-wrap {
    padding: 12px 10px 28px;
  }

  .fv-page-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .fv-sku-title {
    min-width: 0;
    margin-left: 0;
    text-align: left;
  }

  .fv-data-warning {
    justify-content: flex-start;
  }

  .fv-scope-toggle {
    align-self: stretch;
  }

  .fv-scope-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .fv-scope-footer-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .fv-scope-unsaved {
    flex-basis: 100%;
    text-align: right;
  }

  .fv-fleet-list,
  .fv-kpis {
    grid-template-columns: 1fr;
  }

  .fv-chart-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .fv-legend {
    flex-wrap: wrap;
    margin-left: 0;
  }

  .fv-ghost-check {
    margin-left: 0;
  }

  .fv-chart {
    min-width: 760px;
  }

  .fv-chart-body {
    overflow-x: auto;
  }

  .fv-detail-error {
    align-items: stretch;
    flex-direction: column;
  }

  .fv-draft-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(80px, 1fr));
    width: 100%;
  }

  .fv-draft-note {
    max-width: none;
  }
}

/* ===== 在庫フライトビュー: 倉庫ごと（複数倉庫 #9・D-8） ===== */
.fv-wh-seg {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
}

.fv-wh-seg-label {
  margin-right: 4px;
  color: var(--text-tertiary);
  font-size: 11px;
}

.fv-wh-seg-note {
  color: var(--text-muted);
  font-size: 11px;
}

.fv-wh-seg-note.fv-is-error {
  color: var(--color-danger-text);
}

.fv-wh-button {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 5px 12px;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-full);
  color: var(--text-primary);
  background: var(--bg-surface);
  font-size: 11.5px;
  cursor: pointer;
}

.fv-wh-button.fv-is-on {
  border-color: var(--color-primary);
  color: var(--text-inverse);
  background: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

.fv-wh-button.fv-is-na,
.fv-wh-button:disabled {
  color: var(--text-muted);
  cursor: not-allowed;
}

.fv-wh-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  font-size: 9.5px;
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.fv-wh-badge-syag {
  color: var(--color-progress-text);
  background: var(--color-progress-subtle);
}

.fv-wh-badge-rsl {
  color: var(--color-danger-text);
  background: var(--color-danger-subtle);
}

.fv-wh-badge-fba {
  color: var(--color-warning-text);
  background: var(--color-warning-subtle);
}

.fv-wh-badge-us {
  color: var(--color-info);
  background: var(--color-info-bg);
}

.fv-wh-badge-none {
  color: var(--text-secondary);
  background: var(--bg-subtle);
}

.fv-wh-panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  background: var(--bg-surface);
}

.fv-wh-panel[hidden],
.fv-wh-lower[hidden],
.fv-wh-chart-note[hidden] {
  display: none;
}

.fv-wh-title {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 0;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-light);
  font-size: 14px;
}

.fv-wh-title small {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: var(--font-weight-normal);
}

.fv-wh-table-wrap {
  overflow-x: auto;
}

.fv-wh-table {
  width: 100%;
  border-collapse: collapse;
}

.fv-wh-table th {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-default);
  color: var(--text-secondary);
  background: var(--bg-muted);
  font-size: 11px;
  text-align: right;
  white-space: nowrap;
}

.fv-wh-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-light);
  font-size: 12px;
  text-align: right;
  white-space: nowrap;
}

.fv-wh-table th.fv-l,
.fv-wh-table td.fv-l {
  text-align: left;
}

.fv-wh-row-product td {
  font-weight: var(--font-weight-bold);
}

.fv-wh-row-warehouse td {
  background: var(--bg-muted);
  cursor: pointer;
}

.fv-wh-row-warehouse td:first-child {
  padding-left: 26px;
}

.fv-wh-row-warehouse.fv-is-na td {
  cursor: default;
}

.fv-wh-row-sku td {
  color: var(--text-secondary);
  background: var(--bg-surface);
  font-size: 11px;
}

.fv-wh-row-sku td:first-child {
  padding-left: 52px;
}

.fv-wh-row-sku[hidden] {
  display: none;
}

.fv-wh-sku {
  font-family: var(--fv-mono);
  font-size: 10.5px !important;
}

.fv-wh-arrow {
  display: inline-block;
  width: 12px;
  color: var(--text-tertiary);
  font-size: 9px;
}

.fv-wh-arrow.fv-is-blank {
  visibility: hidden;
}

.fv-wh-hot {
  color: var(--color-danger);
  font-weight: var(--font-weight-bold);
}

.fv-muted {
  color: var(--text-muted);
  font-weight: var(--font-weight-normal);
}

.fv-uncertain {
  color: var(--color-warning-text);
  font-size: 10.5px;
  font-weight: var(--font-weight-bold);
}

.fv-unobserved {
  color: var(--color-danger);
  font-size: 10.5px;
  font-weight: var(--font-weight-bold);
}

.fv-obs {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--color-warning-subtle);
  border-radius: var(--radius-full);
  color: var(--color-warning-text);
  background: var(--color-warning-bg);
  font-size: 9.5px;
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.fv-obs-ok {
  border-color: var(--color-success-subtle);
  color: var(--color-success-text);
  background: var(--color-success-bg);
}

.fv-obs-danger {
  border-color: var(--color-danger-subtle);
  color: var(--color-danger-text);
  background: var(--color-danger-bg);
}

.fv-wh-legend {
  padding: 10px 16px 12px;
  border-top: 1px solid var(--border-light);
  color: var(--text-tertiary);
  font-size: 11.5px;
  line-height: 1.75;
}

.fv-wh-chart-note {
  margin-top: 8px;
  padding: 0 18px 14px;
  color: var(--text-tertiary);
  font-size: 11.5px;
  line-height: 1.7;
}

.fv-chart-scope {
  margin-left: 2px;
}

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

.fv-wh-lots {
  display: grid;
  gap: 6px;
}

.fv-wh-lot {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 90px 80px;
  gap: 10px;
  align-items: center;
  padding: 7px 10px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  font-size: 12px;
}

.fv-wh-lot.fv-is-unassigned {
  border-color: var(--color-warning-subtle);
  background: var(--color-warning-bg);
}

.fv-wh-lot-qty {
  font-weight: var(--font-weight-bold);
  text-align: right;
}

.fv-wh-split {
  display: block;
  color: var(--text-tertiary);
  font-size: 10px;
}

.fv-wh-empty {
  color: var(--text-muted);
  font-size: 12px;
}

.fv-wh-states {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 12px;
  align-items: center;
  font-size: 12px;
}

.fv-wh-mini {
  display: grid;
  gap: 3px;
  margin-top: 7px;
}

.fv-wh-mini-row {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 40px;
  gap: 6px;
  align-items: center;
  color: var(--text-tertiary);
  font-size: 10px;
}

.fv-wh-mini-row .fv-num {
  text-align: right;
}

.fv-wh-draft {
  min-width: 0;
  padding: 4px 8px;
  text-align: left;
}

.fv-wh-draft {
  flex: none;
  width: 170px;
}

.fv-wh-draft .fv-draft-value {
  overflow: visible;
  font-size: 13px;
  line-height: 1.4;
  white-space: normal;
}

@media (max-width: 900px) {
  .fv-wh-lower {
    grid-template-columns: minmax(0, 1fr);
  }

  .fv-wh-lot {
    grid-template-columns: 80px minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fv-page *,
  .fv-page *::before,
  .fv-page *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Instagramコメント受信箱: lc-* / igdm-* の会話UIを投稿グループ向けに再構成。 */
.sns-comment-inbox-view {
  min-height: 0;
  gap: var(--space-2);
}
.ci-root {
  --ci-list-width: 300px;
  --ci-post-width: 360px;
  --ci-panel-width: 260px;
  position: relative;
  display: grid;
  flex: 1;
  height: auto;
  min-height: 480px;
  grid-template-columns: var(--ci-list-width) var(--ci-post-width) minmax(0, 1fr) var(--ci-panel-width);
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-muted);
  color: var(--text-primary);
}
.ci-list {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  border-right: 1px solid var(--border-default);
  background: var(--bg-surface);
}
.ci-tools {
  display: grid;
  flex: 0 0 auto;
  gap: var(--space-2);
  padding: 10px;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-surface);
}
.ci-tools input[type="search"] {
  box-sizing: border-box;
  width: 100%;
  height: 32px;
  padding: 0 var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--font-size-sm);
}
.ci-toggles,
.ci-toggles label {
  display: flex;
  align-items: center;
}
.ci-toggles {
  justify-content: space-between;
  gap: var(--space-2);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}
.ci-toggles label {
  gap: 6px;
  color: var(--text-secondary);
}
.ci-toggles input {
  width: 16px;
  height: 16px;
  margin: 0;
}
.ci-last-sync {
  color: var(--text-muted);
  font-size: 11px;
}
.ci-convs {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.ci-post-group { border-bottom: 1px solid var(--border-default); }
.ci-post-head {
  display: grid;
  width: 100%;
  grid-template-columns: 14px 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  padding: 9px 10px;
  border: 0;
  background: var(--bg-surface);
  color: var(--text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.ci-post-head:hover { background: var(--bg-hover); }
.ci-post-group.open .ci-post-head {
  position: sticky;
  z-index: 2;
  top: 0;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-subtle);
}
.ci-post-head[aria-current="true"] { background: var(--color-primary-bg); }
.ci-post-head:focus-visible,
.ci-row:focus-visible,
.ci-group-more:focus-visible,
.ci-action-link:focus-visible,
.ci-dm-link:focus-visible,
.ci-cap-toggle:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: -2px;
}
.ci-post-thumb {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--bg-muted);
}
.ci-chev {
  color: var(--text-muted);
  font-size: 11px;
  transition: transform .12s ease;
}
.ci-post-group.open .ci-chev { transform: rotate(90deg); }
.ci-post-thumb img,
.ci-hist-thumb img,
.ci-single-media img,
.ci-carousel-item img,
.ci-video-fallback img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ci-post-copy,
.ci-row-main,
.ci-name,
.ci-hist-copy { min-width: 0; }
.ci-post-caption {
  display: -webkit-box;
  overflow: hidden;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.ci-post-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 11px;
}
.ci-type {
  display: inline-flex;
  align-items: center;
  min-height: 17px;
  padding: 0 6px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-subtle);
  color: var(--color-primary-active);
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}
.ci-unreplied-count {
  display: grid;
  min-width: 24px;
  height: 24px;
  place-items: center;
  padding: 0 7px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--text-inverse);
  font-size: 11px;
  font-weight: var(--font-weight-bold);
}
.ci-row {
  position: relative;
  display: grid;
  width: 100%;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-2);
  padding: 9px 10px 9px 18px;
  border: 0;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-surface);
  color: var(--text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.ci-row:hover { background: var(--bg-hover); }
.ci-row.active { background: var(--color-primary-bg); }
.ci-row.unreplied::before,
.ci-row.pending::before {
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 8px;
  width: 3px;
  border-radius: 2px;
  background: var(--color-primary);
  content: "";
}
.ci-row.pending::before { background: var(--color-warning); }
.ci-avatar,
.ci-avatar-s {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--bg-muted);
  color: var(--text-tertiary);
}
.ci-avatar { width: 34px; height: 34px; font-size: var(--font-size-xs); }
.ci-avatar-s { width: 30px; height: 30px; font-size: 11px; }
.ci-avatar img,
.ci-avatar-s img,
.ci-ig-av img,
.sns-account-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.ci-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: var(--font-weight-semibold);
}
.ci-name-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ci-state-badge,
.ci-mini {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 18px;
  padding: 0 7px;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: var(--font-weight-bold);
}
.ci-state-badge.unreplied { background: var(--color-primary-bg); color: var(--color-primary-active); }
.ci-state-badge.replied,
.ci-mini.ok { background: var(--color-success-subtle); color: var(--color-success-text); }
.ci-state-badge.pending { background: var(--color-warning-bg); color: var(--color-warning-text); }
.ci-state-badge.unavailable { background: var(--bg-muted); color: var(--text-muted); }
.ci-prev {
  display: -webkit-box;
  margin-top: 2px;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.ci-time {
  color: var(--text-muted);
  font-size: 11px;
  white-space: nowrap;
}
.ci-load-more,
.ci-group-more {
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-top: 1px solid var(--border-light);
  background: var(--bg-surface);
  color: var(--color-primary);
  font: inherit;
  font-size: var(--font-size-xs);
  cursor: pointer;
}
.ci-load-more:disabled,
.ci-group-more:disabled { opacity: .55; cursor: wait; }
.ci-post-pane {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  border-right: 1px solid var(--border-default);
  background: var(--bg-surface);
}
.ci-pane-title {
  display: flex;
  min-height: 30px;
  flex: 0 0 auto;
  align-items: center;
  padding: 7px 10px;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-subtle);
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: var(--font-weight-bold);
}
.ci-post-scroll {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.ci-ig-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
}
.ci-ig-avatar {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--bg-muted);
  color: var(--text-tertiary);
  font-size: 10px;
  font-weight: var(--font-weight-bold);
}
.ci-ig-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ci-ig-account { min-width: 0; }
.ci-ig-account-name {
  overflow: hidden;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ci-ig-sub {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ci-ig-more {
  margin-left: auto;
  color: var(--text-tertiary);
  font-weight: var(--font-weight-bold);
  letter-spacing: 1px;
}
.ci-thread {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  border-right: 1px solid var(--border-default);
  background: var(--bg-muted);
}
.ci-thread-head {
  display: flex;
  min-width: 0;
  min-height: 48px;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-surface);
}
.ci-thread-head-copy { min-width: 0; }
.ci-thread-head-name {
  overflow: hidden;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ci-thread-head-meta {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 11px;
  text-align: right;
}
.ci-post-media {
  width: 100%;
  min-width: 0;
  background: var(--bg-nav);
}
.ci-single-media,
.ci-carousel-item {
  position: relative;
  display: grid;
  width: 100%;
  height: min(46vh, 470px);
  max-height: min(46vh, 470px);
  flex: 0 0 100%;
  place-items: center;
  overflow: hidden;
  background: var(--bg-nav);
}
.ci-carousel {
  display: flex;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.ci-carousel-item { scroll-snap-align: start; }
.ci-post-pane .ci-single-media img,
.ci-post-pane .ci-carousel-item img,
.ci-post-pane .ci-video-fallback img {
  width: 100%;
  height: 100%;
  max-height: min(46vh, 470px);
  object-fit: contain;
}
.ci-car-count {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  background: rgba(15, 23, 42, .68);
  color: #fff;
  font-size: 10px;
  font-weight: var(--font-weight-bold);
}
.ci-video-frame {
  display: grid;
  width: 100%;
  height: min(46vh, 470px);
  max-height: min(46vh, 470px);
  grid-template-rows: minmax(0, 1fr) auto;
  place-items: center;
  gap: var(--space-2);
  background: var(--bg-nav);
}
.ci-video-player {
  display: block;
  width: 100%;
  height: 100%;
  max-height: min(46vh, 470px);
  object-fit: contain;
  background: var(--bg-nav);
}
.ci-video-fallback {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  overflow: hidden;
  background: var(--bg-nav);
}
.ci-ig-metrics {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 12px 2px;
}
.ci-metric {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 4px 9px;
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
}
.ci-metric b {
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}
.ci-ig-caption {
  padding: 8px 12px 0;
  font-size: var(--font-size-sm);
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.ci-caption-body { white-space: pre-wrap; }
.ci-caption-body.is-clamped {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}
.ci-caption-who {
  margin-right: 5px;
  font-weight: var(--font-weight-bold);
}
.ci-cap-toggle {
  display: inline-block;
  margin-top: 2px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-tertiary);
  font: inherit;
  font-size: var(--font-size-xs);
  cursor: pointer;
}
.ci-ig-date {
  display: block;
  padding: 8px 12px 14px;
  color: var(--text-muted);
  font-size: 11px;
}
.ci-post-foot {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 8px 10px;
  border-top: 1px solid var(--border-default);
  background: var(--bg-surface);
}
.ci-action-link,
.ci-dm-link {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border: 1px solid var(--color-primary-subtle);
  border-radius: var(--radius-md);
  background: var(--color-primary-bg);
  color: var(--color-primary);
  font: inherit;
  font-size: var(--font-size-xs);
  text-decoration: none;
  cursor: pointer;
}
.ci-msgs {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: var(--space-2);
  padding: 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.ci-msg {
  display: flex;
  max-width: 78%;
  align-items: flex-end;
  gap: 7px;
}
.ci-msg.inbound { align-self: flex-start; }
.ci-msg.outbound { align-self: flex-end; flex-direction: row-reverse; }
.ci-bubble-wrap { min-width: 0; }
.ci-bubble {
  position: relative;
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 16px;
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.ci-msg.inbound .ci-bubble { border-top-left-radius: 4px; }
.ci-msg.outbound .ci-bubble {
  border-top-right-radius: 4px;
  background: var(--color-primary);
  color: var(--text-inverse);
}
.ci-sender {
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: var(--font-weight-bold);
}
.ci-msg.outbound .ci-sender { color: var(--color-primary-subtle); }
.ci-message-text { white-space: pre-wrap; }
.ci-like {
  position: absolute;
  z-index: 2;
  right: -8px;
  bottom: -11px;
  min-width: 24px;
  padding: 2px 6px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  color: var(--text-primary);
  font-size: var(--font-size-xs);
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}
.ci-like-toggle {
  position: absolute;
  z-index: 3;
  top: -13px;
  right: -25px;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  opacity: 0;
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--font-size-xl);
  line-height: 1;
  cursor: pointer;
  transition: opacity var(--transition-normal), transform var(--transition-normal);
  transform: scale(.92);
}
.ci-bubble:hover .ci-like-toggle,
.ci-bubble:focus-within .ci-like-toggle,
.ci-like-toggle:focus-visible {
  opacity: 1;
  transform: scale(1);
}
.ci-like-toggle:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}
.ci-like-toggle:disabled {
  cursor: wait;
}
.ci-bubble.has-like-pending {
  margin-bottom: 30px;
}
.ci-like-pending {
  position: absolute;
  z-index: 2;
  right: 4px;
  bottom: -30px;
  padding: 2px 6px;
  border-radius: var(--radius-full);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  font-size: var(--font-size-xs);
  line-height: 1.2;
  white-space: nowrap;
}
.ci-reply-hint {
  margin: -2px 0 0 37px;
  color: var(--text-muted);
  font-size: 11px;
}
.ci-reply-hint.pending { color: var(--color-warning-text); }
.ci-reply-hint.unavailable { color: var(--color-danger-text); }
.ci-like-reaction-note {
  margin: 2px 0 0 37px;
  color: var(--text-muted);
  font-size: 11px;
}
.ci-handling {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--border-default);
  background: var(--color-success-bg);
}
.ci-handling-copy {
  min-width: 0;
  color: var(--color-success-text);
  font-size: var(--font-size-sm);
}
.ci-handling-note {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ci-handling-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-2);
}
.ci-handling-toggle {
  flex: 0 0 auto;
  white-space: nowrap;
}
.igc-ai-draft-chip {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-1);
  border: 1px solid var(--color-primary-subtle);
  border-radius: var(--radius-full);
  background: var(--color-primary-bg);
  color: var(--color-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}
.igc-ai-draft-card {
  flex: 0 0 auto;
  min-height: 0;
  max-height: min(44vh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: var(--space-2) var(--space-3) 0;
  padding: var(--space-3);
  border: 1px solid var(--color-primary-subtle);
  border-left: var(--space-1) solid var(--color-primary);
  border-radius: var(--radius-lg);
  background: var(--color-primary-bg);
  box-shadow: var(--shadow-sm);
}
.igc-ai-draft-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.igc-ai-draft-title {
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}
.igc-ai-draft-username {
  overflow: hidden;
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.igc-ai-draft-text {
  margin-top: var(--space-2);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.igc-ai-draft-notice {
  margin-top: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  overflow-wrap: anywhere;
}
.igc-ai-draft-status {
  margin-top: var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}
.igc-ai-draft-editor-label {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}
.igc-ai-draft-editor {
  box-sizing: border-box;
  width: 100%;
  min-height: calc(var(--space-8) * 3);
  padding: var(--space-2) var(--space-3);
  resize: vertical;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}
.igc-ai-draft-editor:focus {
  border-color: var(--border-focus);
  outline: 2px solid var(--color-primary-bg);
}
.igc-ai-draft-editor-tools {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
}
.igc-ai-draft-count {
  margin-left: auto;
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
}
.igc-ai-draft-count.is-error {
  color: var(--color-danger-text);
  font-weight: var(--font-weight-semibold);
}
.igc-ai-draft-editor-tools .igc-ai-draft-emoji-pop {
  bottom: calc(100% + var(--space-1));
  left: 0;
  display: block;
  width: 280px;
  max-width: min(280px, calc(100vw - 40px));
  max-height: 240px;
  overflow: auto;
}
.igc-ai-draft-emoji-pop .ci-emoji-btn {
  width: auto;
}
.igc-ai-draft-actions {
  position: sticky;
  z-index: 1;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--space-2) 0;
  background: var(--color-primary-bg);
}
.igc-ai-draft-button {
  min-height: var(--space-8);
  padding: 0 var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}
.igc-ai-draft-button:hover:not(:disabled) {
  background: var(--bg-hover);
}
.igc-ai-draft-button:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: var(--space-1);
}
.igc-ai-draft-button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}
.igc-ai-draft-approve {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--text-inverse);
}
.igc-ai-draft-approve:hover:not(:disabled) {
  border-color: var(--color-primary-hover);
  background: var(--color-primary-hover);
}
.igc-ai-draft-reject {
  border-color: var(--color-danger);
  color: var(--color-danger-text);
}
.igc-ai-draft-secondary {
  color: var(--text-secondary);
}
.ci-compose {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  gap: var(--space-2);
  padding: 10px;
  border-top: 1px solid var(--border-default);
  background: var(--bg-surface);
}
.ci-compose-meta,
.ci-compose-footer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
}
.ci-compose-meta .to {
  padding: 2px 9px;
  border-radius: var(--radius-full);
  background: var(--color-primary-bg);
  color: var(--color-primary-active);
  font-weight: var(--font-weight-bold);
}
.ci-compose-hint { margin-left: auto; color: var(--text-muted); }
.ci-compose-disabled {
  color: var(--color-warning-text);
  font-weight: var(--font-weight-semibold);
}
.ci-compose-row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
}
.ci-compose textarea {
  box-sizing: border-box;
  min-width: 0;
  min-height: 54px;
  max-height: 220px;
  flex: 1;
  padding: var(--space-2);
  resize: vertical;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--font-size-sm);
}
.ci-compose-row > button:not(.ci-tool) {
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: var(--text-inverse);
  font: inherit;
  cursor: pointer;
}
.ci-compose button:disabled,
.ci-compose textarea:disabled { opacity: .55; cursor: not-allowed; }
.ci-tool {
  display: grid;
  width: 34px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  font-size: 16px;
  cursor: pointer;
}
.ci-compose-footer { justify-content: space-between; color: var(--text-muted); }
.ci-compose-status { min-height: 18px; color: var(--color-success-text); font-size: var(--font-size-xs); }
.ci-compose-status.is-error,
.ci-compose-footer .is-error { color: var(--color-danger-text); }
.ci-emoji-pop {
  position: absolute;
  z-index: 5;
  bottom: 92px;
  left: 10px;
  display: grid;
  width: 230px;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  padding: var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-lg);
}
.ci-emoji-btn {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: 17px;
  cursor: pointer;
}
.ci-emoji-btn:hover { background: var(--bg-hover); }
.ci-panel {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  background: var(--bg-surface);
}
.ci-panel-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 18px;
  border-bottom: 1px solid var(--border-default);
}
.ci-ig-av {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  padding: 2px;
  border-radius: 50%;
  background: linear-gradient(45deg, #f09433, #dc2743, #bc1888);
}
.ci-ig-av > span {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  border: 2px solid var(--bg-surface);
  border-radius: 50%;
  background: var(--bg-muted);
  color: var(--text-tertiary);
}
.ci-panel-name { font-size: var(--font-size-md); font-weight: var(--font-weight-bold); }
.ci-panel-section {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-light);
}
.ci-panel-label {
  margin-bottom: 7px;
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: var(--font-weight-bold);
}
.ci-panel-value { color: var(--text-primary); font-size: var(--font-size-sm); line-height: 1.6; }
.ci-panel-note {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.45;
}
.ci-match-uncertain {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  font-size: 11px;
  font-weight: var(--font-weight-bold);
}
.ci-hist {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: 7px 0;
  border-top: 1px solid var(--border-light);
  font-size: var(--font-size-xs);
}
.ci-hist:first-of-type { border-top: 0; }
.ci-hist-thumb {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--bg-muted);
}
.ci-hist-date {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ci-hist-text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.ci-media-fallback {
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 36px;
  place-items: center;
  padding: var(--space-1);
  color: var(--text-muted);
  font-size: 10px;
  text-align: center;
}
.ci-empty {
  display: grid;
  min-height: 120px;
  place-items: center;
  padding: var(--space-4);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  text-align: center;
}
.ci-partial-error {
  padding: var(--space-3);
  color: var(--color-danger-text);
  font-size: var(--font-size-xs);
  text-align: center;
}
.ci-resizer {
  position: absolute;
  z-index: 6;
  top: 0;
  bottom: 0;
  display: grid;
  width: 8px;
  place-items: center;
  cursor: col-resize;
  touch-action: none;
}
.ci-resizer::after {
  width: 3px;
  height: 34px;
  border-radius: 2px;
  background: var(--border-default);
  content: "";
  transition: background .12s ease, height .12s ease;
}
.ci-resizer:hover,
.ci-resizer:focus-visible {
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  outline: none;
}
.ci-resizer:hover::after,
.ci-resizer:focus-visible::after {
  height: 60px;
  background: var(--color-primary);
}
.ci-resizer-list {
  left: var(--ci-list-width);
  margin-left: -4px;
}
.ci-resizer-post {
  left: calc(var(--ci-list-width) + var(--ci-post-width));
  margin-left: -4px;
}
.ci-resizer-panel {
  right: var(--ci-panel-width);
  margin-right: -4px;
}
body.ci-resizing {
  cursor: col-resize !important;
  user-select: none !important;
}
.ci-root[data-ci-layout="medium"] {
  flex: none;
  height: auto;
  min-height: 860px;
  grid-template-columns: minmax(280px, 36%) minmax(0, 1fr);
  grid-template-rows: minmax(500px, 1fr) minmax(320px, .7fr);
}
.ci-root[data-ci-layout="medium"] .ci-list {
  grid-column: 1;
  grid-row: 1;
  border-bottom: 1px solid var(--border-default);
}
.ci-root[data-ci-layout="medium"] .ci-post-pane {
  grid-column: 1;
  grid-row: 2;
}
.ci-root[data-ci-layout="medium"] .ci-thread {
  grid-column: 2;
  grid-row: 1;
  border-bottom: 1px solid var(--border-default);
  border-right: 0;
}
.ci-root[data-ci-layout="medium"] .ci-panel {
  grid-column: 2;
  grid-row: 2;
}
.ci-root[data-ci-layout="medium"] .ci-resizer,
.ci-root[data-ci-layout="narrow"] .ci-resizer {
  display: none;
}
.ci-root[data-ci-layout="narrow"] {
  display: flex;
  flex: none;
  height: auto;
  min-height: 0;
  flex-direction: column;
  overflow: visible;
}
.ci-root[data-ci-layout="narrow"] .ci-list {
  max-height: 520px;
  border-right: 0;
  border-bottom: 1px solid var(--border-default);
}
.ci-root[data-ci-layout="narrow"] .ci-post-pane {
  min-height: 520px;
  border-right: 0;
  border-bottom: 1px solid var(--border-default);
}
.ci-root[data-ci-layout="narrow"] .ci-thread {
  min-height: 680px;
  border-right: 0;
  border-bottom: 1px solid var(--border-default);
}
.ci-root[data-ci-layout="narrow"] .ci-panel {
  max-height: none;
}
/* === LINE > LP（飛び先）: Yahoo Custom Page === */
.ylp-list-page,
.ylp-approval {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: var(--space-5);
  background: var(--bg-body);
  color: var(--text-primary);
}

.ylp-list-header,
.ylp-section-heading,
.ylp-draft-row,
.ylp-history-row,
.ylp-draft-title,
.ylp-approval-header,
.ylp-approval-heading,
.ylp-action-buttons,
.ylp-preview-header,
.ylp-capture-heading,
.ylp-device-tabs,
.ylp-html-diff-heading,
.ylp-checkpoint-heading,
.ylp-check-row,
.ylp-checkpoint-panel-header {
  display: flex;
  align-items: center;
}

.ylp-list-header,
.ylp-approval-header {
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.ylp-list-heading-copy h1,
.ylp-approval-heading h1,
.ylp-preview-header h2,
.ylp-byte-card h2,
.ylp-diff-card > h2,
.ylp-checkpoint-panel-header h2,
.ylp-section-heading h2,
.ylp-html-diff-heading h3,
.ylp-modal-title {
  margin: 0;
  color: var(--text-primary);
}

.ylp-list-heading-copy h1,
.ylp-approval-heading h1 {
  font-size: var(--font-size-2xl);
}

.ylp-preview-header h2,
.ylp-byte-card h2,
.ylp-diff-card > h2,
.ylp-checkpoint-panel-header h2,
.ylp-section-heading h2 {
  font-size: var(--font-size-lg);
}

.ylp-html-diff-heading h3,
.ylp-modal-title {
  font-size: var(--font-size-md);
}

.ylp-list-heading-copy p {
  margin: var(--space-1) 0 0;
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.ylp-line-gate {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}

.ylp-list-section,
.ylp-preview-card,
.ylp-byte-card,
.ylp-diff-card {
  margin-bottom: var(--space-4);
}

.ylp-section-heading,
.ylp-preview-header,
.ylp-html-diff-heading,
.ylp-checkpoint-panel-header {
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.ylp-draft-list,
.ylp-history-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ylp-draft-row,
.ylp-history-row {
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}

.ylp-draft-copy {
  min-width: 0;
}

.ylp-draft-title,
.ylp-approval-heading {
  flex-wrap: wrap;
  gap: var(--space-2);
}

.ylp-draft-meta,
.ylp-approval-meta,
.ylp-draft-id,
.ylp-confirmed-count,
.ylp-byte-note,
.ylp-preview-note,
.ylp-capture-meta,
.ylp-draft-preview-note,
.ylp-checkpoint-note {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.ylp-draft-meta,
.ylp-approval-meta {
  margin-top: var(--space-1);
}

.ylp-kind-badge,
.ylp-published-badge {
  white-space: nowrap;
}

.ylp-history-error,
.ylp-modal-error {
  color: var(--color-danger-text);
  font-size: var(--font-size-sm);
}

.ylp-history-error {
  margin-top: var(--space-1);
}

.ylp-pending-empty {
  min-height: 52px;
}

.ylp-table-wrap {
  max-height: 460px;
  overflow: auto;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
}

.ylp-table {
  min-width: 980px;
}

.ylp-table td:first-child,
.ylp-byte-table td:first-child {
  text-align: left;
}

.ylp-page-row {
  background: var(--bg-surface);
}

.ylp-page-key {
  margin-top: var(--space-1);
  color: var(--text-tertiary);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--font-size-xs);
}

.ylp-byte-summary {
  white-space: normal;
  line-height: var(--line-height-relaxed);
}

.ylp-approval-title-group {
  min-width: 0;
}

.ylp-approval-actions {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: var(--space-2);
}

.ylp-action-buttons {
  justify-content: flex-end;
  gap: var(--space-2);
}

.ylp-approval-lock {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  text-align: right;
}

.ylp-approval-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: var(--space-4);
  align-items: start;
}

.ylp-review-main {
  min-width: 0;
}

.ylp-device-tabs {
  gap: var(--space-1);
}

.ylp-device-tab {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--font-size-sm);
  cursor: pointer;
}

.ylp-device-tab.is-active {
  color: var(--text-inverse);
  border-color: var(--color-primary);
  background: var(--color-primary);
}

.ylp-preview-frame {
  display: block;
  width: 100%;
  height: 520px;
  max-height: 520px;
  margin: 0 auto;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}

.ylp-preview-frame.is-sp {
  width: 390px;
  max-width: 100%;
}

.ylp-preview-frame.is-pc {
  width: 100%;
}

.ylp-preview-frame[hidden] {
  display: none;
}

.ylp-preview-note,
.ylp-draft-preview-note,
.ylp-byte-note,
.ylp-checkpoint-note {
  margin: var(--space-2) 0 0;
  line-height: var(--line-height-normal);
}

.ylp-capture-heading,
.ylp-template-capture-warning {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.ylp-capture-meta {
  margin-bottom: var(--space-2);
}

.ylp-capture-stage {
  min-height: 240px;
  overflow: auto;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}

.ylp-capture-image {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.ylp-capture-image[hidden],
.ylp-capture-error[hidden],
.ylp-capture-loading[hidden],
.ylp-capture-stage[hidden] {
  display: none;
}

.ylp-capture-sp-frame {
  height: 520px;
}

.ylp-capture-error {
  margin: var(--space-3);
}

.ylp-capture-empty {
  margin-bottom: var(--space-3);
}

.ylp-template-capture-warning {
  align-items: flex-start;
  flex-direction: column;
}

.ylp-draft-preview-note {
  margin: calc(var(--space-4) * -1) 0 var(--space-4);
}

.ylp-byte-table {
  margin-top: var(--space-3);
}

.ylp-html-diff {
  margin-top: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.ylp-html-diff-heading {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-muted);
  border-bottom: 1px solid var(--border-default);
}

.ylp-diff-lines {
  max-height: 360px;
  overflow: auto;
  background: var(--bg-surface);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--font-size-xs);
}

.ylp-diff-line {
  display: grid;
  grid-template-columns: 42px 42px 22px minmax(0, 1fr);
  min-width: 620px;
  border-bottom: 1px solid var(--border-light);
}

.ylp-diff-line.is-add {
  background: var(--color-success-bg);
}

.ylp-diff-line.is-remove {
  background: var(--color-danger-bg);
}

.ylp-diff-number,
.ylp-diff-prefix,
.ylp-diff-code {
  padding: 2px var(--space-1);
  white-space: pre-wrap;
}

.ylp-diff-number,
.ylp-diff-prefix {
  color: var(--text-tertiary);
  text-align: right;
  user-select: none;
}

.ylp-diff-code {
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.ylp-checkpoint-panel {
  position: sticky;
  top: 0;
  max-height: calc(100vh - 150px);
  overflow: auto;
}

.ylp-checkpoint-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ylp-checkpoint-card {
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}

.ylp-checkpoint-card.is-checked {
  border-color: var(--color-success);
  background: var(--color-success-bg);
}

.ylp-checkpoint-heading {
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.ylp-checkpoint-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--text-inverse);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

.ylp-checkpoint-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.ylp-compare-box {
  min-width: 0;
  padding: var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-muted);
}

.ylp-compare-box.is-after {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
}

.ylp-checkpoint-value,
.ylp-public-url {
  margin-top: var(--space-1);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.ylp-public-url {
  color: var(--color-primary-hover);
}

.ylp-marker-list {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-5);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  overflow-wrap: anywhere;
}

.ylp-check-row {
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-default);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  cursor: pointer;
}

.ylp-check-row input {
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary);
}

.ylp-state-card {
  max-width: 560px;
  margin: var(--space-6) auto;
  text-align: center;
}

.ylp-state-title {
  display: block;
  margin-bottom: var(--space-2);
}

.ylp-state-message {
  margin-bottom: var(--space-3);
  color: var(--color-danger-text);
  overflow-wrap: anywhere;
}

.ylp-modal {
  width: min(720px, 92%);
}

.ylp-modal-backdrop {
  z-index: var(--z-modal-backdrop);
}

.ylp-modal-description {
  margin: 0 0 var(--space-3);
  color: var(--text-secondary);
  line-height: var(--line-height-normal);
}

.ylp-modal-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ylp-modal-field-label {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.ylp-modal-textarea {
  min-height: 220px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  resize: vertical;
}

.ylp-modal-error {
  min-height: 18px;
  margin-top: var(--space-2);
}

.ylp-review-action:disabled {
  cursor: not-allowed;
}

@media (max-width: 1180px) {
  .ylp-approval-body {
    grid-template-columns: 1fr;
  }

  .ylp-checkpoint-panel {
    position: static;
    max-height: none;
  }

  .ylp-approval-header {
    align-items: flex-start;
  }
}
/* ============================================================
   Gifting Journey v2 redesign
   ============================================================ */
.gjv2-page,
.gjv2-condition-page {
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
}

.gjv2-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--space-5) var(--space-4) var(--space-8);
}

.gjv2-condition-page {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-5) var(--space-4) var(--space-8);
}

.gjv2-empty {
  padding: var(--space-6);
  color: var(--text-tertiary);
  text-align: center;
}

.gjv2-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: calc(var(--radius-xl) + var(--space-1));
  box-shadow: var(--shadow-sm);
}

.gjv2-pm-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.gjv2-pm-header h2,
.gjv2-condition-head h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-3xl);
}

.gjv2-kicker {
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: .05em;
}

.gjv2-pm-chips,
.gjv2-badges,
.gjv2-advanced-controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.gjv2-pm-chip {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}

.gjv2-pm-chip-attention {
  color: var(--color-danger-text);
  background: var(--color-danger-bg);
  border-color: var(--color-danger);
}

.gjv2-pm-chip-progress { color: var(--color-primary); }
.gjv2-pm-chip-done { color: var(--color-success-text); }
.gjv2-chip-num { font-size: var(--font-size-xl); }

.gjv2-section-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 10px;
  color: var(--text-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

.gjv2-count-pill {
  min-width: 26px;
  padding: 1px 9px;
  color: var(--text-inverse);
  background: var(--color-danger);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  text-align: center;
}

.gjv2-todo-section { margin-bottom: var(--space-6); }

.gjv2-todo-card {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: var(--space-2);
  padding: 14px 18px;
  border-left: 4px solid var(--color-danger);
}

.gjv2-todo-post { border-left-color: var(--color-warning); }
.gjv2-todo-invoice { border-left-color: var(--color-primary); }
.gjv2-no-todo { padding: var(--space-4); color: var(--color-success-text); }

.gjv2-todo-who {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 230px;
}

.gjv2-todo-what { flex: 1; }
.gjv2-todo-reason { font-weight: var(--font-weight-semibold); }
.gjv2-todo-sub,
.gjv2-account,
.gjv2-muted {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.gjv2-elapsed {
  color: var(--color-danger-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.gjv2-avatar {
  display: flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--text-inverse);
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
  border-radius: 50%;
  font-size: 15px;
  font-weight: var(--font-weight-bold);
}

.gjv2-avatar-sm {
  width: 32px;
  height: 32px;
  font-size: var(--font-size-md);
}

.gjv2-names { min-width: 0; }
.gjv2-name { font-weight: var(--font-weight-bold); }

.gjv2-participant-card {
  margin-bottom: 10px;
  padding: var(--space-4) 18px 14px;
}

.gjv2-participant-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.gjv2-participant-head > .gjv2-names { min-width: 150px; }

.gjv2-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.gjv2-badge-neutral { color: var(--text-tertiary); background: var(--bg-subtle); }
.gjv2-badge-paid { color: var(--color-warning-text); background: var(--color-warning-subtle); }
.gjv2-badge-free { color: var(--color-info); background: var(--color-info-bg); }
.gjv2-badge-danger { color: var(--color-danger-text); background: var(--color-danger-bg); }
.gjv2-badge-success { color: var(--color-success-text); background: var(--color-success-subtle); }
.gjv2-badge-warning { color: var(--color-warning-text); background: var(--color-warning-subtle); }

.gjv2-next {
  margin-left: auto;
  text-align: right;
}

.gjv2-next-label {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}

.gjv2-next-value {
  color: var(--color-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
}

.gjv2-next-complete .gjv2-next-value { color: var(--color-success-text); }
.gjv2-stepper-scroll { width: 100%; overflow-x: auto; }

.gjv2-stepper {
  display: flex;
  min-width: 760px;
  align-items: flex-start;
  margin: var(--space-4) var(--space-1) var(--space-1);
}

.gjv2-step {
  position: relative;
  display: flex;
  min-width: 82px;
  flex: 1 0 82px;
  align-items: center;
  flex-direction: column;
}

.gjv2-step::before {
  position: absolute;
  z-index: 0;
  top: 10px;
  left: -50%;
  width: 100%;
  height: 3px;
  background: var(--border-default);
  content: "";
}

.gjv2-step:first-child::before { display: none; }
.gjv2-step-done::before,
.gjv2-step-current::before { background: var(--color-success); }

.gjv2-step-dot {
  z-index: 1;
  display: flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  background: var(--bg-surface);
  border: 3px solid var(--border-default);
  border-radius: 50%;
}

.gjv2-step-done .gjv2-step-dot {
  color: var(--text-inverse);
  background: var(--color-success);
  border-color: var(--color-success);
}

.gjv2-step-done .gjv2-step-dot::after {
  content: "✓";
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}

.gjv2-step-current .gjv2-step-dot {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-primary-subtle);
}

.gjv2-step-current .gjv2-step-dot::after {
  width: 8px;
  height: 8px;
  background: var(--color-primary);
  border-radius: 50%;
  content: "";
}

.gjv2-step-skip .gjv2-step-dot {
  background: var(--bg-muted);
  border-style: dashed;
}

.gjv2-step-label {
  margin-top: 6px;
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-tight);
  text-align: center;
  white-space: normal;
}

.gjv2-step-done .gjv2-step-label {
  color: var(--color-success-text);
  font-weight: var(--font-weight-semibold);
}

.gjv2-step-current .gjv2-step-label {
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
}

.gjv2-participant-foot {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: 14px;
  padding-top: var(--space-3);
  border-top: 1px solid var(--bg-muted);
  flex-wrap: wrap;
}

.gjv2-spacer { flex: 1; }

.gjv2-btn,
.gjv2-detail-toggle,
.gjv2-condition-back,
.gjv2-number-button,
.gjv2-segment {
  font-family: inherit;
  cursor: pointer;
}

.gjv2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-xl);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  transition: var(--transition-normal);
}

.gjv2-btn:disabled,
.gjv2-number-button:disabled {
  cursor: not-allowed;
  opacity: .5;
}

.gjv2-btn-primary,
.gjv2-btn-primary-lg {
  color: var(--text-inverse);
  background: var(--color-primary);
}

.gjv2-btn-primary:hover:not(:disabled),
.gjv2-btn-primary-lg:hover:not(:disabled) { background: var(--color-primary-hover); }

.gjv2-btn-primary-lg {
  padding: 13px 28px;
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  font-size: 15px;
}

.gjv2-btn-secondary {
  color: var(--text-secondary);
  background: var(--bg-surface);
  border-color: var(--border-medium);
}

.gjv2-btn-secondary:hover:not(:disabled) { background: var(--bg-muted); }
.gjv2-btn-sm { padding: 6px 12px; font-size: var(--font-size-sm); }

.gjv2-btn-ghost-sm {
  padding: 5px 10px;
  color: var(--color-primary);
  background: var(--bg-surface);
  border-color: var(--color-primary-subtle);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
}

.gjv2-detail-toggle {
  padding: var(--space-1);
  color: var(--text-tertiary);
  background: transparent;
  border: 0;
  font-size: var(--font-size-sm);
}

.gjv2-detail-panel {
  margin-top: var(--space-3);
  padding: 14px var(--space-4);
  background: var(--bg-muted);
  border-radius: 10px;
}

.gjv2-detail-panel h4 { margin: 0 0 var(--space-2); color: var(--text-secondary); }

.gjv2-post-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  padding: 9px var(--space-3);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  flex-wrap: wrap;
}

.gjv2-post-slot {
  width: 44px;
  color: var(--text-tertiary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
}

.gjv2-post-when { width: 170px; font-size: var(--font-size-base); }

.gjv2-post-url {
  min-width: 160px;
  flex: 1;
  overflow: hidden;
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gjv2-post-url-empty { color: var(--text-tertiary); }

.gjv2-admin-settings { margin-top: 28px; }

.gjv2-admin-settings > summary,
.gjv2-advanced > summary {
  padding: var(--space-2) var(--space-1);
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}

.gjv2-admin-inner { margin-top: var(--space-2); padding: var(--space-4) 18px; }

.gjv2-admin-grid {
  display: grid;
  margin-bottom: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-3);
}

.gjv2-admin-grid label,
.gjv2-paid-grid label {
  display: flex;
  color: var(--text-tertiary);
  flex-direction: column;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  gap: var(--space-1);
}

.gjv2-admin-grid select,
.gjv2-admin-grid input,
.gjv2-advanced select,
.gjv2-paid-grid input,
.gjv2-date-row input {
  min-width: 0;
  padding: 8px 10px;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-lg);
  font: inherit;
}

.gjv2-advanced {
  margin-top: 14px;
  padding-top: var(--space-3);
  border-top: 1px dashed var(--border-default);
}

.gjv2-advanced-inner { padding: var(--space-3) 0; }
.gjv2-check-label { display: flex; align-items: center; color: var(--text-secondary); }
.gjv2-shadow-ledger { margin-top: var(--space-3); color: var(--text-tertiary); }
.gjv2-table-wrap { width: 100%; overflow-x: auto; }
.gjv2-table { width: 100%; border-collapse: collapse; }
.gjv2-table th,
.gjv2-table td { padding: var(--space-2); border-bottom: 1px solid var(--border-default); text-align: left; }

.gjv2-alert {
  margin-bottom: var(--space-3);
  padding: 10px var(--space-3);
  border: 1px solid;
  border-radius: var(--radius-xl);
}

.gjv2-alert-error {
  color: var(--color-danger-text);
  background: var(--color-danger-bg);
  border-color: var(--color-danger-subtle);
}

.gjv2-alert-warning {
  color: var(--color-warning-text);
  background: var(--color-warning-bg);
  border-color: var(--color-warning-subtle);
}

.gjv2-alert-success {
  color: var(--color-success-text);
  background: var(--color-success-bg);
  border-color: var(--color-success-subtle);
}

.gjv2-condition-back {
  display: inline-block;
  margin-bottom: var(--space-3);
  padding: 0;
  color: var(--text-tertiary);
  background: transparent;
  border: 0;
  font-size: var(--font-size-base);
}

.gjv2-condition-head { margin-bottom: 18px; }
.gjv2-condition-head p { margin: var(--space-1) 0 0; color: var(--text-tertiary); font-size: var(--font-size-base); }

.gjv2-flow-steps {
  display: flex;
  margin-bottom: var(--space-5);
}

.gjv2-flow-step {
  position: relative;
  padding: 10px 6px 8px;
  flex: 1;
  color: var(--text-tertiary);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  font-size: var(--font-size-base);
  text-align: center;
}

.gjv2-flow-step:first-child { border-radius: 10px 0 0 10px; }
.gjv2-flow-step:last-child { border-radius: 0 10px 10px 0; }

.gjv2-flow-number {
  display: inline-flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  margin-right: 6px;
  background: var(--bg-subtle);
  border-radius: 50%;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}

.gjv2-flow-step-current {
  color: var(--color-primary);
  background: var(--color-primary-bg);
  border-color: var(--color-primary);
  font-weight: var(--font-weight-bold);
}

.gjv2-flow-step-current .gjv2-flow-number {
  color: var(--text-inverse);
  background: var(--color-primary);
}

.gjv2-flow-step-done { color: var(--color-success-text); }
.gjv2-flow-step-done .gjv2-flow-number { color: var(--text-inverse); background: var(--color-success); }
.gjv2-condition-card { margin-bottom: var(--space-4); padding: 22px var(--space-6); }
.gjv2-condition-card h3 { margin: 0 0 14px; font-size: var(--font-size-lg); }

.gjv2-segments {
  display: grid;
  margin-bottom: 18px;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.gjv2-segment {
  display: flex;
  padding: 14px;
  align-items: center;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 2px solid var(--border-default);
  border-radius: calc(var(--radius-xl) + var(--space-1));
  flex-direction: column;
}

.gjv2-segment-on { background: var(--color-primary-bg); border-color: var(--color-primary); }
.gjv2-segment-icon { font-size: var(--font-size-3xl); }
.gjv2-segment-title { font-weight: var(--font-weight-bold); }
.gjv2-segment-description { color: var(--text-tertiary); font-size: var(--font-size-xs); }

.gjv2-number-grid {
  display: grid;
  margin-bottom: 18px;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.gjv2-number-field > label {
  display: block;
  margin-bottom: 6px;
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}

.gjv2-number-control {
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--border-input);
  border-radius: 10px;
}

.gjv2-number-button {
  width: 42px;
  height: 42px;
  color: var(--text-secondary);
  background: var(--bg-muted);
  border: 0;
  font-size: var(--font-size-2xl);
}

.gjv2-number-control input {
  min-width: 50px;
  width: 50px;
  flex: 1;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 0;
  font: inherit;
  font-size: 17px;
  font-weight: var(--font-weight-bold);
  text-align: center;
}

.gjv2-date-rows > label {
  display: block;
  margin-bottom: 6px;
  color: var(--text-secondary);
  font-weight: var(--font-weight-semibold);
}

.gjv2-date-period {
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  color: var(--color-primary-active);
  background: var(--color-primary-bg);
  border: 1px solid var(--color-primary-subtle);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.gjv2-date-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-2);
}

.gjv2-date-tag {
  padding: var(--space-1) 9px;
  color: var(--color-primary);
  background: var(--color-primary-bg);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

.gjv2-date-row input { flex: 1; }

.gjv2-paid-panel {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-subtle);
  border-radius: calc(var(--radius-xl) + var(--space-1));
}

.gjv2-paid-panel h4 { margin: 0 0 10px; color: var(--color-warning-text); }
.gjv2-paid-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.gjv2-paid-grid label { color: var(--color-warning-text); }

.gjv2-condition-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.gjv2-preview-card { overflow: hidden; }
.gjv2-preview-stale { opacity: .65; }
.gjv2-line-preview { overflow: hidden; border-radius: calc(var(--radius-xl) + var(--space-1)); }

.gjv2-line-bar {
  padding: 9px 14px;
  color: var(--text-inverse);
  background: var(--color-line-brand);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
}

.gjv2-line-body { padding: 18px var(--space-4); background: #8cabd8; }

.gjv2-line-bubble {
  max-width: 88%;
  padding: var(--space-3) 14px;
  color: var(--text-primary);
  background: var(--bg-surface);
  border-radius: 11px;
  box-shadow: var(--shadow-sm);
  font-size: 12.5px;
  white-space: pre-wrap;
}

.gjv2-confirm-strip {
  display: flex;
  padding: var(--space-3) 14px;
  background: var(--bg-muted);
  border-top: 1px solid var(--border-default);
  gap: var(--space-2);
  flex-wrap: wrap;
}

.gjv2-confirm-chip {
  padding: 3px 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
}

.gjv2-send-zone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-default);
  gap: 10px;
  flex-wrap: wrap;
}

.gjv2-send-note { color: var(--text-tertiary); font-size: var(--font-size-sm); }

.gjv2-sent-hero {
  padding: 34px var(--space-6) 26px;
  text-align: center;
}

.gjv2-sent-icon {
  display: flex;
  width: 62px;
  height: 62px;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-3);
  color: var(--color-success-hover);
  background: var(--color-success-subtle);
  border-radius: 50%;
  font-size: 30px;
}

.gjv2-sent-warning .gjv2-sent-icon {
  color: var(--color-warning-text);
  background: var(--color-warning-subtle);
}

.gjv2-sent-hero h3 { margin: 0 0 6px; font-size: var(--font-size-2xl); }
.gjv2-sent-lead,
.gjv2-sent-summary,
.gjv2-lock-note { color: var(--text-tertiary); font-size: var(--font-size-base); }

.gjv2-timeline {
  max-width: 460px;
  margin: var(--space-5) auto;
  text-align: left;
}

.gjv2-timeline-item { display: flex; padding: var(--space-2) 0; gap: var(--space-3); }

.gjv2-timeline-marker {
  display: flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 50%;
  font-size: var(--font-size-sm);
}

.gjv2-timeline-done .gjv2-timeline-marker { color: var(--text-inverse); background: var(--color-success); }
.gjv2-timeline-wait .gjv2-timeline-marker { color: var(--text-tertiary); background: var(--bg-surface); border: 2px dashed var(--border-medium); }
.gjv2-timeline-title { font-weight: var(--font-weight-semibold); }
.gjv2-timeline-sub { color: var(--text-tertiary); font-size: var(--font-size-sm); }
.gjv2-lock-note { margin-top: 14px; }

@media (max-width: 900px) {
  .gjv2-todo-card { align-items: flex-start; flex-wrap: wrap; }
  .gjv2-todo-who { min-width: 200px; }
  .gjv2-todo-what { min-width: 260px; }
  .gjv2-next { width: 100%; margin-left: 50px; text-align: left; }
}

@media (max-width: 640px) {
  .gjv2-page,
  .gjv2-condition-page { padding-right: var(--space-2); padding-left: var(--space-2); }
  .gjv2-number-grid,
  .gjv2-paid-grid,
  .gjv2-segments { grid-template-columns: 1fr; }
  .gjv2-condition-card { padding: var(--space-4); }
  .gjv2-flow-step { font-size: var(--font-size-xs); }
  .gjv2-flow-number { display: flex; margin: 0 auto var(--space-1); }
  .gjv2-condition-actions { align-items: stretch; flex-direction: column; }
}

/* Keep v2 field sizing after the shared input/select component declarations. */
.sph-head .sph-year {
  width: auto;
}

.sph-actions .sph-paid-date {
  width: 142px;
}

.sph-seq-row .sph-seq-input {
  width: 180px;
}

.sph-table .sph-num-input {
  min-width: 120px;
  text-align: right;
}

/* === モールマーケティング: LP sandboxプレビュー === */
.rlp-sandbox-preview-card {
  min-width: 0;
}

.rlp-sandbox-preview-header,
.ylp-preview-actions,
.rlp-preview-error,
.ylp-preview-error {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.rlp-sandbox-preview-header {
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.rlp-sandbox-preview-header h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-lg);
}

.rlp-sandbox-preview-frame {
  display: block;
  width: 100%;
  height: 560px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}

.rlp-sandbox-preview-note {
  margin: var(--space-2) 0 0;
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.rlp-layout-preview-row > td,
.ylp-mirror-preview-row > td {
  padding: var(--space-3);
  background: var(--bg-muted);
}

.rlp-preview-error,
.ylp-preview-error {
  justify-content: space-between;
}

.ylp-preview-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.rlp-confirm-title {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-xl);
}

.rlp-confirm-description {
  margin: 0;
  color: var(--text-secondary);
  line-height: var(--line-height-normal);
}

.rlp-confirm-error {
  min-height: var(--space-4);
  margin-top: var(--space-2);
  color: var(--color-danger-text);
  font-size: var(--font-size-sm);
}

/* === 管理 > 接続 === */
.admin-connections-card {
  margin: var(--space-3);
  overflow: hidden;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
}

.admin-connections-tablist {
  display: flex;
  align-items: stretch;
  gap: 2px;
  padding: 0 var(--space-3);
  background: var(--bg-muted);
  border-bottom: 1px solid var(--border-default);
}

.admin-connections-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: -1px;
  padding: 13px 18px;
  color: var(--text-tertiary);
  font: inherit;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
}

.admin-connections-tab:hover {
  color: var(--text-primary);
  background: var(--bg-surface);
}

.admin-connections-tab:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: -2px;
}

.admin-connections-tab.is-active {
  color: var(--color-primary);
  background: var(--bg-surface);
  border-bottom-color: var(--color-primary);
}

.admin-connections-tab-count {
  display: inline-flex;
  min-width: 19px;
  height: 19px;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  background: var(--bg-active);
  border-radius: var(--radius-full);
}

.admin-connections-tab.is-active .admin-connections-tab-count {
  color: var(--color-primary);
  background: var(--color-primary-subtle);
}

.admin-connections-tab-count.is-alert {
  color: var(--text-inverse);
  background: var(--color-danger);
}

.admin-connections-pane[hidden],
.admin-connections-detail-row[hidden],
.admin-connections-webhook-edit[hidden] {
  display: none;
}

.admin-connections-pane-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 14px var(--space-4);
  border-bottom: 1px solid var(--border-default);
}

.admin-connections-pane-title {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

.admin-connections-pane-description {
  margin-top: 2px;
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.admin-connections-summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.admin-connections-summary-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
}

.admin-connections-summary-chip.is-danger {
  color: var(--color-danger-text);
  background: var(--color-danger-bg);
  border-color: var(--color-danger-subtle);
}

.admin-connections-summary-chip.is-warning {
  color: var(--color-warning-text);
  background: var(--color-warning-bg);
  border-color: var(--color-warning-subtle);
}

.admin-connections-summary-chip.is-success {
  color: var(--color-success-text);
  background: var(--color-success-bg);
  border-color: var(--color-success-subtle);
}

.admin-connections-summary-chip.is-neutral {
  color: var(--text-tertiary);
  background: var(--bg-muted);
  border-color: var(--border-default);
}

.admin-connections-status-dot {
  width: 7px;
  height: 7px;
  flex: none;
  background: currentColor;
  border-radius: 50%;
}

.admin-connections-table-scroll {
  width: 100%;
  overflow-x: auto;
}

.admin-connections-table {
  min-width: 980px;
}

.admin-connections-table th,
.admin-connections-table td {
  padding: 9px 10px;
  text-align: left;
}

.admin-connections-table th {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.admin-connections-table td {
  overflow: visible;
  white-space: normal;
}

.admin-connections-table tbody tr.is-critical {
  background: var(--color-danger-bg);
}

.admin-connections-table tbody tr.is-warning {
  background: var(--color-warning-bg);
}

.admin-connections-col-expand { width: 3%; }
.admin-connections-col-service { width: 16%; }
.admin-connections-col-status { width: 9%; }
.admin-connections-col-expiry { width: 14%; }
.admin-connections-col-days { width: 6%; }
.admin-connections-col-room { width: 15%; }
.admin-connections-col-lead { width: 10%; }
.admin-connections-col-action { width: 12%; }

.admin-connections-service {
  display: flex;
  align-items: center;
  gap: 9px;
}

.admin-connections-service-icon {
  --admin-connections-service-color: var(--text-secondary);
  display: grid;
  width: 26px;
  height: 26px;
  flex: none;
  place-items: center;
  color: var(--text-inverse);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  background: var(--admin-connections-service-color);
  border-radius: var(--radius-lg);
}

.admin-connections-service-icon--boss { --admin-connections-service-color: #374151; }
.admin-connections-service-icon--aupay { --admin-connections-service-color: #eb5505; }
.admin-connections-service-icon--yahoo { --admin-connections-service-color: #ff0033; }
.admin-connections-service-icon--rakuten { --admin-connections-service-color: #bf0000; }
.admin-connections-service-icon--lseg { --admin-connections-service-color: #06c755; }
.admin-connections-service-icon--meta { --admin-connections-service-color: #0866ff; }
.admin-connections-service-icon--amazon { --admin-connections-service-color: #ff9900; }

.admin-connections-service-name,
.admin-connections-service-description {
  display: block;
}

.admin-connections-service-name,
.admin-connections-setting-name {
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
}

.admin-connections-service-description,
.admin-connections-updated-at {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}

.admin-connections-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
}

.admin-connections-status-badge.is-success {
  color: var(--color-success-text);
  background: var(--color-success-subtle);
}

.admin-connections-status-badge.is-warning {
  color: var(--color-warning-text);
  background: var(--color-warning-subtle);
}

.admin-connections-status-badge.is-danger,
.admin-connections-status-badge.is-error {
  color: var(--color-danger-text);
  background: var(--color-danger-subtle);
}

.admin-connections-status-badge.is-neutral {
  color: var(--text-tertiary);
  background: var(--bg-subtle);
}

.admin-connections-source-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  color: var(--color-primary);
  font-size: var(--font-size-xs);
  background: var(--color-primary-bg);
  border: 1px solid var(--color-primary-subtle);
  border-radius: var(--radius-sm);
}

.admin-connections-source-tag.is-manual {
  color: #6d28d9;
  background: #f5f3ff;
  border-color: #ddd6fe;
}

.admin-connections-room-input { width: 112px; }
.admin-connections-days-input { width: 56px; text-align: right; }
.admin-connections-date-input { width: 132px; }
.admin-connections-url-input { width: 100%; font-family: ui-monospace, Menlo, monospace; }

.admin-connections-remaining {
  color: var(--text-secondary);
  font-weight: var(--font-weight-bold);
}

.admin-connections-remaining.is-danger,
.admin-connections-remaining.is-error {
  color: var(--color-danger-text);
}

.admin-connections-remaining.is-warning {
  color: var(--color-warning-text);
}

.admin-connections-dash {
  color: var(--text-muted);
}

.admin-connections-expand {
  min-width: 24px;
  color: var(--text-muted);
}

.admin-connections-detail-row td {
  padding: 0;
  background: var(--bg-muted);
  border-bottom: 1px solid var(--border-default);
}

.admin-connections-steps {
  margin: 0;
  padding: 0 14px 13px calc(49px + var(--space-4));
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

.admin-connections-detail {
  padding: 11px 14px 13px 49px;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

.admin-connections-row-status {
  display: block;
  margin-top: var(--space-1);
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
}

.admin-connections-row-status.is-success {
  color: var(--color-success-text);
}

.admin-connections-row-status.is-error,
.admin-connections-pane-error {
  color: var(--color-danger-text);
}

/* #gazou（画像の即答）の元栓。ルームごとの許可より上位なので、表の先頭に置いて先に目に入るようにする。 */
.admin-connections-rollout {
  margin: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
}

.admin-connections-rollout label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}

.admin-connections-rollout small {
  display: block;
  margin-top: var(--space-1);
  color: var(--text-muted);
}

.admin-connections-rollout-msg {
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.admin-connections-rollout-msg.success { color: var(--color-success-text); }
.admin-connections-rollout-msg.error { color: var(--color-danger-text); }

.admin-connections-pane-error,
.admin-connections-drive-warning {
  margin: var(--space-3);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-base);
  border-radius: var(--radius-md);
}

.admin-connections-pane-error {
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger-subtle);
}

.admin-connections-drive-warning {
  color: var(--color-danger-text);
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger-subtle);
}

.admin-connections-url-table th:first-child { width: 25%; }
.admin-connections-url-table th:nth-child(2) { width: 50%; }
.admin-connections-url-table th:nth-child(3) { width: 15%; }
.admin-connections-url-table th:last-child { width: 10%; }

.admin-connections-webhook-content {
  padding: 0 var(--space-4) var(--space-4);
}

.admin-connections-webhook-group {
  margin-top: var(--space-4);
  overflow-x: auto;
}

.admin-connections-group-title {
  margin: 0 0 var(--space-2);
  color: var(--text-primary);
  font-size: var(--font-size-md);
}

.admin-connections-webhook-token-summary {
  color: var(--text-tertiary);
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--font-size-sm);
}

.admin-connections-webhook-edit {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-1);
}

.admin-connections-monospace {
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--font-size-sm);
  word-break: break-all;
}

.admin-connections-drive-actions,
.admin-connections-drive-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-base);
}

.admin-connections-drive-footer {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border-default);
}

.admin-connections-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-connections-modal {
  z-index: var(--z-modal);
}

.admin-connections-modal-title {
  margin: 0;
  font-size: var(--font-size-xl);
}

.admin-connections-export-content {
  max-height: 240px;
  overflow: auto;
  padding: var(--space-3);
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  white-space: pre-wrap;
  word-break: break-all;
  background: var(--bg-muted);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}

/* === 画像生成ワークスペース === */
#imageGenPanel {
  --imggen-lineage-height: 148px;
  --imggen-left-width: 400px;
  --imggen-right-width: 380px;
  --imggen-pane-min-width: 240px;
  --imggen-resize-handle-width: 8px;
  --imggen-lineage-resize-handle-height: 8px;

  min-width: 0;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--bg-muted);
}

#imageGenPanel.active {
  display: flex;
}

.imggen-pane {
  display: flex;
  min-width: 0;
  flex-direction: column;
  background: var(--bg-surface);
}

.imggen-pane-left {
  width: var(--imggen-left-width);
  min-width: var(--imggen-pane-min-width);
  flex: 0 0 var(--imggen-left-width);
}

.imggen-pane-center {
  min-width: var(--imggen-pane-min-width);
  flex: 1 1 auto;
  background: var(--bg-muted);
}

.imggen-pane-right {
  width: var(--imggen-right-width);
  min-width: var(--imggen-pane-min-width);
  flex: 0 0 var(--imggen-right-width);
}

.imggen-pane-resize-handle {
  position: relative;
  z-index: 3;
  width: var(--imggen-resize-handle-width);
  min-width: var(--imggen-resize-handle-width);
  height: 100%;
  flex: 0 0 var(--imggen-resize-handle-width);
  touch-action: none;
  background: var(--border-light);
  cursor: col-resize;
}

.imggen-pane-resize-handle::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 40px;
  content: "";
  background: var(--border-medium);
  border-radius: var(--radius-full);
  transform: translate(-50%, -50%);
}

.imggen-pane-resize-handle:hover,
.imggen-pane-resize-handle:focus-visible {
  background: var(--color-primary-subtle);
  outline: none;
}

.imggen-pane-resize-handle:hover::after,
.imggen-pane-resize-handle:focus-visible::after {
  background: var(--color-primary);
}

.imggen-is-resizing,
.imggen-is-resizing * {
  cursor: col-resize !important;
  user-select: none !important;
}

.imggen-is-resizing.imggen-is-resizing-lineage,
.imggen-is-resizing.imggen-is-resizing-lineage * {
  cursor: row-resize !important;
}

.imggen-pane-header,
.imggen-center-top {
  display: flex;
  min-height: 42px;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-surface);
}

.imggen-pane-header h2 {
  flex: 1;
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
}

.imggen-workspace-title {
  min-width: 0;
  overflow: hidden;
  color: var(--text-primary);
  font-size: var(--font-size-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.imggen-usage-chip {
  display: flex;
  margin-left: auto;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  background: var(--bg-subtle);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
}

.imggen-usage-bar {
  display: block;
  width: 64px;
  height: 5px;
  padding: 0;
  overflow: hidden;
  appearance: none;
  background: var(--bg-active);
  border: 0;
  border-radius: var(--radius-full);
}

.imggen-usage-bar::-webkit-progress-bar {
  background: var(--bg-active);
}

.imggen-usage-bar::-webkit-progress-value {
  background: var(--color-warning);
}

.imggen-usage-bar::-moz-progress-bar {
  background: var(--color-warning);
}

.imggen-left-body {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.imggen-workspace-controls {
  display: flex;
  flex-shrink: 0;
  align-items: flex-end;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-default);
}

.imggen-workspace-picker {
  min-width: 0;
  flex: 1;
}

.imggen-workspace-picker .select {
  width: 100%;
}

.imggen-workspace-create {
  white-space: nowrap;
}

.imggen-workspace-refresh {
  width: 30px;
  flex: 0 0 30px;
  padding-inline: 0;
}

.imggen-loop-toggle {
  flex-shrink: 0;
}

.imggen-provisioning-panel {
  flex-shrink: 0;
  padding: var(--space-3);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  background: var(--color-info-bg);
  border-bottom: 1px solid var(--color-info-border);
}

.imggen-provisioning-panel strong {
  display: block;
  margin-bottom: var(--space-1);
}

.imggen-provisioning-panel p {
  margin: 0 0 var(--space-2);
}

.imggen-loop-process {
  max-height: 300px;
  flex-shrink: 0;
  padding: var(--space-3);
  overflow-y: auto;
  background: var(--bg-muted);
  border-bottom: 1px solid var(--border-default);
}

.imggen-loop-header,
.imggen-loop-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.imggen-loop-header strong {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.imggen-loop-status,
.imggen-loop-attempt {
  padding: 2px var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
}

.imggen-loop-status.is-running,
.imggen-loop-status.is-queued {
  color: var(--color-info);
  background: var(--color-info-bg);
  border-color: var(--color-info-border);
}

.imggen-loop-status.is-waiting_human {
  color: var(--color-warning-text);
  background: var(--color-warning-bg);
  border-color: var(--color-warning-subtle);
}

.imggen-loop-status.is-completed {
  color: var(--color-success-text);
  background: var(--color-success-bg);
  border-color: var(--color-success-subtle);
}

.imggen-loop-status.is-stopped {
  color: var(--color-danger-text);
  background: var(--color-danger-bg);
  border-color: var(--color-danger-subtle);
}

.imggen-loop-empty {
  margin: var(--space-2) 0;
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
}

.imggen-loop-start,
.imggen-loop-restart,
.imggen-loop-stop {
  width: 100%;
}

.imggen-loop-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-3) 0;
  padding: 0;
  list-style: none;
}

.imggen-loop-event {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
}

.imggen-loop-attempt {
  color: var(--text-tertiary);
  background: var(--bg-subtle);
}

.imggen-loop-message {
  padding-top: 2px;
  overflow-wrap: anywhere;
}

.imggen-loop-question {
  padding: var(--space-3);
  color: var(--color-warning-text);
  background: var(--color-warning-bg);
  border: 2px solid var(--color-warning);
  border-radius: var(--radius-md);
}

.imggen-loop-question strong {
  display: block;
  margin-bottom: var(--space-1);
}

.imggen-loop-question p {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
}

.imggen-loop-needed {
  font-weight: var(--font-weight-semibold);
}

.imggen-loop-actions {
  justify-content: flex-start;
}

.imggen-chat-placeholder {
  display: flex;
  min-height: 230px;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4);
  color: var(--text-tertiary);
  line-height: var(--line-height-relaxed);
  text-align: center;
  background: var(--bg-muted);
  border: 1px dashed var(--border-medium);
  border-radius: var(--radius-lg);
}

.imggen-chat-placeholder strong {
  color: var(--text-secondary);
}

.imggen-chat-placeholder-icon {
  font-size: var(--font-size-3xl);
}

.imggen-chat {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-3);
  overflow-y: auto;
  background: #8aabd4;
}

.imggen-chat-empty {
  align-self: center;
  max-width: 90%;
  margin: auto 0;
  padding: var(--space-2) var(--space-3);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  text-align: center;
  background: rgb(255 255 255 / 90%);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.imggen-chat-row {
  display: flex;
  max-width: 100%;
  flex-shrink: 0;
  align-items: flex-end;
  gap: var(--space-2);
}

.imggen-chat-row.is-mine {
  flex-direction: row-reverse;
}

.imggen-chat-avatar {
  display: flex;
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  align-items: center;
  justify-content: center;
  color: var(--text-inverse);
  font-size: 9px;
  font-weight: var(--font-weight-bold);
  background: var(--text-muted);
  border-radius: var(--radius-full);
}

.imggen-chat-avatar.is-agt {
  background: var(--color-primary);
}

.imggen-chat-stack {
  display: flex;
  min-width: 0;
  /* ペイン幅に追従させる。固定pxだとチャット列を広げても吹き出しが細いままで
     文章が縦長に折り返され続ける（実機で指摘）。上限は長文の可読性のため 760px で止める。 */
  max-width: min(78%, 760px);
  flex-direction: column;
  gap: 2px;
}

.imggen-chat-row.is-mine .imggen-chat-stack {
  align-items: flex-end;
}

.imggen-chat-name {
  padding: 0 2px;
  color: rgb(255 255 255 / 92%);
  font-size: var(--font-size-xs);
}

.imggen-chat-bubble {
  position: relative;
  padding: var(--space-2) var(--space-3);
  color: var(--text-primary);
  font-size: var(--font-size-base);
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--bg-surface);
  border-radius: 14px;
  border-top-left-radius: 3px;
  box-shadow: var(--shadow-sm);
}

.imggen-chat-row.is-agt .imggen-chat-bubble::before {
  position: absolute;
  top: 0;
  left: -5px;
  content: "";
  border-color: transparent var(--bg-surface) transparent transparent;
  border-style: solid;
  border-width: 0 8px 8px 0;
}

.imggen-chat-row.is-mine .imggen-chat-bubble {
  background: #9eea6a;
  border-top-left-radius: 14px;
  border-top-right-radius: 3px;
}

.imggen-chat-row.is-mine .imggen-chat-bubble::before {
  position: absolute;
  top: 0;
  right: -5px;
  content: "";
  border-color: transparent transparent transparent #9eea6a;
  border-style: solid;
  border-width: 0 0 8px 8px;
}

.imggen-chat-time {
  padding-bottom: 2px;
  color: rgb(255 255 255 / 88%);
  font-size: 9px;
  white-space: nowrap;
}

.imggen-chat-notice {
  display: flex;
  max-width: 90%;
  flex-shrink: 0;
  align-self: center;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  text-align: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.imggen-chat-notice.is-success {
  color: var(--color-success-text);
  background: var(--color-success-bg);
  border-color: var(--color-success-subtle);
}

.imggen-chat-notice.is-danger {
  color: var(--color-danger-text);
  background: var(--color-danger-bg);
  border-color: var(--color-danger-subtle);
}

.imggen-chat-notice.is-warning {
  color: var(--color-warning-text);
  background: var(--color-warning-bg);
  border-color: var(--color-warning-subtle);
}

.imggen-chat-notice.is-info {
  color: var(--color-info);
  background: var(--color-info-bg);
  border-color: var(--color-info-border);
}

.imggen-chat-notice-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.imggen-chat-notice-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.imggen-chat-notice-time {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}

.imggen-chat-notice .imggen-chat-refs {
  justify-content: center;
}

.imggen-chat-refs {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: var(--space-1);
}

.imggen-chat-ref {
  padding: 0 6px;
  color: var(--color-danger-text);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-full);
}

.imggen-chat-composer {
  flex-shrink: 0;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-surface);
  border-top: 1px solid var(--border-default);
}

.imggen-chat-input-row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
}

.imggen-chat-input {
  min-width: 0;
  min-height: 38px;
  max-height: 240px;
  flex: 1;
  padding: var(--space-2) var(--space-3);
  resize: none;
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: 1.4;
  background: var(--bg-input);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-xl);
}

.imggen-chat-input:focus {
  background: var(--bg-surface);
  border-color: var(--color-primary);
  outline: none;
}

.imggen-chat-send {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  padding: 0;
  color: var(--text-inverse);
  font-size: var(--font-size-lg);
  background: var(--color-primary);
  border: 0;
  border-radius: var(--radius-full);
  cursor: pointer;
}

.imggen-chat-send:disabled {
  cursor: default;
  opacity: 0.45;
}

.imggen-chat-options {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-2);
}

.imggen-chat-option {
  display: inline-flex;
  min-width: 0;
  flex: 1 1 0;
  align-items: center;
  gap: 3px;
  padding-left: var(--space-2);
  color: var(--text-muted);
  font-size: 9px;
  background: var(--bg-muted);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
}

.imggen-chat-option-select {
  width: 100%;
  min-width: 0;
  max-width: none;
  padding: 2px var(--space-2) 2px 0;
  color: var(--text-secondary);
  font-family: var(--font-family);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  background: transparent;
  border: 0;
  outline: 0;
}

.imggen-progress-card {
  position: relative;
  margin: var(--space-1) 0 0 var(--space-8);
  overflow: hidden;
  /* 親 .imggen-chat は flex column: overflow:hidden で最小高さ保護が外れ
     チャットが溢れると高さ0まで圧縮されるため縮小を禁止する */
  flex-shrink: 0;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.imggen-progress-card::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: var(--space-1);
  content: "";
  background: linear-gradient(
    90deg,
    var(--bg-surface),
    var(--color-primary),
    var(--color-primary-light),
    var(--bg-surface)
  );
  background-size: 200% 100%;
  opacity: 0.85;
  animation: imggen-progress-flow 1.8s linear infinite;
}

.imggen-progress-card.is-error::before {
  background: var(--color-danger);
  opacity: 0.7;
  animation: none;
}

.imggen-progress-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-3) var(--space-2);
}

.imggen-progress-orb {
  position: relative;
  width: var(--space-6);
  height: var(--space-6);
  flex: 0 0 var(--space-6);
  background: radial-gradient(circle at 35% 30%, var(--color-primary-subtle), var(--color-primary));
  border-radius: var(--radius-full);
}

.imggen-progress-card:not(.is-error) .imggen-progress-orb::after {
  position: absolute;
  inset: calc(var(--space-1) * -1);
  content: "";
  border: 2px solid var(--color-primary-light);
  border-radius: var(--radius-full);
  animation: imggen-progress-pulse 1.6s ease-out infinite;
}

.imggen-progress-title {
  min-width: 0;
  flex: 1;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
}

.imggen-progress-elapsed {
  padding: var(--space-1) var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  background: var(--bg-subtle);
  border-radius: var(--radius-full);
}

.imggen-progress-queue-note {
  margin: 0 var(--space-3) var(--space-3);
  padding: var(--space-2) var(--space-3);
  color: var(--color-warning-text);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-subtle);
  border-radius: var(--radius-md);
}

.imggen-progress-steps {
  padding: var(--space-1) var(--space-3) var(--space-2);
}

.imggen-progress-step {
  position: relative;
  display: flex;
  gap: var(--space-3);
}

.imggen-progress-step-rail {
  display: flex;
  width: var(--space-5);
  flex: 0 0 var(--space-5);
  flex-direction: column;
  align-items: center;
}

.imggen-progress-step-dot {
  z-index: 1;
  display: flex;
  width: var(--space-5);
  height: var(--space-5);
  flex: 0 0 var(--space-5);
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  background: var(--bg-subtle);
  border: 2px solid var(--border-default);
  border-radius: var(--radius-full);
}

.imggen-progress-step-line {
  width: 2px;
  min-height: var(--space-3);
  flex: 1;
  background: var(--border-default);
}

.imggen-progress-step:last-child .imggen-progress-step-line {
  display: none;
}

.imggen-progress-step-body {
  min-width: 0;
  flex: 1;
  padding: 0 0 var(--space-3);
}

.imggen-progress-step-label {
  color: var(--text-muted);
  font-size: var(--font-size-base);
}

.imggen-progress-step-sub {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  overflow-wrap: anywhere;
}

.imggen-progress-step.is-done .imggen-progress-step-dot {
  color: var(--color-success-text);
  background: var(--color-success-bg);
  border-color: var(--color-success);
}

.imggen-progress-step.is-done .imggen-progress-step-line {
  background: var(--color-success);
  opacity: 0.45;
}

.imggen-progress-step.is-done .imggen-progress-step-label {
  color: var(--text-secondary);
}

.imggen-progress-step.is-active .imggen-progress-step-dot {
  color: var(--color-primary);
  background: var(--color-primary-bg);
  border-color: var(--color-primary);
}

.imggen-progress-spin {
  width: var(--space-3);
  height: var(--space-3);
  border: 2px solid var(--color-primary);
  border-top-color: var(--color-primary-bg);
  border-radius: var(--radius-full);
  animation: imggen-progress-spin 0.9s linear infinite;
}

.imggen-progress-step.is-active .imggen-progress-step-label {
  /* 作業中の項目名に光の帯が流れるシマー（Claude Codeの「Vibing…」風）:
     グラデーションを文字形に切り抜いて流す */
  /* 箱を文字幅に合わせないと、帯が空白部分を通る時間が大半になり光が見えない */
  width: fit-content;
  max-width: 100%;
  color: transparent;
  font-weight: var(--font-weight-bold);
  background: linear-gradient(
    100deg,
    var(--text-primary) 0%,
    var(--text-primary) 35%,
    var(--color-primary-light) 50%,
    var(--text-primary) 65%,
    var(--text-primary) 100%
  );
  background-clip: text;
  background-size: 250% 100%;
  animation: imggen-progress-shimmer 2.2s linear infinite;
  -webkit-background-clip: text;
}

.imggen-progress-step.is-active .imggen-progress-step-sub {
  color: var(--text-secondary);
}

.imggen-progress-step.is-error .imggen-progress-step-dot {
  color: var(--color-danger-text);
  background: var(--color-danger-bg);
  border-color: var(--color-danger);
}

.imggen-progress-step.is-error .imggen-progress-step-label {
  color: var(--color-danger-text);
  font-weight: var(--font-weight-bold);
}

.imggen-progress-step.is-error .imggen-progress-step-sub {
  color: var(--text-secondary);
}

.imggen-progress-error-actions {
  display: flex;
  gap: var(--space-2);
  padding: 0 var(--space-3) var(--space-3);
}

.imggen-progress-done-chip {
  display: inline-flex;
  flex-shrink: 0;
  align-self: flex-start;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-1) 0 0 var(--space-8);
  padding: var(--space-1) var(--space-3);
  color: var(--color-success-text);
  font-size: var(--font-size-sm);
  background: var(--color-success-bg);
  border: 1px solid var(--color-success-subtle);
  border-radius: var(--radius-full);
}

@keyframes imggen-progress-flow {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

@keyframes imggen-progress-pulse {
  from { opacity: 1; transform: scale(0.7); }
  to { opacity: 0; transform: scale(1.25); }
}

@keyframes imggen-progress-spin {
  to { transform: rotate(360deg); }
}

@keyframes imggen-progress-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -100% 0; }
}

/* 進行カードで prefers-reduced-motion 時に止めるのは装飾（上端の光の帯・
   オーブの脈動）だけ。作業中ステップの項目名シマーとスピナーは
   「今どこが動いているか」を示す情報なので設定に関わらず再生する
   （2026-08-23 オーナー判断） */
@media (prefers-reduced-motion: reduce) {
  .imggen-progress-card::before,
  .imggen-progress-card:not(.is-error) .imggen-progress-orb::after {
    animation: none;
  }
}

.imggen-notice {
  padding: var(--space-2) var(--space-3);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}

.imggen-notice.is-success {
  color: var(--color-success-text);
  background: var(--color-success-bg);
  border-color: var(--color-success-subtle);
}

.imggen-notice.is-danger {
  color: var(--color-danger-text);
  background: var(--color-danger-bg);
  border-color: var(--color-danger-subtle);
}

.imggen-notice.is-warning {
  color: var(--color-warning-text);
  background: var(--color-warning-bg);
  border-color: var(--color-warning-subtle);
}

.imggen-notice.is-info {
  color: var(--color-info);
  background: var(--color-info-bg);
  border-color: var(--color-info-border);
}

.imggen-lineage-resize-handle {
  position: relative;
  z-index: 3;
  width: 100%;
  height: var(--imggen-lineage-resize-handle-height);
  min-height: var(--imggen-lineage-resize-handle-height);
  flex: 0 0 var(--imggen-lineage-resize-handle-height);
  touch-action: none;
  background: var(--border-light);
  cursor: row-resize;
}

.imggen-lineage-resize-handle::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 2px;
  content: "";
  background: var(--border-medium);
  border-radius: var(--radius-full);
  transform: translate(-50%, -50%);
}

.imggen-lineage-resize-handle:hover,
.imggen-lineage-resize-handle:focus-visible {
  background: var(--color-primary-subtle);
  outline: none;
}

.imggen-lineage-resize-handle:hover::after,
.imggen-lineage-resize-handle:focus-visible::after {
  background: var(--color-primary);
}

.imggen-lineage-wrap {
  height: var(--imggen-lineage-height);
  flex: 0 0 var(--imggen-lineage-height);
  overflow-x: auto;
  overflow-y: auto;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-default);
}

.imggen-lineage {
  display: flex;
  width: max-content;
  min-width: 100%;
  min-height: 100%;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
}

.imggen-lineage-node {
  position: relative;
  display: flex;
  width: 78px;
  min-height: 102px;
  flex: 0 0 78px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-1);
  color: var(--text-secondary);
  font-family: var(--font-family);
  font-size: var(--font-size-xs);
  background: var(--bg-surface);
  border: 2px solid var(--border-default);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: var(--transition-normal);
}

.imggen-lineage-node:hover,
.imggen-lineage-node.is-selected {
  border-color: var(--color-primary);
}

.imggen-lineage-node.is-selected {
  box-shadow: var(--shadow-focus);
}

.imggen-material-node {
  width: 96px;
  flex-basis: 96px;
  background: var(--bg-muted);
  border-style: dashed;
  cursor: default;
}

.imggen-material-node:has(.imggen-material-thumbs) {
  width: 154px;
  flex-basis: 154px;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  overflow: hidden;
}

.imggen-material-thumbs {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  align-items: stretch;
  gap: var(--space-1);
}

.imggen-material-thumb {
  position: relative;
  display: flex;
  min-width: 0;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  background: var(--bg-subtle);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
}

.imggen-material-thumb-base {
  width: 72px;
  min-height: 88px;
  flex: 0 0 72px;
}

.imggen-material-small-thumbs {
  display: flex;
  width: 30px;
  flex: 0 0 30px;
  flex-direction: column;
  gap: 2px;
}

.imggen-material-thumb-small {
  min-height: 26px;
  flex: 1 1 0;
}

.imggen-material-thumb-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.imggen-material-thumb-unavailable {
  padding: 2px;
  color: var(--text-muted);
  font-size: 8px;
  line-height: 1.15;
  text-align: center;
}

.imggen-material-thumb-role,
.imggen-material-status-badge {
  position: absolute;
  right: 2px;
  bottom: 2px;
  left: 2px;
  padding: 1px 2px;
  overflow: hidden;
  color: var(--text-inverse);
  font-size: 8px;
  line-height: 1.15;
  text-align: center;
  text-overflow: ellipsis;
  background: var(--color-primary);
  border-radius: var(--radius-sm);
}

.imggen-material-status-badge {
  top: 2px;
  bottom: auto;
  color: var(--color-warning-text);
  white-space: normal;
  background: var(--color-warning-subtle);
}

.imggen-material-thumb.is-trashed,
.imggen-material-thumb.is-hidden,
.imggen-material-thumb.is-unavailable {
  border-color: var(--color-warning);
}

.imggen-material-thumb.is-trashed .imggen-material-thumb-image,
.imggen-material-thumb.is-hidden .imggen-material-thumb-image {
  opacity: 0.45;
}

.imggen-material-meta {
  display: flex;
  min-width: 0;
  flex: 0 1 42px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.imggen-material-purpose {
  max-width: 100%;
  overflow: hidden;
  color: var(--text-tertiary);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.imggen-material-anomaly-badge {
  padding: 1px 3px;
  color: var(--color-danger-text);
  font-size: 8px;
  line-height: 1.2;
  background: var(--color-danger-subtle);
  border-radius: var(--radius-sm);
}

.imggen-material-icon,
.imggen-draft-icon {
  font-size: var(--font-size-xl);
}

.imggen-node-caption {
  display: block;
  max-width: 100%;
  overflow: hidden;
  font-weight: var(--font-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.imggen-lineage-arrow {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: var(--font-size-lg);
}

.imggen-version-tree {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.imggen-version-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-2);
}

.imggen-version-branch {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.imggen-parent-label {
  max-width: 78px;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.imggen-version-thumb {
  display: flex;
  width: 100%;
  min-height: 70px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  color: var(--text-muted);
  background: var(--bg-subtle);
  border-radius: var(--radius-sm);
}

.imggen-version-thumb-frame {
  position: relative;
  overflow: hidden;
}

.imggen-version-thumb-image {
  position: absolute;
  inset: var(--space-1);
  display: block;
  width: calc(100% - var(--space-2));
  height: calc(100% - var(--space-2));
  object-fit: contain;
}

.imggen-version-thumb-image:not([src]) {
  display: none;
}

.imggen-version-thumb-image[src] + .imggen-version-thumb-placeholder {
  display: none;
}

.imggen-version-thumb-placeholder {
  font-weight: var(--font-weight-semibold);
}

.imggen-version-thumb-image[src] ~ .imggen-version-size {
  position: absolute;
  right: 2px;
  bottom: 2px;
  left: 2px;
  padding: 1px 2px;
  overflow: hidden;
  color: var(--text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
  background: color-mix(in srgb, var(--bg-surface) 88%, transparent);
  border-radius: var(--radius-sm);
}

.imggen-version-placeholder-icon {
  font-weight: var(--font-weight-semibold);
}

.imggen-version-size {
  font-size: 9px;
}

.imggen-adopted-pin,
.imggen-comment-count {
  position: absolute;
  top: -7px;
  display: flex;
  min-width: 17px;
  height: 17px;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  color: var(--text-inverse);
  font-size: 9px;
  border-radius: var(--radius-full);
}

.imggen-adopted-pin {
  right: -7px;
  background: var(--color-success);
}

.imggen-comment-count {
  left: -7px;
  background: var(--color-danger);
}

.imggen-draft-node {
  min-height: 88px;
  background: var(--color-primary-bg);
  border-color: var(--color-primary);
  border-style: dashed;
}

.imggen-draft-base {
  color: var(--text-tertiary);
}

.imggen-ready-text {
  color: var(--color-success-dark);
}

.imggen-warning-text {
  color: var(--color-warning-text);
}

.imggen-stage {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  overflow: auto;
}

.imggen-canvas-tools {
  display: flex;
  /* 中央列を狭めたときに要素が重ならないよう折り返す（実機で重なりを確認）。 */
  flex-wrap: wrap;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
}

.imggen-tool-button {
  min-width: 28px;
}

.imggen-tool-button.active {
  color: var(--color-primary);
  background: var(--color-primary-subtle);
  border-color: var(--color-primary);
}

.imggen-tool-separator {
  width: 1px;
  height: 18px;
  background: var(--border-default);
}

.imggen-tool-hint,
.imggen-tiny-muted {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}

.imggen-canvas-host {
  position: relative;
  flex: 0 0 auto;
}

.imggen-canvas {
  position: relative;
  width: min(400px, 52vw);
  aspect-ratio: 1 / 1.414;
  overflow: hidden;
  touch-action: none;
  background: var(--bg-surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
}

.imggen-canvas.is-drawing {
  cursor: crosshair;
}

.imggen-page-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.imggen-canvas img {
  -webkit-user-drag: none;
  user-select: none;
}

.imggen-preview-unavailable {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-6);
  color: var(--text-tertiary);
  line-height: var(--line-height-relaxed);
  text-align: center;
  background: var(--bg-subtle);
  border: 1px dashed var(--border-medium);
}

.imggen-preview-unavailable strong {
  color: var(--text-secondary);
}

.imggen-preview-unavailable-icon {
  font-size: var(--font-size-3xl);
}

.imggen-mark-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.imggen-grid-line {
  stroke: var(--color-primary);
  stroke-width: 1;
  opacity: 0.3;
}

.imggen-grid-label {
  fill: var(--color-primary);
  font-size: 0.022px;
  font-weight: var(--font-weight-semibold);
  opacity: 0.8;
}

.imggen-mark-shape {
  fill: var(--color-danger-subtle);
  fill-opacity: 0.55;
  stroke: var(--color-danger);
  stroke-width: 2;
}

.imggen-mark-shape.is-resolved {
  fill: var(--color-success-subtle);
  stroke: var(--color-success);
}

.imggen-mark-shape.is-temporary {
  stroke-dasharray: 4 3;
}

.imggen-existing-mark {
  cursor: pointer;
  pointer-events: all;
}

.imggen-mark-number-bg {
  fill: var(--color-danger);
}

.imggen-mark-number {
  fill: var(--text-inverse);
  font-size: 0.025px;
  font-weight: var(--font-weight-bold);
  pointer-events: none;
}

.imggen-mark-popover-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.imggen-comment-popover {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: var(--z-modal);
  width: 262px;
  overflow: hidden;
  pointer-events: auto;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  transform: translate(-50%, -50%);
}

.imggen-comment-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-muted);
  border-bottom: 1px solid var(--border-light);
}

.imggen-comment-number {
  display: flex;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  color: var(--text-inverse);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  background: var(--color-danger);
  border-radius: var(--radius-full);
}

.imggen-comment-title {
  flex: 1;
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
}

.imggen-comment-close {
  padding: 0 var(--space-1);
  color: var(--text-muted);
  font-size: var(--font-size-xl);
  background: none;
  border: 0;
  cursor: pointer;
}

.imggen-comment-body {
  padding: var(--space-3);
}

.imggen-mark-description {
  margin-bottom: var(--space-2);
  padding: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
}

.imggen-description-label {
  display: block;
  margin-bottom: 2px;
  color: var(--text-muted);
  font-size: 9px;
}

.imggen-comment-input {
  width: 100%;
  min-height: 60px;
  resize: vertical;
}

.imggen-comment-footer,
.imggen-mark-mode-buttons {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.imggen-comment-footer {
  margin-top: var(--space-2);
}

.imggen-comment-status {
  min-width: 0;
  flex: 1;
  color: var(--color-danger-text);
  font-size: 9px;
  line-height: var(--line-height-tight);
}

.imggen-stage-note {
  max-width: 420px;
  padding: var(--space-2) var(--space-3);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  text-align: center;
  background: var(--color-info-bg);
  border: 1px solid var(--color-info-border);
  border-radius: var(--radius-md);
}

.imggen-detail-body {
  min-height: 0;
  flex: 1;
  padding: var(--space-4);
  overflow-y: auto;
}

.imggen-detail-tabs {
  display: grid;
  flex-shrink: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-surface);
}

.imggen-detail-tab {
  display: inline-flex;
  min-width: 0;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-1);
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.imggen-detail-tab:hover {
  color: var(--text-primary);
  background: var(--bg-subtle);
}

.imggen-detail-tab.is-active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.imggen-tab-badge {
  display: inline-flex;
  min-width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-1);
  color: var(--text-inverse);
  font-size: 9px;
  line-height: 1;
  background: var(--color-danger);
  border-radius: var(--radius-full);
}

.imggen-readonly-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  padding: var(--space-2) var(--space-3);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  background: var(--bg-subtle);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
}

.imggen-required-fields {
  margin-bottom: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-subtle);
  border-radius: var(--radius-md);
}

.imggen-required-row {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) minmax(80px, auto) auto;
  align-items: center;
  gap: var(--space-2);
  padding: 2px 0;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.imggen-required-row strong {
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.imggen-required-row.is-missing strong {
  color: var(--color-warning-text);
}

.imggen-required-empty,
.imggen-required-note {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}

.imggen-required-note {
  margin-top: var(--space-1);
  color: var(--color-warning-text);
}

.imggen-required-ready-note {
  margin-top: var(--space-1);
  color: var(--color-success-text);
  font-size: var(--font-size-xs);
}

.imggen-resolution-row {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-light);
}

.imggen-resolution-row.is-conflict,
.imggen-resolution-row.is-missing {
  padding-left: var(--space-2);
  border-left: 2px solid var(--color-warning);
}

.imggen-resolution-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.imggen-resolution-label {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.imggen-resolution-value {
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
}

.imggen-resolution-source,
.imggen-resolution-status,
.imggen-resolution-candidate {
  margin-top: var(--space-1);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
}

.imggen-resolution-status {
  color: var(--color-warning-text);
}

.imggen-source-detail-toggle {
  margin-top: var(--space-1);
  padding: 0;
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  text-decoration: underline;
  text-underline-offset: 2px;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.imggen-resolution-source-details[hidden] {
  display: none;
}

.imggen-resolution-choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-2);
}

.imggen-resolution-choice {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  background: var(--bg-surface);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.imggen-resolution-choice:hover {
  color: var(--color-primary);
  background: var(--color-primary-subtle);
  border-color: var(--color-primary);
}

.imggen-resolution-choice.is-selected {
  color: var(--color-success-text);
  background: var(--color-success-subtle);
  border-color: var(--color-success);
}

.imggen-resolution-choice:disabled {
  cursor: wait;
  opacity: 0.6;
}

.imggen-resolution-choice-value {
  font-weight: var(--font-weight-semibold);
}

.imggen-resolution-choice-source {
  color: var(--text-muted);
}

.imggen-proposal-badge {
  padding: 1px var(--space-1);
  color: var(--color-primary);
  font-size: 9px;
  background: var(--color-primary-subtle);
  border-radius: var(--radius-full);
}

.imggen-resolution-manual {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.imggen-resolution-manual .input {
  min-width: 0;
}

.imggen-purpose-result-actions,
.imggen-purpose-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.imggen-purpose-edit-row,
.imggen-purpose-form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-light);
}

.imggen-purpose-edit-row.is-missing {
  border-left: 2px solid var(--color-warning);
  padding-left: var(--space-2);
}

.imggen-purpose-value-field,
.imggen-workspace-form-field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-1);
}

.imggen-purpose-field-label {
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.imggen-purpose-type,
.imggen-purpose-source {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
}

.imggen-purpose-source {
  grid-column: 1 / -1;
}

.imggen-purpose-manual-note {
  grid-column: 1 / -1;
  color: var(--color-warning-text);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
}

.imggen-purpose-source-state {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  gap: var(--space-2);
}

.imggen-source-badge {
  flex: 0 0 auto;
}

.imggen-purpose-source-detail {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}

.imggen-purpose-value {
  width: 100%;
}

.imggen-purpose-confirm {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding-bottom: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  white-space: nowrap;
}

.imggen-purpose-confirm input {
  margin: 0;
}

.imggen-purpose-save {
  width: 100%;
  margin-top: var(--space-2);
}

.imggen-newsletter-refetch {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: var(--space-2) 0;
  padding: var(--space-2);
  background: var(--bg-surface);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
}

.imggen-newsletter-refetch-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
}

.imggen-newsletter-issue-select {
  width: 100%;
}

.imggen-modal-title {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-xl);
}

.imggen-workspace-modal {
  width: min(600px, 92%);
}

.imggen-workspace-modal-body,
.imggen-workspace-basic-fields,
.imggen-purpose-form-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.imggen-workspace-basic-fields .input,
.imggen-workspace-basic-fields .select {
  width: 100%;
}

.imggen-purpose-confirmation-note {
  padding: var(--space-2) var(--space-3);
  color: var(--color-warning-text);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-subtle);
  border-radius: var(--radius-md);
}

.imggen-modal-error {
  padding: var(--space-2) var(--space-3);
  color: var(--color-danger-text);
  font-size: var(--font-size-sm);
  background: var(--color-danger-subtle);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-md);
}

.imggen-modal-error:empty {
  display: none;
}

.imggen-section-label {
  margin-bottom: var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.imggen-section-suffix {
  margin-left: var(--space-1);
  font-weight: var(--font-weight-normal);
  letter-spacing: normal;
  text-transform: none;
}

.imggen-engine-settings {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.imggen-engine-name,
.imggen-engine-chip {
  padding: var(--space-1) var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  background: var(--bg-subtle);
  border-radius: var(--radius-full);
}

.imggen-engine-select {
  min-width: 100px;
}

.imggen-prompt-box {
  max-height: 230px;
  padding: var(--space-3);
  overflow-y: auto;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--bg-muted);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}

.imggen-prompt-added {
  padding: 0 2px;
  color: var(--color-success-text);
  text-decoration: none;
  background: var(--color-success-subtle);
  border-radius: 2px;
}

.imggen-prompt-deleted {
  padding: 0 2px;
  color: var(--color-danger-text);
  background: var(--color-danger-subtle);
  border-radius: 2px;
}

.imggen-prompt-diff-details {
  margin-bottom: var(--space-3);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.imggen-prompt-diff-details[hidden] {
  display: none;
}

.imggen-prompt-diff-summary {
  padding: var(--space-2) var(--space-3);
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
  background: var(--color-primary-bg);
  border: 1px solid var(--color-primary-subtle);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.imggen-prompt-diff-content {
  margin-top: var(--space-2);
}

.imggen-draft-prompt {
  width: 100%;
  min-height: 150px;
  margin-bottom: var(--space-2);
  resize: vertical;
}

.imggen-draft-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.imggen-draft-save-status {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}

.imggen-pane-right > .imggen-draft-actions {
  flex-shrink: 0;
  margin-bottom: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--color-warning-bg);
  border-top: 1px solid var(--color-warning-subtle);
}

.imggen-api-gap-note {
  margin: var(--space-2) 0;
  padding: var(--space-2) var(--space-3);
  color: var(--color-warning-text);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-subtle);
  border-radius: var(--radius-md);
}

.imggen-detail-section {
  margin-top: var(--space-4);
}

.imggen-assets-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.imggen-assets-empty {
  grid-column: 1 / -1;
}

.imggen-hidden-assets-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  background: var(--bg-subtle);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.imggen-hidden-assets-toggle:hover {
  color: var(--text-secondary);
  background: var(--bg-hover);
}

.imggen-hidden-assets-toggle:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.imggen-hidden-assets-grid {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-light);
}

.imggen-asset-card {
  position: relative;
  overflow: hidden;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
}

.imggen-asset-card.is-hidden {
  opacity: 0.45;
}

.imggen-asset-actions {
  position: absolute;
  top: 3px;
  right: 3px;
  z-index: 2;
  display: flex;
  gap: 2px;
}

.imggen-asset-actions button {
  width: 22px;
  height: 22px;
  padding: 0;
  color: var(--text-secondary);
  font-size: 9px;
  line-height: 1;
  background: var(--bg-surface);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.imggen-asset-actions button.is-active {
  color: var(--text-inverse);
  background: var(--color-success);
  border-color: var(--color-success);
}

.imggen-asset-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.imggen-asset-image {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--bg-subtle);
  border: 0;
  appearance: none;
  cursor: zoom-in;
}

.imggen-asset-image:focus-visible {
  z-index: 1;
  outline: none;
  box-shadow: inset var(--shadow-focus);
}

.imggen-asset-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.imggen-asset-image img:not([src]) {
  display: none;
}

.imggen-asset-image img[src] + .imggen-asset-image-placeholder {
  display: none;
}

.imggen-asset-image-placeholder {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

.imggen-asset-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-1) var(--space-2) var(--space-2);
  color: var(--text-muted);
  font-size: 9px;
  line-height: var(--line-height-tight);
}

.imggen-asset-meta strong {
  overflow: hidden;
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.imggen-asset-risk {
  color: var(--color-warning-text);
}

.imggen-upload-button {
  width: 100%;
  margin-top: var(--space-2);
}

.imggen-asset-viewer-backdrop {
  padding: var(--space-4);
}

.imggen-asset-viewer {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
}

.imggen-asset-viewer-header {
  flex: 0 0 auto;
  gap: var(--space-4);
}

.imggen-asset-viewer-heading {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: var(--space-3);
}

.imggen-asset-viewer-title {
  overflow: hidden;
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.imggen-asset-viewer-position {
  flex: 0 0 auto;
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.imggen-asset-viewer-close {
  flex: 0 0 auto;
  color: var(--text-secondary);
  font-size: var(--font-size-xl);
}

.imggen-asset-viewer-body {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  gap: var(--space-3);
  overflow: hidden;
  background: var(--bg-muted);
}

.imggen-asset-viewer-stage {
  display: grid;
  flex: 1;
  min-height: 0;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
}

.imggen-asset-viewer-media {
  display: flex;
  min-width: 0;
  height: 100%;
  min-height: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.imggen-asset-viewer-image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.imggen-asset-viewer-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-secondary);
  font-size: var(--font-size-md);
}

/* 作者側の display 指定はUA既定の [hidden]{display:none} を（詳細度に関係なく）上書きするため、
   hidden 属性を使う要素には明示的に打ち消しを書く。これが無いと画像読み込み後も
   「読み込み中…」が残り、読み込み中は壊れた画像アイコンが出る（実ブラウザで確認済み）。 */
.imggen-asset-viewer-image[hidden],
.imggen-asset-viewer-status[hidden] {
  display: none;
}

.imggen-asset-viewer-nav {
  flex: 0 0 auto;
}

.imggen-asset-viewer-caption {
  flex: 0 0 auto;
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  text-align: center;
  overflow-wrap: anywhere;
}

.imggen-check-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.imggen-check-summary {
  margin-bottom: var(--space-1);
  padding: var(--space-2);
  font-size: var(--font-size-xs);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}

.imggen-check-summary.is-ok {
  color: var(--color-success-text);
  background: var(--color-success-subtle);
}

.imggen-check-summary.is-failed {
  color: var(--color-danger-text);
  background: var(--color-danger-subtle);
}

.imggen-check-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 2px 0;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.imggen-check-item.is-yes {
  color: var(--color-success-text);
}

.imggen-check-item.is-no {
  color: var(--color-danger-text);
}

.imggen-check-item.is-unverifiable {
  color: var(--color-warning-text);
}

.imggen-check-icon {
  width: 14px;
  flex-shrink: 0;
  text-align: center;
}

.imggen-check-pending {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 9px;
}

.imggen-generation-bar {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-surface);
  border-top: 1px solid var(--border-default);
}

.imggen-generation-settings {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}

.imggen-generation-settings span {
  padding: 2px var(--space-2);
  background: var(--bg-subtle);
  border-radius: var(--radius-full);
}

.imggen-cost-note,
.imggen-generate-blocker {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
}

.imggen-generate-blocker {
  color: var(--color-warning-text);
}

@media (max-width: 1180px) {
  .imggen-tool-hint {
    display: none;
  }
}

.imggen-left-tabs {
  display: grid;
  flex-shrink: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: var(--space-1);
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-default);
}

.imggen-left-tab {
  padding: var(--space-2) var(--space-3);
  color: var(--text-tertiary);
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  background: transparent;
  border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
}

.imggen-left-tab:hover {
  color: var(--text-secondary);
  background: var(--bg-hover);
}

.imggen-left-tab.is-active {
  color: var(--color-primary);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}

.imggen-history {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  background: var(--bg-muted);
}

.imggen-history-toolbar {
  display: flex;
  flex-shrink: 0;
  align-items: flex-end;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-default);
}

.imggen-history-room {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: var(--space-1);
}

.imggen-history-control-label {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.imggen-history-room-select {
  width: 100%;
}

.imggen-history-search {
  display: flex;
  min-width: 0;
  flex: 1;
  gap: var(--space-1);
}

.imggen-history-search-input {
  min-width: 0;
  flex: 1;
}

.imggen-history-search-button {
  flex-shrink: 0;
}

.imggen-history-error {
  flex-shrink: 0;
  padding: var(--space-2) var(--space-3);
  color: var(--color-danger-text);
  font-size: var(--font-size-sm);
  background: var(--color-danger-bg);
  border-bottom: 1px solid var(--color-danger-subtle);
}

.imggen-history-list {
  min-height: 0;
  flex: 1;
  padding: var(--space-3);
  overflow-y: auto;
  scroll-behavior: auto;
}

.imggen-history-more {
  display: block;
  margin: 0 auto var(--space-3);
  color: var(--color-primary);
}

.imggen-history-empty {
  margin: auto;
  padding: var(--space-6) var(--space-3);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  text-align: center;
}

.imggen-history-date {
  margin: var(--space-3) 0 var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  text-align: center;
}

.imggen-history-message {
  margin-bottom: var(--space-3);
  padding: var(--space-3);
  color: var(--text-primary);
  font-size: var(--font-size-base);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.imggen-history-message-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.imggen-history-message-identity {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-1);
}

.imggen-history-account {
  overflow: hidden;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.imggen-history-time {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}

.imggen-history-quote {
  flex-shrink: 0;
  color: var(--color-primary);
}

.imggen-history-body-text,
.imggen-history-quoted-text {
  margin: 0;
  line-height: var(--line-height-relaxed);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.imggen-history-system-text {
  margin: 0;
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.imggen-history-quoted-text {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  background: var(--bg-subtle);
  border-left: var(--space-1) solid var(--border-medium);
  border-radius: var(--radius-sm);
}

.imggen-history-attachments {
  margin: var(--space-2) 0 0;
  padding: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  list-style: none;
}

.imggen-history-attachments li {
  padding: var(--space-1) 0;
}

.imggen-history-replies {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-2);
}

.imggen-history-reply {
  padding: var(--space-1) var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  background: var(--bg-subtle);
  border-radius: var(--radius-full);
}

/* imggen branch coordinates / context editing (slice 1) */
.imggen-lineage-single {
  min-width: 100%;
}

.imggen-version-cell {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.imggen-origin-node {
  width: 92px;
  flex-basis: 92px;
  border-style: solid;
  background: var(--bg-muted);
  cursor: default;
}

.imggen-origin-image {
  display: block;
  width: 72px;
  min-height: 58px;
  max-height: 76px;
  object-fit: contain;
  background: var(--bg-subtle);
  border-radius: var(--radius-sm);
}

.imggen-origin-label {
  color: var(--color-primary);
  font-size: 9px;
  font-weight: var(--font-weight-semibold);
}

.imggen-origin-missing {
  display: flex;
  width: 72px;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  background: var(--bg-subtle);
  border-radius: var(--radius-sm);
}

.imggen-branch-chip {
  position: relative;
  z-index: 5;
  flex: 0 0 auto;
}

.imggen-branch-chip > summary {
  padding: 3px 7px;
  color: var(--text-muted);
  font-size: 9px;
  font-weight: var(--font-weight-semibold);
  list-style: none;
  background: var(--bg-subtle);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  cursor: pointer;
}

.imggen-branch-chip > summary::-webkit-details-marker {
  display: none;
}

.imggen-branch-chip.is-multiple > summary {
  color: var(--color-primary);
  background: var(--color-primary-bg);
  border-color: var(--color-primary);
}

.imggen-branch-popover {
  position: absolute;
  z-index: 8;
  bottom: calc(100% + var(--space-1));
  left: 50%;
  display: none;
  width: 210px;
  padding: var(--space-2);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  transform: translateX(-50%);
}

.imggen-branch-chip[open] .imggen-branch-popover {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.imggen-branch-option,
.imggen-branch-create {
  padding: var(--space-1) var(--space-2);
  color: var(--text-secondary);
  font-family: var(--font-family);
  font-size: var(--font-size-xs);
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.imggen-branch-option:hover,
.imggen-branch-create:hover {
  background: var(--bg-hover);
}

.imggen-branch-option.is-current {
  color: var(--text-primary);
  font-weight: var(--font-weight-bold);
}

.imggen-branch-create {
  margin-top: var(--space-1);
  padding-top: var(--space-2);
  color: var(--color-primary);
  border-top: 1px solid var(--border-light);
}

.imggen-new-branch-tag {
  padding: 1px 5px;
  color: var(--color-primary);
  font-size: 8px;
  font-weight: var(--font-weight-bold);
  background: var(--color-primary-bg);
  border-radius: var(--radius-full);
}

.imggen-lineage-overview {
  position: relative;
  display: none;
  min-width: 100%;
  min-height: 100%;
  align-items: center;
  gap: var(--space-7);
  padding: var(--space-3) var(--space-4);
}

.imggen-lineage-overview-mode .imggen-lineage-single {
  display: none;
}

.imggen-lineage-overview-mode .imggen-lineage-overview {
  display: flex;
}

.imggen-lineage-tree-svg {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.imggen-lineage-tree-path {
  fill: none;
  stroke: var(--color-primary-light);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.imggen-overview-origins {
  position: relative;
  z-index: 1;
  display: grid;
  width: 132px;
  flex: 0 0 132px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-1);
  padding: var(--space-2);
  background: var(--bg-muted);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
}

.imggen-overview-origins .imggen-origin-node {
  width: 54px;
  min-height: 68px;
  flex-basis: 54px;
  padding: 2px;
  border-width: 1px;
}

.imggen-overview-origins .imggen-origin-image,
.imggen-overview-origins .imggen-origin-missing {
  width: 46px;
  min-height: 36px;
  max-height: 42px;
}

.imggen-overview-origins .imggen-node-caption {
  font-size: 8px;
}

.imggen-overview-rows {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: var(--space-2);
}

.imggen-overview-row {
  display: flex;
  min-height: 78px;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}

.imggen-overview-row.is-current {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}

.imggen-overview-branch-label {
  width: 142px;
  flex: 0 0 142px;
  color: var(--text-secondary);
  font-family: var(--font-family);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-align: left;
  background: var(--bg-muted);
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.imggen-overview-version-cells {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.imggen-overview-row .imggen-lineage-node {
  width: 58px;
  min-height: 66px;
  flex-basis: 58px;
}

.imggen-overview-row .imggen-version-thumb {
  min-height: 40px;
}

.imggen-overview-row .imggen-version-size {
  display: none;
}

.imggen-origin-slot {
  display: flex;
  width: 100%;
  min-height: 76px;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  padding: var(--space-2);
  color: var(--text-secondary);
  font-family: var(--font-family);
  text-align: left;
  background: var(--color-primary-bg);
  border: 1px dashed var(--color-primary);
  border-radius: var(--radius-lg);
  cursor: pointer;
}

.imggen-origin-slot-image,
.imggen-origin-slot-empty {
  display: flex;
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  align-items: center;
  justify-content: center;
  object-fit: contain;
  color: var(--color-primary);
  font-size: var(--font-size-xl);
  background: var(--bg-surface);
  border-radius: var(--radius-md);
}

.imggen-origin-slot-text {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 2px;
}

.imggen-origin-slot-text span {
  overflow: hidden;
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.imggen-origin-slot-change {
  color: var(--color-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.imggen-asset-library-toggle {
  width: 100%;
  margin-top: var(--space-3);
  padding: var(--space-2);
  color: var(--color-primary);
  font-family: var(--font-family);
  font-size: var(--font-size-xs);
  background: var(--color-primary-bg);
  border: 1px solid var(--color-primary-subtle);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.imggen-asset-library-grid {
  margin-top: var(--space-2);
}

.imggen-ref-context-badge {
  position: absolute;
  z-index: 2;
  top: var(--space-1);
  left: var(--space-1);
  padding: 2px 6px;
  color: var(--text-inverse);
  font-size: 9px;
  font-weight: var(--font-weight-bold);
  background: var(--text-muted);
  border-radius: var(--radius-full);
}

.imggen-ref-context-badge.is-origin {
  background: var(--color-primary);
}

.imggen-origin-picker-backdrop {
  z-index: var(--z-modal-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}

.imggen-origin-picker {
  z-index: var(--z-modal);
  width: min(760px, 100%);
  max-height: min(720px, calc(100vh - 40px));
}

.imggen-origin-picker-header {
  display: flex;
  align-items: center;
}

.imggen-origin-picker-header h3 {
  flex: 1;
  margin: 0;
  font-size: var(--font-size-lg);
}

.imggen-origin-picker-body {
  overflow-y: auto;
}

.imggen-origin-picker-note {
  margin: 0 0 var(--space-3);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.imggen-origin-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: var(--space-3);
}

.imggen-origin-picker-item {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2);
  color: var(--text-secondary);
  font-family: var(--font-family);
  font-size: var(--font-size-xs);
  text-align: left;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.imggen-origin-picker-item:hover {
  border-color: var(--color-primary);
}

.imggen-origin-picker-item img {
  display: block;
  width: 100%;
  height: 104px;
  object-fit: contain;
  background: var(--bg-subtle);
  border-radius: var(--radius-sm);
}

.imggen-origin-picker-item strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.imggen-origin-picker-disabled {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-4);
  padding: var(--space-3);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  background: var(--bg-subtle);
  border: 1px dashed var(--border-medium);
  border-radius: var(--radius-md);
}

.imggen-origin-node[data-asset-id] {
  cursor: pointer;
}

.imggen-origin-node[data-asset-id].is-selected {
  background: var(--color-primary-bg);
}

.imggen-asset-preview-status {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  text-align: center;
  background: var(--bg-subtle);
  border: 1px dashed var(--border-medium);
}

.imggen-asset-preview-status.is-hidden {
  display: none;
}

.imggen-asset-preview-status.is-error {
  color: var(--color-danger-text);
  background: var(--color-danger-bg);
  border-color: var(--color-danger-subtle);
}

/* ===== デザイン制作 (design-prod) ===== */
.dp-overdue { color: var(--danger-color, #b42318); font-weight: 600; }
.dp-designer-settings { display: grid; gap: 10px; max-width: 720px; }
.dp-designer-setting-row { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--border-color); border-radius: 10px; }
.dp-designer-setting-row strong { flex: 1; }
#designProdPanel {
  --dp-ink: #33302a;
  --dp-paper: #f7f4ee;
  --dp-sub: #8f8a80;
  --dp-line: #e6e1d7;
  --dp-off: #eceae4;
  --dp-off-stripe: #dedacf;
  --dp-near: #e8590c;
  --dp-danger: #d43c3c;
  --dp-ok: #2b8a3e;
  background: var(--dp-paper);
}

#designProdPanel.active {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.dp-root,
.dp-drawer,
.dp-toast,
.dp-case-modal {
  font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Zen Kaku Gothic New", sans-serif;
  color: #33302a;
  -webkit-font-smoothing: antialiased;
}

.dp-root {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  color: var(--dp-ink);
  background: var(--dp-paper);
}

.dp-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  min-height: 76px;
  padding: 22px 28px 0;
  background: var(--dp-paper);
}

.dp-heading {
  min-width: 180px;
}

.dp-heading h2,
.dp-drawer-heading h3,
.dp-modal-title {
  margin: 0;
}

.dp-heading h2 {
  color: var(--dp-ink);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .01em;
}

.dp-heading p {
  margin: 3px 0 0;
  color: var(--dp-sub);
  font-size: 11.5px;
  font-weight: 500;
}

.dp-subtabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(51, 48, 42, .07);
}

.dp-subtab {
  min-height: 34px;
  padding: 8px 20px;
  color: var(--dp-sub);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  background: transparent;
  border: 0;
  border-radius: 999px;
  box-shadow: none;
}

.dp-subtab:hover {
  color: var(--dp-ink);
  background: #fbfaf6;
}

.dp-subtab.active {
  color: #fff;
  background: var(--dp-ink);
  border-color: var(--dp-ink);
  box-shadow: none;
}

.dp-create-case {
  min-height: 34px;
  margin-left: auto;
  padding: 7px 16px;
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  background: var(--dp-ink);
  border-color: var(--dp-ink);
  border-radius: 999px;
}

.dp-create-case:hover {
  background: #1f1d19;
  border-color: #1f1d19;
}

.dp-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  padding: 22px 28px 40px;
  overflow: auto;
}

.dp-view {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.dp-muted,
.dp-file-date,
.dp-file-context,
.dp-next-available {
  color: var(--dp-sub);
  font-size: 11.5px;
  font-weight: 700;
}

.dp-empty,
.dp-error-state {
  padding: 28px;
  color: var(--dp-sub);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.dp-error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--dp-danger);
}

.dp-table-container {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: #fff;
  border: 0;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(51, 48, 42, .06);
}

.dp-table-container .table-scroll {
  height: 100%;
  border-radius: inherit;
}

.dp-table-container .table {
  width: 100%;
  color: var(--dp-ink);
  background: #fff;
  border-collapse: collapse;
}

.dp-table-container .table thead th {
  padding: 12px 14px;
  color: var(--dp-sub);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-align: left;
  background: #fff;
  border-bottom: 1px solid var(--dp-line);
}

.dp-table-container .table tbody td {
  padding: 13px 14px;
  color: var(--dp-ink);
  font-size: 13px;
  font-weight: 700;
  vertical-align: middle;
  background: transparent;
  border-bottom: 1px solid #f4f2ec;
}

.dp-table-container .table tbody tr {
  transition: background .12s ease;
}

.dp-table-container .table tbody tr:hover {
  background: #fbfaf6;
}

.dp-cases-table th:nth-child(1) { width: 24%; }
.dp-cases-table th:nth-child(2) { width: 15%; }
.dp-cases-table th:nth-child(3) { width: 8%; }
.dp-cases-table th:nth-child(4) { width: 13%; }
.dp-cases-table th:nth-child(5) { width: 14%; }
.dp-cases-table th:nth-child(6) { width: 14%; }
.dp-cases-table th:nth-child(7) { width: 12%; }

.dp-cases-table tbody tr {
  cursor: pointer;
}

.dp-cases-table tbody tr:focus-visible,
.dp-file-card:focus-visible {
  outline: 2px solid var(--dp-ink);
  outline-offset: -2px;
}

/* 2026-09-25: 案件コードは画面表示から外した（承認#908）。将来の再表示に備えて残置 */
.dp-case-code {
  display: inline;
  color: var(--dp-sub);
  font-size: 11px;
  font-weight: 700;
  text-align: left;
}

.dp-case-title {
  margin-top: 2px;
  overflow: hidden;
  color: var(--dp-ink);
  font-size: 13px;
  font-weight: 800;
  text-align: left;
  text-overflow: ellipsis;
}

.dp-cases-table td:nth-child(5) .badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  color: var(--dp-ink);
  font-size: 12px;
  font-weight: 700;
  background: transparent;
  border: 0;
}

.dp-cases-table td:nth-child(5) .badge::before {
  width: 8px;
  height: 8px;
  background: #b9b9b4;
  border-radius: 50%;
  content: "";
}

.dp-cases-table td:nth-child(5) .badge-info::before { background: #4a7de0; }
.dp-cases-table td:nth-child(5) .badge-warning::before { background: #e6a817; }
.dp-cases-table td:nth-child(5) .badge-success::before { background: #36b24a; }
.dp-cases-table td:nth-child(5) .badge-danger::before { background: var(--dp-danger); }

.dp-calendar-toolbar {
  min-height: 42px;
  margin-bottom: 10px;
  padding: 0;
  background: transparent;
  border: 0;
}

.dp-calendar-toolbar .btn {
  color: var(--dp-sub);
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  background: #fff;
  border: 1px solid var(--dp-line);
  border-radius: 999px;
}

.dp-calendar-range {
  color: var(--dp-ink);
  font-size: 13px;
  font-weight: 800;
}

.dp-calendar-scroll {
  position: relative;
  flex: 1;
  min-height: 360px;
  overflow: auto;
  background: #fff;
  border: 0;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(51, 48, 42, .06);
}

.dp-calendar-grid {
  position: relative;
  width: calc(176px + var(--dp-days-width));
  min-width: 100%;
}

.dp-calendar-header-row,
.dp-calendar-person-row {
  display: grid;
  grid-template-columns: 176px var(--dp-days-width);
}

.dp-calendar-header-row {
  position: sticky;
  top: 0;
  z-index: 20;
}

.dp-calendar-date-row {
  top: 25px;
}

.dp-calendar-header-name {
  position: sticky;
  left: 0;
  z-index: 23;
  background: #fff;
  border-right: 1px solid var(--dp-line);
  border-bottom: 1px solid var(--dp-line);
}

.dp-calendar-months,
.dp-calendar-dates,
.dp-calendar-cells {
  display: flex;
  width: var(--dp-days-width);
}

.dp-calendar-month {
  flex: 0 0 var(--dp-month-width);
  height: 25px;
  padding: 6px 0 1px 8px;
  color: var(--dp-sub);
  font-size: 10.5px;
  font-weight: 800;
  background: #fff;
  border-left: 1px solid var(--dp-line);
  border-bottom: 1px solid var(--dp-line);
}

.dp-calendar-date {
  display: flex;
  flex: 0 0 30px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 39px;
  padding: 2px 0 5px;
  color: var(--dp-sub);
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: #fff;
  border-bottom: 1px solid var(--dp-line);
}

.dp-calendar-date small {
  color: #c2bdb1;
  font-size: 8.5px;
}

.dp-calendar-date-weekend,
.dp-calendar-date-weekend small {
  color: #cf8d8d;
}

.dp-calendar-date-today b {
  min-width: 21px;
  padding: 1px 5px;
  color: #fff;
  text-align: center;
  background: var(--dp-ink);
  border-radius: 999px;
}

.dp-calendar-person-row {
  min-height: var(--dp-row-height);
  border-bottom: 1px solid var(--dp-line);
}

.dp-calendar-name {
  position: sticky;
  left: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 176px;
  height: var(--dp-row-height);
  padding: 0 12px;
  background: #fff;
  border-right: 1px solid var(--dp-line);
}

.dp-avatar {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  background: var(--dp-color);
  border-radius: 50%;
}

.dp-calendar-name-copy {
  min-width: 0;
}

.dp-calendar-person {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  color: var(--dp-ink);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dp-parallel-badge {
  flex: none;
  padding: 0 5px;
  color: var(--dp-near);
  font-size: 9px;
  font-weight: 800;
  line-height: 15px;
  background: #fff;
  border: 1.5px solid var(--dp-near);
  border-radius: 999px;
}

.dp-next-available {
  margin-top: 3px;
  color: var(--dp-ok);
  font-size: 10px;
  white-space: nowrap;
}

.dp-calendar-track {
  position: relative;
  height: var(--dp-row-height);
}

.dp-calendar-cells {
  position: absolute;
  inset: 0;
}

.dp-calendar-cell {
  flex: 0 0 30px;
  height: 100%;
  border-left: 1px solid #f4f2ec;
}

.dp-calendar-cell-weekend {
  background: #faf9f5;
}

.dp-calendar-cell-off {
  background: repeating-linear-gradient(
    -45deg,
    var(--dp-off),
    var(--dp-off) 4px,
    var(--dp-off-stripe) 4px,
    var(--dp-off-stripe) 6px
  );
}

.dp-calendar-bar {
  position: absolute;
  z-index: 5;
  top: var(--dp-y);
  left: var(--dp-x);
  display: flex;
  align-items: center;
  width: var(--dp-w);
  height: 34px;
  padding: 0 11px;
  overflow: hidden;
  color: var(--dp-color);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  text-align: left;
  white-space: nowrap;
  background: rgba(255, 255, 255, .72);
  border: 2px solid var(--dp-color);
  border-radius: 9px;
  cursor: grab;
  box-shadow: none;
  transform: translateX(var(--dp-preview-x, 0));
  transition: box-shadow .15s ease, transform .15s ease;
  touch-action: none;
  user-select: none;
}

.dp-calendar-bar:hover {
  z-index: 8;
  box-shadow: 0 6px 14px rgba(51, 48, 42, .2);
  transform: translateX(var(--dp-preview-x, 0)) translateY(-1px);
}

.dp-calendar-bar-solid {
  color: #fff;
  background: var(--dp-color);
  border-color: var(--dp-color);
  box-shadow: 0 1px 4px rgba(51, 48, 42, .15);
}

.dp-calendar-bar-dashed {
  color: var(--dp-color);
  background: rgba(255, 255, 255, .72);
  border-style: dashed;
}

.dp-calendar-bar-dragging {
  z-index: 30;
  opacity: .82;
  cursor: grabbing;
  box-shadow: 0 8px 18px rgba(51, 48, 42, .22);
  transition: none;
}

.dp-calendar-bar-title {
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.dp-calendar-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 10px;
  cursor: ew-resize;
}

.dp-calendar-handle-left { left: 0; }
.dp-calendar-handle-right { right: 0; }

.dp-calendar-marker {
  position: absolute;
  z-index: 4;
  top: 0;
  bottom: 0;
  left: var(--dp-x);
  width: 0;
  pointer-events: none;
}

.dp-calendar-marker-today {
  width: 2px;
  background: var(--dp-ink);
}

.dp-file-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  align-content: start;
}

.dp-file-card {
  min-width: 0;
  padding: 0;
  overflow: hidden;
  background: #fff;
  border: 0;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(51, 48, 42, .06);
  transition: transform .15s ease, box-shadow .15s ease;
}

.dp-file-gallery .dp-file-card {
  cursor: pointer;
}

.dp-file-gallery .dp-file-card:hover {
  box-shadow: 0 8px 18px rgba(51, 48, 42, .12);
  transform: translateY(-3px);
}

.dp-file-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 120px;
  color: var(--dp-sub);
  background: linear-gradient(120deg, #d9d4c9, #b9b3a5);
  border: 0;
}

.dp-file-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dp-file-icon {
  color: #fff;
  font-size: 17px;
  font-weight: 800;
}

.dp-file-loading {
  color: rgba(255, 255, 255, .95);
  font-size: 11px;
  font-weight: 800;
}

.dp-file-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px 12px;
}

.dp-file-badges,
.dp-file-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.dp-file-badges .badge {
  display: inline-block;
  padding: 1px 6px;
  font-size: 9.5px;
  font-weight: 800;
  line-height: 16px;
  border: 0;
  border-radius: 5px;
}

.dp-file-badges .badge-success {
  color: var(--dp-ok);
  background: #d9f2dd;
}

.dp-file-badges .badge-warning {
  color: var(--dp-near);
  background: #fdeeda;
}

.dp-file-badges .badge-info {
  color: var(--dp-sub);
  background: #efede8;
}

.dp-file-name {
  overflow: hidden;
  color: var(--dp-ink);
  font-size: 12.5px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dp-file-context {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dp-file-date {
  font-size: 10.5px;
}

.dp-file-acceptance {
  color: var(--dp-sub);
  font-size: 11px;
  font-weight: 700;
}

.dp-file-actions .btn {
  font-family: inherit;
  font-size: 10px;
  font-weight: 800;
  border-radius: 999px;
}

.dp-log-toolbar {
  min-height: 42px;
  margin-bottom: 10px;
  padding: 0;
  background: transparent;
  border: 0;
}

.dp-inline-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--dp-sub);
  font-size: 11.5px;
  font-weight: 700;
}

.dp-inline-field .select {
  font-family: inherit;
  font-weight: 700;
  background: #fff;
  border-color: var(--dp-line);
  border-radius: 999px;
}

.dp-log-table th:nth-child(1) { width: 14%; }
.dp-log-table th:nth-child(2) { width: 12%; }
.dp-log-table th:nth-child(3) { width: 12%; }
.dp-log-table th:nth-child(4) { width: 12%; }
.dp-log-table th:nth-child(5) { width: 50%; }

.dp-log-table td:last-child {
  overflow: visible;
  text-align: left;
  white-space: normal;
}

.dp-log-action {
  display: inline-block;
  padding: 1px 8px;
  color: var(--dp-sub);
  font-size: 10px;
  font-weight: 800;
  line-height: 17px;
  white-space: nowrap;
  background: #efede8;
  border-radius: 5px;
}

.dp-log-action-create {
  color: #2b6cb8;
  background: #dce9fb;
}

.dp-log-action-deliver {
  color: var(--dp-ok);
  background: #d9f2dd;
}

.dp-log-detail {
  overflow-wrap: anywhere;
}

.dp-log-details {
  margin-top: 5px;
  color: var(--dp-sub);
  font-size: 10.5px;
}

.dp-log-details summary {
  cursor: pointer;
}

.dp-log-json {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 8px;
  margin-top: 8px;
}

.dp-log-json pre {
  max-height: 180px;
  margin: 0;
  padding: 8px;
  overflow: auto;
  color: var(--dp-ink);
  background: #f7f4ee;
  border-radius: 8px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.dp-load-more {
  align-self: center;
  margin-top: 12px;
  font-family: inherit;
  font-weight: 800;
  border-radius: 999px;
}

.dp-case-modal {
  max-width: 760px;
  color: #33302a;
  background: #fff;
  border-radius: 16px;
}

.dp-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.dp-field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
}

.dp-field-label,
.dp-section-title {
  color: #8f8a80;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
}

.dp-field .input,
.dp-field .select,
.dp-field .textarea {
  width: 100%;
  min-width: 0;
  font-family: inherit;
  border-color: #e6e1d7;
  border-radius: 9px;
}

.dp-form-actions {
  display: flex;
  grid-column: 1 / -1;
  justify-content: flex-end;
}

.dp-drawer-mask {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal-backdrop);
  visibility: hidden;
  background: rgba(51, 48, 42, .3);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.dp-drawer {
  --dp-ink: #33302a;
  --dp-paper: #f7f4ee;
  --dp-sub: #8f8a80;
  --dp-line: #e6e1d7;
  --dp-near: #e8590c;
  --dp-danger: #d43c3c;
  --dp-ok: #2b8a3e;
  position: fixed;
  z-index: var(--z-modal);
  top: 0;
  right: 0;
  width: min(440px, 94vw);
  height: 100vh;
  visibility: hidden;
  color: var(--dp-ink);
  background: #fff;
  box-shadow: -6px 0 26px rgba(51, 48, 42, .18);
  transform: translateX(100%);
  transition: transform var(--transition-normal);
}

.dp-drawer-open {
  visibility: visible;
  opacity: 1;
  transform: translateX(0);
}

.dp-drawer-header {
  position: sticky;
  z-index: 2;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 62px;
  padding: 16px 20px;
  background: #fff;
  border-bottom: 1px solid var(--dp-line);
}

.dp-drawer-heading {
  min-width: 0;
}

.dp-drawer-heading h3 {
  overflow: hidden;
  color: var(--dp-ink);
  font-size: 15px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 2026-09-25: 案件コードは画面表示から外した（承認#908）。将来の再表示に備えて残置 */
.dp-drawer-code {
  color: var(--dp-sub);
  font-size: 10.5px;
  font-weight: 700;
}

.dp-drawer-close {
  color: var(--dp-sub);
  font-family: inherit;
  font-size: 20px;
  background: transparent;
  border: 0;
}

.dp-drawer-body {
  height: calc(100vh - 62px);
  overflow-y: auto;
}

.dp-drawer-section {
  padding: 15px 20px;
  border-bottom: 1px solid #f4f2ec;
}

.dp-section-title {
  margin: 0 0 9px;
  text-transform: uppercase;
}

.dp-item-list,
.dp-link-list,
.dp-drawer-logs {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.dp-item-row,
.dp-link-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 7px 8px;
  color: var(--dp-ink);
  font-size: 12.5px;
  font-weight: 700;
  background: #fbfaf6;
  border-radius: 8px;
}

.dp-item-name,
.dp-link-row a,
.dp-link-row > span:nth-child(2) {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dp-link-row a {
  color: #2b6cb8;
}

.dp-inline-form,
.dp-link-form {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.dp-inline-form .input,
.dp-link-form .input {
  min-width: 0;
  font-family: inherit;
  border-color: var(--dp-line);
  border-radius: 9px;
}

.dp-inline-form .input {
  flex: 1;
}

.dp-link-form .input[name="ref"] {
  flex: 1;
}

.dp-upload-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.dp-upload-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.dp-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.dp-drop-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 20px;
  color: var(--dp-sub);
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.7;
  text-align: center;
  background: #fff;
  border: 2px dashed var(--dp-line);
  border-radius: 12px;
  cursor: pointer;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}

.dp-drop-zone-over,
.dp-drop-zone:focus-visible {
  color: var(--dp-ok);
  background: #f2faf3;
  border-color: var(--dp-ok);
  outline: none;
}

.dp-selected-files {
  color: var(--dp-sub);
  font-size: 11px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.dp-drawer-files {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.dp-drawer .dp-file-card {
  border: 1px solid #f0ede6;
  border-radius: 10px;
  box-shadow: none;
}

.dp-file-card-compact .dp-file-preview {
  height: 64px;
}

.dp-file-card-compact .dp-file-meta {
  padding: 6px 8px;
}

.dp-drawer-log {
  display: grid;
  grid-template-columns: auto minmax(60px, auto) auto;
  align-items: center;
  gap: 4px 8px;
  padding: 5px 0 5px 10px;
  color: var(--dp-sub);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.6;
  border-left: 2px solid var(--dp-line);
}

.dp-drawer-log-time {
  color: var(--dp-sub);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}

.dp-drawer-log-detail {
  grid-column: 1 / -1;
  color: var(--dp-ink);
  overflow-wrap: anywhere;
}

.dp-toast {
  --dp-ink: #33302a;
  position: fixed;
  z-index: var(--z-toast);
  right: auto;
  bottom: 24px;
  left: 50%;
  max-width: min(520px, calc(100vw - 32px));
  padding: 10px 20px;
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  background: var(--dp-ink);
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(51, 48, 42, .2);
  opacity: 0;
  transform: translate(-50%, 90px);
  transition: transform .3s cubic-bezier(.22, .9, .3, 1), opacity .3s;
  pointer-events: none;
}

.dp-toast[data-type="success"],
.dp-toast[data-type="error"] {
  background: var(--dp-ink);
}

.dp-toast-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (max-width: 760px) {
  .dp-cases-table, .dp-cases-table tbody, .dp-cases-table tr, .dp-cases-table td { display: block; width: 100%; }
  .dp-cases-table thead { display: none; }
  .dp-cases-table tr { margin: 0 0 12px; padding: 12px; border: 1px solid var(--border-color); border-radius: 12px; }
  .dp-cases-table td { border: 0; padding: 5px 0; }
  .dp-drawer { width: 100%; max-width: none; }
  .dp-header {
    gap: 10px;
    padding: 14px 14px 0;
  }

  .dp-heading {
    width: calc(100% - 100px);
  }

  .dp-heading p {
    display: none;
  }

  .dp-subtabs {
    order: 3;
    width: 100%;
    overflow-x: auto;
  }

  .dp-subtab {
    flex: 0 0 auto;
    padding-right: 15px;
    padding-left: 15px;
  }

  .dp-create-case {
    margin-left: auto;
  }

  .dp-content {
    padding: 14px;
  }

  .dp-form-grid,
  .dp-upload-meta {
    grid-template-columns: 1fr;
  }

  .dp-link-form {
    flex-wrap: wrap;
  }

  .dp-link-form .input[name="ref"] {
    flex-basis: 100%;
  }

  .dp-drawer-files {
    grid-template-columns: 1fr;
  }
}

/* Staff invoice print guard */
.sinv-print-blocked-note {
  display: none;
}

.sinv-draft-mark {
  margin-top: var(--space-1);
  color: var(--color-danger);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-align: center;
}

@media print {
  body.inv-print-blocked .sinv-paper,
  body.inv-print-blocked .sinv-daily { display: none !important; }
  body.inv-print-blocked .sinv-print-blocked-note { display: block !important; }
}

.cs-hub-review-channel-chip {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  background: var(--bg-subtle);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.cs-hub-review-score {
  color: var(--color-warning-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.02em;
}

/* Expense review: question-based attention queue (S16) */
.er-attention-page {
  color: var(--text-primary);
}

.er-attention-page-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.er-attention-page-head h1 {
  margin: 0;
  font-size: var(--font-size-2xl);
}

.er-attention-page-head > span {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--text-inverse);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.er-attention-page-head small {
  color: var(--text-tertiary);
}

/* 要確認のタブ（レシート仕分け / カードの要確認 / カード台帳）。
   タブ名の横の丸は未処理件数。0件と「台帳の枚数」は灰色にして、
   赤い丸が残っていれば手が要る、と一目で分かるようにする。 */
.er-attention-tabs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border-default);
  margin-bottom: var(--space-4);
}

.er-attention-tab {
  position: relative;
  top: 1px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: none;
  color: var(--text-tertiary);
  font-family: inherit;
  font-size: var(--font-size-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.er-attention-tab:hover {
  background: var(--bg-hover);
  color: var(--text-secondary);
}

.er-attention-tab[aria-selected="true"] {
  background: var(--bg-surface);
  border-color: var(--border-default);
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

.er-attention-tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--bg-surface);
}

.er-attention-tab-count {
  min-width: 20px;
  height: 20px;
  padding: 0 var(--space-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--bg-subtle);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
}

.er-attention-tab-count.is-attention {
  background: var(--color-danger);
  color: var(--text-inverse);
}

.er-attention-tab-count.is-zero {
  background: var(--bg-subtle);
  color: var(--text-muted);
}

.er-attention-tab-hint {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.er-attention-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.er-attention-queue,
.er-attention-focus {
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
}

.er-attention-queue > div {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-default);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.er-attention-queue-item {
  display: flex;
  width: 100%;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 0;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-surface);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}

.er-attention-queue-item:hover {
  background: var(--bg-hover);
}

.er-attention-queue-item.active {
  padding-left: calc(var(--space-3) - 3px);
  border-left: 3px solid var(--color-primary);
  background: var(--color-primary-bg);
}

.er-attention-queue-item:disabled {
  cursor: default;
}

.er-attention-queue-item > span:last-child {
  min-width: 0;
}

.er-attention-queue-item b,
.er-attention-queue-item small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.er-attention-queue-item b {
  font-size: var(--font-size-md);
}

.er-attention-queue-item small {
  margin-top: var(--space-1);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.er-attention-queue-item em {
  display: inline-block;
  margin-top: var(--space-1);
  padding: 1px var(--space-2);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-full);
  background: var(--color-warning-subtle);
  color: var(--color-warning-text);
  font-size: var(--font-size-xs);
  font-style: normal;
}

.er-attention-queue-thumb {
  display: flex;
  flex: 0 0 40px;
  width: 40px;
  height: 52px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
}

.er-attention-queue-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.er-attention-focus {
  padding: var(--space-5);
}

.er-attention-focus > header {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.er-attention-focus > header h1 {
  margin: 0;
  font-size: var(--font-size-xl);
}

.er-attention-focus > header span {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.er-attention-focus > header > strong {
  margin-left: auto;
  font-size: var(--font-size-xl);
}

.er-attention-focus-grid {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: var(--space-6);
}

.er-attention-receipt {
  display: flex;
  min-height: 380px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--bg-input);
  color: var(--text-tertiary);
  cursor: zoom-in;
}

.er-attention-receipt img {
  width: 100%;
  height: 100%;
  max-height: 520px;
  object-fit: contain;
}

.er-attention-receipt span,
.er-attention-receipt small {
  display: block;
}

.er-attention-work {
  min-width: 0;
}

.er-attention-hints {
  margin-bottom: var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.er-attention-question {
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-xl);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}

.er-attention-question h2 {
  margin: var(--space-1) 0;
  font-size: var(--font-size-lg);
}

.er-attention-question p,
.er-attention-step {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-sm);
}

.er-attention-step {
  font-weight: var(--font-weight-semibold);
}

.er-attention-choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.er-attention-choice {
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--border-medium);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}

.er-attention-choice:hover,
.er-attention-choice.picked {
  border-color: var(--color-primary);
}

.er-attention-choice.picked {
  background: var(--color-primary-bg);
}

.er-attention-choice b,
.er-attention-choice span {
  display: block;
}

.er-attention-choice span {
  margin-top: var(--space-1);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.er-attention-input-row {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.er-attention-input-row .input {
  flex: 1;
}

.er-attention-summary {
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
}

.er-attention-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-muted);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.er-attention-edit-toggle {
  gap: var(--space-2);
}

.er-attention-summary-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.er-attention-summary-group > strong {
  display: block;
  grid-column: 1 / -1;
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--border-default);
  background: var(--bg-subtle);
}

.er-attention-summary-group > div {
  display: grid;
  min-width: 0;
  grid-template-columns: 110px minmax(0, 1fr) auto;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--border-light);
}

.er-attention-summary-group span {
  color: var(--text-tertiary);
}

.er-attention-summary-group b {
  min-width: 0;
  overflow-wrap: anywhere;
}

.er-attention-summary-group i {
  color: var(--color-success-dark);
  font-style: normal;
}

.er-attention-full-edit {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--bg-muted);
}

.er-attention-full-edit h3 {
  margin: 0 0 var(--space-3);
}

.er-attention-full-edit fieldset {
  margin-top: var(--space-3);
}

.er-attention-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.er-attention-actions > span {
  margin-left: auto;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.er-attention-actions kbd {
  padding: 1px var(--space-1);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-muted);
}

.er-attention-done {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-6);
  border: 1px solid var(--color-success);
  border-radius: var(--radius-xl);
  background: var(--color-success-bg);
  color: var(--color-success-text);
  text-align: center;
}

.er-attention-done span {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.er-attention-done.hold {
  border-color: var(--color-warning);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}

@media (max-width: 1100px) {
  .er-attention-layout {
    grid-template-columns: 1fr;
  }

  .er-attention-queue {
    display: flex;
    overflow-x: auto;
  }

  .er-attention-queue > div {
    display: none;
  }

  .er-attention-queue-item {
    flex: 0 0 260px;
    border-right: 1px solid var(--border-light);
  }

  .er-attention-focus-grid {
    grid-template-columns: 1fr;
  }

  .er-attention-receipt {
    min-height: 240px;
  }
}

@media (max-width: 680px) {
  .er-attention-summary-group {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* CSハブ: レビュー一覧の3フィルタを344px内の2列に収める */
.cs-hub-root > .cs-hub-list-section {
  width: 100%;
  max-width: 344px;
}

.cs-hub-list-section .cs-hub-toolbar.is-review {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2);
  align-items: center;
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
  /* 基底.toolbar（後方定義）の固定height指定に2段目が隠されるため上書き必須 */
  height: auto;
  min-height: var(--toolbar-height);
}

.cs-hub-toolbar.is-review .cs-hub-search-input,
.cs-hub-toolbar.is-review .cs-hub-filter-row {
  grid-column: 1 / -1;
}

.cs-hub-toolbar.is-review .cs-hub-filter-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2);
}

.cs-hub-toolbar.is-review .cs-hub-filter-label,
.cs-hub-toolbar.is-review .cs-hub-status-filter,
.cs-hub-toolbar.is-review .cs-hub-review-filter {
  min-width: 0;
}

.cs-hub-toolbar.is-review .cs-hub-status-filter,
.cs-hub-toolbar.is-review .cs-hub-review-filter {
  flex: 1;
  width: 100%;
}

/* Quote reply controls: Instagram DM and comment inbox */
.igdm-quote-toggle,
.ci-quote-toggle {
  position: absolute;
  z-index: 3;
  top: -13px;
  right: -57px;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  opacity: 0;
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--font-size-lg);
  line-height: 1;
  cursor: pointer;
  transition: opacity var(--transition-normal), transform var(--transition-normal);
  transform: scale(.92);
}

.igdm-msg.outbound .igdm-quote-toggle,
.ci-msg.outbound .ci-quote-toggle {
  right: auto;
  left: -57px;
}

.igdm-bubble:hover .igdm-quote-toggle,
.igdm-bubble:focus-within .igdm-quote-toggle,
.igdm-quote-toggle:focus-visible,
.ci-bubble:hover .ci-quote-toggle,
.ci-bubble:focus-within .ci-quote-toggle,
.ci-quote-toggle:focus-visible {
  opacity: 1;
  transform: scale(1);
}

.igdm-quote-toggle:focus-visible,
.ci-quote-toggle:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.igdm-quote-toggle:disabled,
.ci-quote-toggle:disabled {
  cursor: not-allowed;
}

.igdm-bubble:hover .igdm-quote-toggle:disabled,
.igdm-bubble:focus-within .igdm-quote-toggle:disabled,
.ci-bubble:hover .ci-quote-toggle:disabled,
.ci-bubble:focus-within .ci-quote-toggle:disabled {
  opacity: .45;
}

.igdm-ai-draft-status.is-error,
.igc-ai-draft-status.is-error {
  color: var(--color-danger-text);
}

@media (hover: none), (pointer: coarse) {
  .igdm-quote-toggle,
  .ci-quote-toggle {
    opacity: 1;
    transform: scale(1);
  }

  .igdm-quote-toggle:disabled,
  .ci-quote-toggle:disabled {
    opacity: .45;
  }
}

/* CS case registration: Instagram DM */
.igdm-tool-btn.igdm-case-register {
  width: auto;
  padding: 0 var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

/* Scan documents S18: 経理「流れ」+ 3タブ集約 */
.keiri-inbox-mode {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin: var(--space-3) var(--space-3) 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.keiri-inbox-mode.is-archive {
  border-color: var(--color-warning-text);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}

.keiri-inbox-mode.is-archive > strong { font-weight: var(--font-weight-bold); }

.keiri-inbox-mode-control {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

.keiri-inbox-mode-control[hidden] { display: none; }

.keiri-inbox-mode-control input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--color-primary);
}

.keiri-inbox-mode-control input:disabled { cursor: wait; }

.keiri-flow-head,
.keiri-flow-list-head,
.keiri-connection-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.keiri-flow-head {
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.keiri-flow-head h2,
.keiri-flow-head p,
.keiri-flow-list-head h3,
.keiri-connection-head h3,
.keiri-connections > h2 {
  margin: 0;
}

.keiri-flow-head p {
  margin-top: 2px;
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}

.keiri-flow-kanban {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) 24px minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2);
  align-items: stretch;
}

.keiri-flow-arrow {
  display: grid;
  place-items: center;
  color: var(--text-tertiary);
}

.keiri-flow-card {
  display: grid;
  min-width: 0;
  min-height: 92px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: start;
  gap: 5px var(--space-2);
  padding: 10px 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.keiri-flow-card:hover,
.keiri-flow-card.selected {
  border-color: var(--color-primary);
}

.keiri-flow-card.selected {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 12%, transparent);
}

.keiri-flow-card.business { border-top: 3px solid var(--color-primary); }
.keiri-flow-card.private { border-top: 3px solid #a855f7; }
.keiri-flow-card.trash { border-top: 3px solid #9ca3af; }

.keiri-flow-card-title {
  overflow: hidden;
  font-size: 12.5px;
  font-weight: var(--font-weight-bold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.keiri-flow-card > strong {
  font-size: 20px;
  line-height: 1;
  white-space: nowrap;
}

.keiri-flow-card > small {
  grid-column: 1 / -1;
  color: var(--text-tertiary);
  font-size: 10.5px;
  line-height: 1.45;
}

.keiri-flow-card > small.danger { color: var(--color-danger-text); font-weight: var(--font-weight-semibold); }

.keiri-flow-list-head {
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.keiri-connections {
  display: grid;
  gap: var(--space-3);
}

.keiri-connections > .card { margin: 0; }
.keiri-connection-head { margin-bottom: var(--space-3); }

.keiri-binding-grid {
  display: grid;
  grid-template-columns: minmax(120px, 180px) minmax(0, 1fr);
  gap: 8px 16px;
  font-size: 13px;
}

.keiri-drive-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(100px, 1fr));
  gap: var(--space-2);
}

.keiri-drive-kpis > div {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}

.keiri-drive-kpis strong { font-size: var(--font-size-xl); }

.keiri-watcher-state {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-success-bg);
}

.keiri-watcher-state.danger {
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
}

.er-flow-filters { border-bottom: 1px solid var(--border-default); }

@media (max-width: 1200px) {
  .keiri-flow-kanban {
    grid-template-columns: repeat(3, minmax(180px, 1fr));
  }
  .keiri-flow-arrow { display: none; }
  .keiri-drive-kpis { grid-template-columns: repeat(3, minmax(120px, 1fr)); }
}

/* Scan documents S20: フラットバー + ギャラリー */
.keiri-flow-bar {
  display: flex;
  min-height: 58px;
  align-items: stretch;
  padding: 0 6px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}

.keiri-flow-mini {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-4) 0 var(--space-2);
  border-right: 1px solid var(--border-default);
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  white-space: nowrap;
}
.keiri-flow-mini b { color: var(--text-secondary); }
.keiri-flow-mini a { color: inherit; text-decoration: none; }
.keiri-flow-mini a:hover { color: var(--color-primary); text-decoration: underline; }
.keiri-flow-mini.is-warning { color: var(--color-warning-text); }
.keiri-flow-mini.is-danger { color: var(--color-danger-text); font-weight: var(--font-weight-semibold); }

.keiri-flow-tabs { display: flex; flex: 1; align-items: stretch; }
.keiri-flow-tab {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 0 22px;
  border: 0;
  background: none;
  color: var(--text-secondary);
  text-align: left;
  cursor: pointer;
}
.keiri-flow-tab + .keiri-flow-tab::before {
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 0;
  border-left: 1px solid var(--border-default);
  content: "";
}
.keiri-flow-tab > span { display: flex; align-items: baseline; gap: 7px; font-size: var(--font-size-sm); }
.keiri-flow-tab > span b { color: var(--text-primary); font-size: var(--font-size-lg); }
.keiri-flow-tab > small { color: var(--text-tertiary); font-size: 11.5px; white-space: nowrap; }
.keiri-flow-tab:hover > span { color: var(--text-primary); }
.keiri-flow-tab.selected > span,
.keiri-flow-tab.selected > span b { color: var(--color-primary); }
.keiri-flow-tab.selected::after {
  position: absolute;
  right: 16px;
  bottom: 0;
  left: 16px;
  border-bottom: 3px solid var(--color-primary);
  border-radius: var(--radius-sm);
  content: "";
}
.keiri-flow-status-link { color: inherit; font-weight: var(--font-weight-semibold); text-decoration: none; }
.keiri-flow-status-link.is-attention { color: var(--color-warning-text); }
.keiri-flow-status-link.is-completed { color: var(--color-success-text); }
.keiri-flow-status-link:hover { text-decoration: underline; }
.keiri-flow-status-sep { margin: 0 4px; color: var(--border-medium); }
.keiri-flow-bar-link {
  display: flex;
  align-items: center;
  padding: 0 var(--space-3);
  border-left: 1px solid var(--border-default);
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  text-decoration: none;
  white-space: nowrap;
}
.keiri-flow-bar-link:hover { color: var(--color-primary); }
.keiri-flow-asof { display: block; margin-top: 4px; text-align: right; font-size: var(--font-size-xs); }

.keiri-flow-list-head { justify-content: flex-start; gap: var(--space-3); }
.keiri-view-toggle {
  display: flex;
  gap: 2px;
  margin-left: auto;
  padding: 2px;
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
}
.keiri-view-toggle button {
  padding: 4px 14px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  cursor: pointer;
}
.keiri-view-toggle button.active { background: var(--bg-surface); box-shadow: var(--shadow-xs); color: var(--text-primary); font-weight: var(--font-weight-semibold); }
.keiri-logical-trash-note { margin: calc(-1 * var(--space-2)) 0 var(--space-2); color: var(--text-tertiary); font-size: var(--font-size-xs); }
.keiri-logical-trash-note-archive { margin-top: var(--space-2); }

.keiri-archive-search {
  flex-wrap: wrap;
  align-items: flex-end;
  border-bottom: 1px solid var(--border-default);
}
.keiri-archive-search-field {
  display: flex;
  min-width: 128px;
  flex: 1 1 128px;
  flex-direction: column;
  gap: var(--space-1);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
}
.keiri-archive-search-check {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}
.keiri-archive-search-check input { accent-color: var(--color-primary); }

/* 書類の内容検索（一覧の絞り込みとは別の入力・別の結果領域） */
.keiri-content-search-field { min-width: 320px; flex: 3 1 320px; }
.keiri-content-results {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-subtle);
}
.keiri-content-result {
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}
.keiri-content-result-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}
.keiri-content-result-vendor { font-weight: 600; color: var(--text-primary); }
.keiri-content-result-summary { margin: 0 0 var(--space-1); color: var(--text-primary); }
.keiri-content-result-excerpt {
  margin: 0;
  padding: var(--space-2);
  border-left: 3px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  white-space: pre-wrap;
  word-break: break-word;
}
.keiri-content-note { color: var(--text-secondary); font-size: var(--font-size-sm); }
.keiri-content-warning { color: var(--color-warning-text, var(--text-primary)); font-size: var(--font-size-sm); }
.keiri-archive-table th,
.keiri-archive-table td { white-space: nowrap; }
.keiri-archive-table .keiri-archive-vendor,
.keiri-archive-table .keiri-archive-storage {
  overflow: hidden;
  max-width: 240px;
  text-overflow: ellipsis;
}
.keiri-archive-edit-cell.is-editable { cursor: text; }
.keiri-archive-edit-cell.is-editable:hover { background: var(--color-primary-bg); }
.keiri-archive-edit-cell.is-saving { cursor: wait; }
.keiri-archive-cell-value,
.keiri-archive-cell-note {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}
.keiri-archive-cell-note {
  max-width: 260px;
  margin-top: var(--space-1);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}
.keiri-archive-editor {
  width: 100%;
  min-width: 112px;
  box-sizing: border-box;
}
.keiri-archive-thumb { padding: 0; cursor: zoom-in; }
.keiri-archive-thumb img { display: block; object-fit: contain; }

.keiri-doc-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); gap: var(--space-3); padding: var(--space-3); }
.keiri-doc-card { position: relative; overflow: hidden; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-surface); }
.keiri-doc-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); }
.keiri-doc-check { position: absolute; z-index: 2; top: 8px; left: 8px; width: 17px; height: 17px; accent-color: var(--color-primary); }
.keiri-doc-image {
  position: relative;
  display: flex;
  width: 100%;
  height: 200px;
  max-width: 256px;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-subtle);
  cursor: zoom-in;
}
.keiri-doc-image img { width: 100%; height: 100%; object-fit: contain; }
.keiri-doc-state { position: absolute; top: 0; right: 0; padding: 3px 10px; border-radius: 0 0 0 var(--radius-md); background: color-mix(in srgb, var(--bg-surface) 92%, transparent); color: var(--text-tertiary); font-size: 11px; }
.keiri-doc-state.is-attention { color: var(--color-warning-text); font-weight: var(--font-weight-bold); }
.keiri-doc-state.is-completed { color: var(--color-success-text); font-weight: var(--font-weight-bold); }
.keiri-doc-info { padding: 8px 12px 10px; }
.keiri-doc-info > strong { display: block; overflow: hidden; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.keiri-doc-meta { display: flex; justify-content: space-between; gap: var(--space-2); margin-top: 2px; color: var(--text-secondary); font-size: 11.5px; }
.keiri-doc-meta b { color: var(--text-primary); font-size: 12.5px; }
.keiri-doc-action { display: inline-block; margin-top: 6px; color: var(--color-primary); font-size: var(--font-size-xs); text-decoration: none; }
.keiri-doc-action:hover { text-decoration: underline; }

@media (max-width: 1200px) {
  .keiri-flow-bar { overflow-x: auto; }
  .keiri-flow-tab { padding: 0 14px; }
}

.sns-comment-actions { gap: var(--space-2); }

/* Yahoo画像判定 */
#yahooImageJudgePanel { min-height: 0; overflow: hidden; }
.yij-page {
  display: flex;
  height: 100%;
  min-height: 0;
  flex-direction: column;
  padding: var(--space-3);
  background: var(--bg-body);
}
.yij-tab-list {
  display: flex;
  flex: none;
  gap: var(--space-2);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-default);
}
.yij-tab-button {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  color: var(--text-tertiary);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--font-size-md);
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.yij-tab-button:hover { border-color: var(--color-primary); color: var(--color-primary); }
.yij-tab-button:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.yij-tab-button[aria-selected="true"] {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--text-inverse);
  font-weight: var(--font-weight-bold);
}
.yij-tab-panel { padding-top: var(--space-3); }
.yij-tab-panel[hidden] { display: none; }
.yij-tab-panel-catalog {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
}
.yij-tab-panel-precheck {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
}
.yij-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--bg-surface);
}
.yij-last-run { display: flex; align-items: baseline; gap: var(--space-2); min-width: 0; }
.yij-meta-label { color: var(--text-tertiary); font-size: var(--font-size-sm); }
.yij-meta-detail { color: var(--text-tertiary); font-size: var(--font-size-sm); }
.yij-header-actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.yij-auto-note { color: var(--text-tertiary); font-size: var(--font-size-xs); }
.yij-catalog-warning { margin: var(--space-2) 0 0; }
.yij-request-status {
  display: flex;
  min-height: 30px;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-right: 1px solid var(--border-default);
  border-left: 1px solid var(--border-default);
  background: var(--bg-surface);
  font-size: var(--font-size-sm);
}
.yij-request-copy { color: var(--text-secondary); }
.yij-request-error { overflow: hidden; color: var(--color-danger-text); text-overflow: ellipsis; white-space: nowrap; }
.yij-toolbar {
  border: 1px solid var(--border-default);
  border-bottom: 0;
  background: var(--bg-surface);
}
.yij-risky-toggle { display: inline-flex; align-items: center; color: var(--text-secondary); cursor: pointer; }
.yij-risky-toggle input { accent-color: var(--color-primary); }
.yij-table-container {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: var(--bg-surface);
}
.yij-table-scroll { min-height: 200px; flex: 1; }
.yij-table { min-width: 1190px; }
.yij-table th { position: sticky; z-index: var(--z-sticky); top: 0; }
.yij-table td { height: 68px; }
.yij-thumbnail {
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-muted);
  object-fit: contain;
}
.yij-thumbnail-empty { color: var(--text-muted); font-size: var(--font-size-xs); }
.yij-code { font-weight: var(--font-weight-semibold); }
.yij-sales { font-variant-numeric: tabular-nums; font-weight: var(--font-weight-semibold); }
.yij-verdict-cell { white-space: normal; }
.yij-verdict-note,
.yij-conflict-note { display: block; margin-top: var(--space-1); line-height: var(--line-height-tight); }
.yij-verdict-note { color: var(--text-tertiary); font-size: var(--font-size-xs); }
.yij-conflict-note { color: var(--color-danger-text); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); }
.yij-deadline-soon { color: var(--color-danger-text); font-weight: var(--font-weight-bold); }
.yij-badge-danger { background: var(--color-danger-subtle); color: var(--color-danger-text); }
.yij-badge-warning { background: var(--color-warning-subtle); color: var(--color-warning-text); }
.yij-badge-success { background: var(--color-success-subtle); color: var(--color-success-text); }
.yij-badge-neutral { background: var(--bg-subtle); color: var(--text-tertiary); }
.yij-pagination { display: flex; align-items: center; gap: var(--space-1); }

.yij-precheck-card {
  margin-top: var(--space-2);
  padding: var(--space-3);
}

.yij-precheck-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.yij-precheck-title {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-lg);
}

.yij-precheck-hint {
  margin: var(--space-1) 0 0;
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}

.yij-precheck-note {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--color-info);
  border-radius: var(--radius-md);
  background: var(--bg-muted);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.yij-precheck-note p { margin: 0; }
.yij-precheck-note p + p { margin-top: var(--space-1); }

.yij-precheck-layout {
  display: flex;
  align-items: stretch;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.yij-precheck-picker {
  display: flex;
  min-height: 78px;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-3);
  border: 1px dashed var(--border-medium);
  border-radius: var(--radius-md);
  background: var(--bg-muted);
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.yij-precheck-picker span {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}

.yij-precheck-picker:hover,
.yij-precheck-picker:focus,
.yij-precheck-picker.is-dragover {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
  outline: none;
}

.yij-file-input { display: none; }

.yij-precheck-preview {
  display: flex;
  min-width: 300px;
  flex: 1;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}

.yij-precheck-preview[hidden] { display: none; }

.yij-precheck-image {
  width: 76px;
  height: 76px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-muted);
  object-fit: contain;
}

.yij-precheck-preview-info {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.yij-precheck-filename {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yij-precheck-error { margin: var(--space-2) 0 0; }

.yij-precheck-status {
  display: flex;
  min-height: 30px;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-light);
  font-size: var(--font-size-sm);
  flex-wrap: wrap;
}

.yij-precheck-empty,
.yij-precheck-meta,
.yij-precheck-occupancy {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}

.yij-worker-stopped {
  color: var(--color-danger-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.yij-precheck-result {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.yij-precheck-result .yij-verdict-note { flex-basis: 100%; }

.yij-janitor-status {
  padding: var(--space-1) var(--space-3) 0;
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  text-align: right;
}

.yij-janitor-status.is-overdue {
  color: var(--color-danger-text);
  font-weight: var(--font-weight-semibold);
}

.yij-history-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-3);
  min-height: 0;
  padding: var(--space-4);
}
.yij-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.yij-history-title {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-lg);
}
.yij-history-controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.yij-history-scope {
  display: inline-flex;
  align-items: center;
  color: var(--text-secondary);
  cursor: pointer;
}
.yij-history-scope input { accent-color: var(--color-primary); }
.yij-history-scroll { min-height: 180px; }
.yij-history-table { min-width: 960px; }
.yij-history-table th { position: sticky; z-index: var(--z-sticky); top: 0; }
.yij-history-row td { vertical-align: middle; }
.yij-history-thumb-cell { width: 76px; }
.yij-history-thumbnail {
  display: block;
  width: 56px;
  height: 56px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-muted);
  object-fit: contain;
}
.yij-history-thumb-empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  min-height: 40px;
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  text-align: center;
}
.yij-history-file { min-width: 190px; }
.yij-history-filename,
.yij-history-file-meta,
.yij-history-staff { display: block; }
.yij-history-filename {
  overflow: hidden;
  max-width: 260px;
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.yij-history-file-meta,
.yij-history-staff {
  margin-top: var(--space-1);
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}
.yij-history-date {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.yij-history-verdict { min-width: 180px; white-space: normal; }
.yij-history-state { min-width: 110px; }
.yij-history-memo {
  min-width: 170px;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  white-space: normal;
}
.yij-history-more { align-self: center; }

@media (max-width: 900px) {
  .yij-precheck-layout { flex-direction: column; }
  .yij-precheck-preview { min-width: 0; }
  .yij-history-header { align-items: flex-start; flex-direction: column; }
}

/* 楽天画像判定（共通部品は yij-* を再利用） */
.rij-page { min-width: 0; }
.rij-page .yij-last-run strong { color: var(--text-primary); font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); }
.rij-table-container { min-height: 360px; }
.rij-table { min-width: 1100px; }
.rij-row { background: var(--bg-surface); }
.rij-code-cell,
.rij-item-cell,
.rij-total-cell,
.rij-action-cell { vertical-align: middle; white-space: normal; }
.rij-item-cell > *,
.rij-total-cell > * { display: block; margin-bottom: var(--space-1); }
.rij-total-cell > .badge { display: inline-block; }
.rij-action-cell .btn { margin: var(--space-1) var(--space-1) var(--space-1) 0; }
.rij-manage-number { font-variant-numeric: tabular-nums; }
.rij-product-title { color: var(--text-secondary); font-size: var(--font-size-sm); line-height: var(--line-height-normal); }
.rij-inline-warning,
.rij-image-empty { display: block; color: var(--color-warning-text); font-size: var(--font-size-xs); }
.rij-axis-summary { display: block; margin-top: var(--space-1); color: var(--text-secondary); font-size: var(--font-size-xs); line-height: var(--line-height-tight); }
.rij-axis-symbol-danger { color: var(--color-danger-text); font-weight: var(--font-weight-bold); }
.rij-axis-symbol-warning { color: var(--color-warning-text); font-weight: var(--font-weight-bold); }
.rij-axis-symbol-success { color: var(--color-success-text); font-weight: var(--font-weight-bold); }
.rij-axis-symbol-neutral { color: var(--text-muted); font-weight: var(--font-weight-semibold); }
.rij-sku-cell { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rij-sku-cell span { display: inline-block; margin-right: var(--space-1); }
.rij-sku-danger,
.rij-sku-error { color: var(--color-danger-text); font-weight: var(--font-weight-semibold); }
.rij-sku-warning { color: var(--color-warning-text); font-weight: var(--font-weight-semibold); }
.rij-sales-cell { font-variant-numeric: tabular-nums; font-weight: var(--font-weight-semibold); white-space: nowrap; }
.rij-notes { padding: var(--space-2) var(--space-3); color: var(--text-secondary); font-size: var(--font-size-xs); }
.rij-notes p { margin: var(--space-1) 0; }
.rij-precheck-setup { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border-default); }
.rij-precheck-setup[hidden] { display: none; }
.rij-precheck-setup input[type="file"] { max-width: 320px; }
.rij-precheck-warning { margin: var(--space-3) 0; }
.rij-history-table { min-width: 900px; }

/* 未入金キャンセル: かんばん / タブ / 状態タグ */
:root {
  --ucnb-purple-subtle: #ede9fe;
  --ucnb-purple-text: #5b21b6;
}

.ucnb-kanban-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-3) var(--space-3) var(--space-2);
}
.ucnb-kanban-title { color: var(--text-secondary); font-size: var(--font-size-md); font-weight: var(--font-weight-bold); }
.ucnb-live-pill {
  border: 0;
  border-radius: var(--radius-full);
  padding: 3px 10px;
  background: var(--color-success-subtle);
  color: var(--color-success-text);
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}
.ucnb-live-pill.is-off { background: var(--color-warning-subtle); color: var(--color-warning-text); }
.ucnb-live-pill.is-paused { background: var(--color-danger-subtle); color: var(--color-danger-text); }
.ucnb-live-pill small { font-weight: var(--font-weight-medium); opacity: .85; }
.ucnb-kanban {
  display: flex;
  height: 280px;
  min-height: 280px;
  max-height: 280px;
  align-items: stretch;
  flex: 0 0 280px;
  overflow-x: auto;
  margin: 0 var(--space-3) var(--space-4);
  padding-bottom: var(--space-2);
}
.ucnb-kanban-loading { width: 100%; padding: var(--space-5); color: var(--text-muted); text-align: center; }
.ucnb-kanban-column {
  display: flex;
  min-width: 170px;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
  cursor: pointer;
  transition: box-shadow var(--transition-normal);
}
.ucnb-kanban-column:hover { box-shadow: var(--shadow-md); }
.ucnb-kanban-column.is-active { outline: 2px solid var(--color-primary); }
.ucnb-kanban-column.is-dim { opacity: .85; }
.ucnb-kanban-column-head {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) 10px;
  border-bottom: 1px solid var(--border-default);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
}
.ucnb-kanban-column-head.is-gray { background: var(--bg-subtle); color: var(--text-tertiary); }
.ucnb-kanban-column-head.is-blue { background: var(--color-primary-subtle); color: var(--color-primary-active); }
.ucnb-kanban-column-head.is-amber { background: var(--color-warning-subtle); color: var(--color-warning-text); }
.ucnb-kanban-column-head.is-purple { background: var(--ucnb-purple-subtle); color: var(--ucnb-purple-text); }
.ucnb-kanban-column-head.is-green { background: var(--color-success-subtle); color: var(--color-success-text); }
.ucnb-kanban-column-head.is-red { background: var(--color-danger-subtle); color: var(--color-danger-text); }
.ucnb-kanban-count { margin-left: auto; border-radius: var(--radius-full); padding: 0 var(--space-2); background: var(--bg-surface); font-size: var(--font-size-base); }
.ucnb-kanban-column-body { display: flex; min-height: 96px; flex: 1 1 auto; flex-direction: column; gap: 6px; overflow-y: auto; padding: var(--space-2); }
.ucnb-kanban-card { border: 1px solid var(--border-default); border-radius: var(--radius-xl); padding: 6px var(--space-2); background: var(--bg-surface); box-shadow: var(--shadow-sm); }
.ucnb-kanban-card-no { overflow: hidden; font-size: var(--font-size-base); font-weight: var(--font-weight-bold); text-overflow: ellipsis; white-space: nowrap; }
.ucnb-kanban-card-sub { margin-top: 1px; color: var(--text-tertiary); font-size: var(--font-size-sm); }
.ucnb-kanban-card-why { margin-top: 3px; border-radius: var(--radius-md); padding: 2px var(--space-1); background: var(--color-warning-bg); color: var(--color-warning-text); font-size: var(--font-size-sm); white-space: normal; }
.ucnb-kanban-empty, .ucnb-kanban-more { color: var(--text-tertiary); font-size: var(--font-size-sm); text-align: center; }
.ucnb-kanban-empty { padding: 14px var(--space-1); }
.ucnb-kanban-foot { padding: 0 10px var(--space-2); color: var(--text-tertiary); font-size: var(--font-size-xs); }
.ucnb-kanban-today { padding: var(--space-1) var(--space-2) 0; color: var(--color-primary-active); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.ucnb-kanban-arrow { display: flex; align-items: center; flex-shrink: 0; padding: 0 3px; color: var(--border-medium); font-size: var(--font-size-2xl); user-select: none; }
.ucnb-kanban-note { margin: calc(var(--space-3) * -1) var(--space-3) var(--space-3); color: var(--text-tertiary); font-size: var(--font-size-sm); }

.ucnb-tabs { display: flex; gap: 2px; margin: 0 var(--space-3); }
.ucnb-tab {
  border: 1px solid var(--border-default);
  border-bottom: 0;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: var(--space-2) 18px;
  background: var(--bg-subtle);
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
}
.ucnb-tab.is-active { background: var(--bg-surface); color: var(--text-primary); }
.ucnb-tab-mini { margin-left: var(--space-1); color: var(--color-success-text); font-size: var(--font-size-xs); }
.ucnb-tab-mini.is-off { color: var(--color-warning-text); }
.ucnb-tab-mini.is-paused { color: var(--color-danger-text); }
.ucnb-panel { margin: 0 var(--space-3) var(--space-3); border: 1px solid var(--border-default); border-radius: 0 var(--radius-xl) var(--radius-xl) var(--radius-xl); background: var(--bg-surface); }
/* 42px top nav + 39px kanban heading + 280px kanban + 16px gap
   + 36px tabs + 72px list toolbars + 35px panel spacing/borders = 520px. */
.ucnb-table-scroll {
  max-height: max(240px, calc(100vh - 520px));
  overflow-x: auto;
  overflow-y: auto;
}
.ucnb-table-scroll table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fff;
  box-shadow: 0 1px 0 var(--border-default);
}
.ucnb-filter-note { border: 1px solid var(--color-primary-subtle); border-radius: var(--radius-full); padding: 3px 10px; background: var(--color-primary-bg); color: var(--color-primary); font-size: var(--font-size-base); }
.ucnb-filter-note button { border: 0; padding: 0; background: none; color: inherit; cursor: pointer; font: inherit; font-weight: var(--font-weight-bold); }
.ucnb-state-tag { display: inline-block; border-radius: var(--radius-lg); padding: 1px var(--space-2); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); white-space: nowrap; }
.ucnb-state-tag.is-gray { background: var(--bg-subtle); color: var(--text-tertiary); }
.ucnb-state-tag.is-blue { background: var(--color-primary-subtle); color: var(--color-primary-active); }
.ucnb-state-tag.is-amber { background: var(--color-warning-subtle); color: var(--color-warning-text); }
.ucnb-state-tag.is-purple { background: var(--ucnb-purple-subtle); color: var(--ucnb-purple-text); }
.ucnb-state-tag.is-green { background: var(--color-success-subtle); color: var(--color-success-text); }
.ucnb-state-tag.is-red { background: var(--color-danger-subtle); color: var(--color-danger-text); }

.ucnb-settings-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.ucnb-settings-card { min-width: 0; border: 1px solid var(--border-default); border-radius: var(--radius-xl); padding: 14px; }
.ucnb-settings-card h3 { color: var(--text-secondary); font-size: var(--font-size-md); }
.ucnb-settings-title-row, .ucnb-status-summary, .ucnb-settings-row { display: flex; align-items: center; gap: var(--space-3); }
.ucnb-settings-title-row { margin-bottom: var(--space-3); }
.ucnb-settings-title-row .btn { margin-left: auto; }
.ucnb-status-summary { flex-wrap: wrap; margin-bottom: var(--space-2); }
.ucnb-settings-row { min-height: 46px; border-bottom: 1px dashed var(--border-light); padding: var(--space-2) 0; }
.ucnb-settings-label { width: 150px; flex-shrink: 0; color: var(--text-secondary); font-size: var(--font-size-base); }
.ucnb-settings-hint { color: var(--text-tertiary); font-size: var(--font-size-sm); }
.ucnb-settings-help { margin-top: var(--space-3); }
.ucnb-settings-help summary { color: var(--color-primary); cursor: pointer; font-size: var(--font-size-base); }
.ucnb-settings-help div { padding: var(--space-2) var(--space-1) 0; color: var(--text-secondary); font-size: var(--font-size-base); line-height: var(--line-height-relaxed); }
.ucnb-settings-subtitle { margin: var(--space-4) 0 var(--space-2); color: var(--text-secondary); font-size: var(--font-size-md); }
.ucnb-timeline { list-style: none; }
.ucnb-timeline li { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; }
.ucnb-timeline-dot { display: flex; width: 22px; height: 22px; align-items: center; justify-content: center; flex-shrink: 0; border-radius: var(--radius-full); background: var(--bg-subtle); font-size: var(--font-size-sm); }
.ucnb-timeline-dot.is-ok { background: var(--color-success-subtle); }
.ucnb-timeline-dot.is-wait { background: var(--color-info-subtle); }
.ucnb-timeline-dot.is-error { background: var(--color-danger-subtle); }
.ucnb-timeline li div { font-size: var(--font-size-md); }
.ucnb-timeline small { display: block; color: var(--text-tertiary); }

@media (max-width: 900px) {
  .ucnb-settings-grid { grid-template-columns: 1fr; }
  .ucnb-settings-row { align-items: flex-start; flex-direction: column; gap: var(--space-2); }
  .ucnb-settings-label { width: auto; }
}
.yij-cookie-action-wrapper {
  display: inline-flex;
}

.yij-cookie-warning {
  margin: 6px 0 10px;
  color: var(--danger-color, #b42318);
  font-size: 12px;
  line-height: 1.5;
}

.yij-precheck-picker[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.6;
}

/* === 商品開発: マトリクス解析 S2' workflow === */
/* .mtx-pageはmax-width 1440px中央寄せのため、外側パネルまでダークで塗る（白帯防止） */
#workProductDevMatrixAnalysisPanel {
  background: #0d0d0d;
}
#pdMatrixAnalysisRoot {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: #0d0d0d;
}

.mtx-page {
  --mtx-page-bg: #0d0d0d;
  --mtx-surface-1: #1a1a19;
  --mtx-surface-2: #232322;
  --mtx-surface-3: #2c2c2a;
  --mtx-text-primary: #ffffff;
  --mtx-text-secondary: #c3c2b7;
  --mtx-text-muted: #898781;
  --mtx-grid: #2c2c2a;
  --mtx-baseline: #4a4a47;
  --mtx-border: rgba(255, 255, 255, 0.1);
  --mtx-series-0: #3987e5;
  --mtx-series-1: #d95926;
  --mtx-series-2: #199e70;
  --mtx-series-3: #ae7be3;
  --mtx-series-4: #e0c341;
  --mtx-series-5: #e66aa9;
  --mtx-series-6: #38b9c7;
  --mtx-series-7: #b8e35a;
  --mtx-accent: #3987e5;
  --mtx-accent-hover: #4b95ef;
  --mtx-accent-soft: rgba(57, 135, 229, 0.18);
  --mtx-good: #0ca30c;
  --mtx-good-soft: rgba(12, 163, 12, 0.18);
  --mtx-good-text: #7fe07f;
  --mtx-danger: #ef6a6a;
  --mtx-warning: #f0b45a;
  --mtx-shadow: 0 10px 32px rgba(0, 0, 0, 0.5);
  --mtx-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--space-5);
  flex-direction: column;
  gap: var(--space-4);
  color: var(--mtx-text-primary);
  background: var(--mtx-page-bg);
  color-scheme: dark;
}
.mtx-page h2,
.mtx-page h3,
.mtx-page p { margin: 0; }
.mtx-page h2 { font-size: var(--font-size-3xl); }
.mtx-page h3 { font-size: var(--font-size-xl); }
.mtx-workflow-page,
.mtx-boards-page { position: relative; }

.mtx-page .btn {
  border-color: var(--mtx-border);
  background: var(--mtx-surface-2);
  color: var(--mtx-text-primary);
}
.mtx-page .btn:hover { background: var(--mtx-surface-3); }
.mtx-page .btn-primary {
  border-color: var(--mtx-accent);
  background: var(--mtx-accent);
  color: var(--mtx-text-primary);
  box-shadow: 0 4px 14px var(--mtx-accent-soft);
}
.mtx-page .btn-primary:hover { background: var(--mtx-accent-hover); }
.mtx-page .btn-ghost { border-color: transparent; background: transparent; color: var(--mtx-text-secondary); }
.mtx-page .btn-ghost:hover { background: var(--mtx-surface-3); color: var(--mtx-text-primary); }
.mtx-page .btn[disabled] { opacity: 0.4; box-shadow: none; cursor: not-allowed; }
.mtx-page .input,
.mtx-page .select {
  border-color: var(--mtx-border);
  background: var(--mtx-surface-1);
  color: var(--mtx-text-primary);
}
.mtx-page .loading-state,
.mtx-page .empty-state { color: var(--mtx-text-muted); }
.mtx-page .mtx-field {
  display: flex;
  min-width: 220px;
  flex-direction: column;
  gap: var(--space-1);
  color: var(--mtx-text-secondary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}
.mtx-page .mtx-field .input { width: 100%; }
.mtx-page .mtx-segmented {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid var(--mtx-border);
  border-radius: var(--radius-md);
  background: var(--mtx-surface-1);
}
.mtx-page .mtx-segment {
  min-height: 28px;
  padding: var(--space-1) var(--space-3);
  border: 0;
  border-right: 1px solid var(--mtx-border);
  border-color: var(--mtx-border);
  background: transparent;
  color: var(--mtx-text-secondary);
  cursor: pointer;
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
}
.mtx-page .mtx-segment:last-child { border-right: 0; }
.mtx-page .mtx-segment:hover { background: var(--mtx-surface-3); }
.mtx-page .mtx-segment.active { background: var(--mtx-accent); color: var(--mtx-text-primary); }

.mtx-boards-page {
  max-height: 100%;
  overflow: auto;
}
.mtx-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}
.mtx-page-head > div { display: flex; flex-direction: column; gap: var(--space-1); }
.mtx-page-head p { color: var(--mtx-text-muted); font-size: var(--font-size-base); }
.mtx-boards-page .card {
  border-color: var(--mtx-border);
  background: var(--mtx-surface-1);
  color: var(--mtx-text-primary);
}
.mtx-boards-page .table-container { border-color: var(--mtx-border); }
.mtx-boards-page .table th { background: var(--mtx-surface-3); color: var(--mtx-text-muted); }
.mtx-boards-page .table td { border-color: var(--mtx-grid); color: var(--mtx-text-secondary); }
.mtx-create-card,
.mtx-board-list-card { min-width: 0; }
/* ダーク基調のページ内では共通 .toolbar の明色背景を打ち消す（本番で白帯として露出した） */
.mtx-page .toolbar {
  background: var(--mtx-surface-2);
  border-bottom-color: var(--mtx-border);
  color: var(--mtx-text-primary);
}
.mtx-page .table-container {
  background: var(--mtx-surface-1);
  border-color: var(--mtx-border);
}
.mtx-page .table th {
  background: var(--mtx-surface-3);
  border-bottom-color: var(--mtx-border);
  color: var(--mtx-text-secondary);
}
.mtx-page .table td {
  border-bottom-color: var(--mtx-border);
  color: var(--mtx-text-primary);
}
.mtx-page .table tbody tr:hover { background: var(--mtx-accent-soft); }
.mtx-page .empty-state,
.mtx-page .loading-state { color: var(--mtx-text-muted); }
.mtx-create-card h3 { margin-bottom: var(--space-3); }
.mtx-create-form { display: flex; align-items: flex-end; gap: var(--space-3); }
.mtx-field-grow { flex: 1; }
.mtx-required { color: var(--mtx-danger); }
.mtx-board-table { min-width: 680px; }
.mtx-board-table th:first-child,
.mtx-board-table td:first-child { width: 52%; text-align: left; }
.mtx-board-table th:nth-child(2),
.mtx-board-table td:nth-child(2) { width: 12%; }
.mtx-board-table th:nth-child(3),
.mtx-board-table td:nth-child(3) { width: 24%; }
.mtx-board-table th:last-child,
.mtx-board-table td:last-child { width: 12%; }
.mtx-breadcrumb {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-1);
  color: var(--mtx-text-muted);
  font-size: var(--font-size-xs);
}
.mtx-breadcrumb .btn { min-height: 24px; padding: 0 var(--space-1); }
.mtx-breadcrumb [aria-current="page"] {
  overflow: hidden;
  color: var(--mtx-text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mtx-row-actions { display: inline-flex; align-items: center; gap: var(--space-1); }
.mtx-pool-actions,
.mtx-pool-list-card { min-width: 0; }
.mtx-pool-actions > .toolbar { height: auto; min-height: var(--toolbar-height); }
.mtx-pool-action-grid {
  display: grid;
  grid-template-columns: auto auto minmax(240px, 1fr) auto;
  align-items: end;
  gap: var(--space-3);
  padding: var(--space-3);
}
.mtx-pool-action-separator { align-self: center; color: var(--mtx-text-muted); font-size: var(--font-size-sm); }
.mtx-pool-toolbar { height: auto; min-height: var(--toolbar-height); flex-wrap: wrap; }
.mtx-pool-toolbar .select { min-width: 210px; }
.mtx-pool-toolbar .input { width: min(360px, 36vw); }
.mtx-pool-table { min-width: 1120px; }
.mtx-pool-table th:first-child,
.mtx-pool-table td:first-child { width: 64px; }
.mtx-pool-table th:nth-child(2),
.mtx-pool-table td:nth-child(2) { width: 34%; text-align: left; }
.mtx-pool-table th:nth-child(4),
.mtx-pool-table td:nth-child(4),
.mtx-pool-table th:nth-child(5),
.mtx-pool-table td:nth-child(5) { text-align: right; }
.mtx-pool-row { cursor: pointer; }
.mtx-pool-row.selected { background: var(--mtx-accent-soft); }
.mtx-pool-memberships { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.mtx-pool-memberships .badge { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mtx-pool-footer { justify-content: space-between; }
.mtx-create-dialog { background: var(--mtx-surface-2); color: var(--mtx-text-primary); }
.mtx-create-dialog .modal-header,
.mtx-create-dialog .modal-footer { border-color: var(--mtx-border); }
.mtx-create-dialog .modal-body { display: flex; flex-direction: column; gap: var(--space-3); }

.mtx-workflow-page {
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 620px;
  gap: 0;
  padding: 0;
  overflow: hidden;
  background: var(--mtx-surface-1);
}
.mtx-workflow-page h2,
.mtx-workflow-page h3,
.mtx-workflow-page h4,
.mtx-workflow-page p { margin: 0; }

.mtx-app-head {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--mtx-border);
  background: var(--mtx-surface-1);
}
.mtx-detail-identity { display: flex; min-width: 170px; max-width: 320px; flex-direction: column; gap: var(--space-1); }
.mtx-board-title { min-width: 150px; max-width: 300px; }
.mtx-board-title h2 {
  overflow: hidden;
  color: var(--mtx-text-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mtx-board-title span { color: var(--mtx-text-muted); font-size: var(--font-size-xs); white-space: nowrap; }
.mtx-head-spacer,
.mtx-toolbar-spacer { flex: 1; }

.mtx-stepper { display: flex; align-items: center; gap: var(--space-1); }
.mtx-step {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--mtx-border);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--mtx-text-muted);
  cursor: pointer;
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  transition: background var(--transition-normal), border-color var(--transition-normal), color var(--transition-normal), box-shadow var(--transition-normal);
}
.mtx-step-number {
  display: inline-grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--mtx-surface-3);
  color: var(--mtx-text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}
.mtx-step.done { color: var(--mtx-text-secondary); }
.mtx-step.done .mtx-step-number { background: var(--mtx-good); color: var(--mtx-text-primary); }
.mtx-step.active {
  border-color: var(--mtx-accent);
  background: var(--mtx-accent-soft);
  color: var(--mtx-text-primary);
  box-shadow: 0 0 0 3px var(--mtx-accent-soft);
}
.mtx-step.active .mtx-step-number { background: var(--mtx-accent); color: var(--mtx-text-primary); }
.mtx-step[disabled] { opacity: 0.45; cursor: default; }
.mtx-step-arrow { color: var(--mtx-text-muted); }

.mtx-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: var(--mtx-surface-1);
}
.mtx-screen {
  position: absolute;
  inset: 0;
  display: flex;
  visibility: hidden;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transform: translateX(24px);
  transition: opacity 0.28s var(--mtx-ease), transform 0.32s var(--mtx-ease), visibility 0s linear 0.32s;
}
.mtx-screen.active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: none;
  transition-delay: 0s;
}
.mtx-screen.left { transform: translateX(-24px); }

.mtx-toolbar,
.mtx-axis-head,
.mtx-list-toolbar {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-2);
}
.mtx-toolbar { padding: var(--space-3) var(--space-4) var(--space-2); }
.mtx-toolbar > div:first-child { flex: 0 1 auto; min-width: 250px; }
.mtx-toolbar h3,
.mtx-axis-head h3 { color: var(--mtx-text-primary); font-size: var(--font-size-md); }
.mtx-hint { color: var(--mtx-text-muted); font-size: var(--font-size-sm); }
.mtx-search { width: 220px; flex: 0 0 220px; }
.mtx-group-filters { display: flex; gap: var(--space-1); max-width: 330px; overflow: auto hidden; }
.mtx-chip,
.mtx-group-chip {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--mtx-border);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--mtx-text-secondary);
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}
.mtx-chip { cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); }
.mtx-chip.active { border-color: var(--mtx-accent); background: var(--mtx-accent-soft); color: var(--mtx-text-primary); }
.mtx-group-chip { min-height: 22px; padding: 0 var(--space-2); }
.mtx-group-chip.mtx-series-0 { border-color: var(--mtx-series-0); }
.mtx-group-chip.mtx-series-1 { border-color: var(--mtx-series-1); }
.mtx-group-chip.mtx-series-2 { border-color: var(--mtx-series-2); }
.mtx-group-chip.mtx-series-3 { border-color: var(--mtx-series-3); }
.mtx-group-chip.mtx-series-4 { border-color: var(--mtx-series-4); }
.mtx-group-chip.mtx-series-5 { border-color: var(--mtx-series-5); }
.mtx-group-chip.mtx-series-6 { border-color: var(--mtx-series-6); }
.mtx-group-chip.mtx-series-7 { border-color: var(--mtx-series-7); }

.mtx-list-scroll {
  flex: 1;
  min-height: 0;
  margin: 0 var(--space-4);
  overflow: auto;
  border: 1px solid var(--mtx-border);
  border-radius: var(--radius-xl);
  background: var(--mtx-surface-2);
}
.mtx-table {
  width: 100%;
  min-width: 1320px;
  border-collapse: collapse;
  color: var(--mtx-text-secondary);
  font-size: var(--font-size-sm);
}
.mtx-table thead th {
  position: sticky;
  z-index: 2;
  top: 0;
  padding: var(--space-2);
  border-bottom: 1px solid var(--mtx-border);
  background: var(--mtx-surface-3);
  color: var(--mtx-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-align: left;
  white-space: nowrap;
}
.mtx-table tbody tr { cursor: pointer; transition: background var(--transition-fast), opacity var(--transition-fast); }
.mtx-table tbody tr:hover { background: var(--mtx-accent-soft); }
.mtx-table tbody tr.selected { background: var(--mtx-accent-soft); }
.mtx-table td {
  padding: var(--space-2);
  border-bottom: 1px solid var(--mtx-grid);
  vertical-align: middle;
  white-space: nowrap;
}
.mtx-table td:nth-child(3) { max-width: 360px; }
.mtx-th-inner { display: inline-flex; align-items: center; gap: var(--space-1); }
.mtx-sort-button,
.mtx-filter-button {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-family: var(--font-family);
  font-size: inherit;
}
.mtx-sort-button { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0; }
.mtx-filter-button { padding: 0 var(--space-1); border-radius: var(--radius-sm); }
.mtx-sortable:hover,
.mtx-sortable.filtered .mtx-filter-button { color: var(--mtx-accent); }
.mtx-sort-ind { min-width: 10px; color: var(--mtx-accent); font-size: var(--font-size-2xs); }
.mtx-check { width: 16px; height: 16px; accent-color: var(--mtx-accent); cursor: pointer; }
.mtx-pick-check,
.mtx-view-item-check { accent-color: var(--mtx-accent); }
.mtx-pick-row,
.mtx-result-row { position: relative; }
.mtx-series-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  margin-right: var(--space-1);
  border-radius: var(--radius-full);
}
.mtx-series-dot.mtx-series-0 { background: var(--mtx-series-0); }
.mtx-series-dot.mtx-series-1 { background: var(--mtx-series-1); }
.mtx-series-dot.mtx-series-2 { background: var(--mtx-series-2); }
.mtx-series-dot.mtx-series-3 { background: var(--mtx-series-3); }
.mtx-series-dot.mtx-series-4 { background: var(--mtx-series-4); }
.mtx-series-dot.mtx-series-5 { background: var(--mtx-series-5); }
.mtx-series-dot.mtx-series-6 { background: var(--mtx-series-6); }
.mtx-series-dot.mtx-series-7 { background: var(--mtx-series-7); }
.mtx-product-cell { display: flex; align-items: center; gap: var(--space-2); min-width: 0; max-width: 350px; }
.mtx-product-cell > div { min-width: 0; }
/* strongはinlineのままだとellipsisが効かず長い商品名が隣列へはみ出す */
.mtx-product-cell strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mtx-product-cell .mtx-cell-note { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mtx-product-cell a { color: var(--mtx-text-primary); text-decoration: none; }
.mtx-product-cell a:hover { color: var(--mtx-accent); }
.mtx-list-thumb,
.mtx-thumb-placeholder {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: var(--radius-md);
  background: var(--mtx-text-primary);
  object-fit: contain;
}
.mtx-thumb-placeholder { display: inline-grid; place-items: center; color: var(--mtx-text-muted); font-size: var(--font-size-2xs); }
.mtx-cell-note { display: block; margin-top: var(--space-1); color: var(--mtx-text-muted); font-size: var(--font-size-xs); font-weight: var(--font-weight-normal); }
.mtx-item-excluded { opacity: 0.38; }
.mtx-item-excluded:hover { opacity: 0.72; }
.mtx-unknown { color: var(--mtx-text-muted); }
.mtx-num { text-align: right !important; font-variant-numeric: tabular-nums; }
.mtx-foot {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--mtx-border);
  background: var(--mtx-surface-1);
}
.mtx-count { color: var(--mtx-text-secondary); font-size: var(--font-size-md); }
.mtx-count b { color: var(--mtx-text-primary); font-size: var(--font-size-lg); }

.mtx-popover {
  --mtx-popover-surface: #232322;
  --mtx-popover-field: #1a1a19;
  --mtx-popover-text: #ffffff;
  --mtx-popover-border: rgba(255, 255, 255, 0.1);
  position: fixed;
  z-index: var(--z-popover);
  display: flex;
  width: 240px;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--mtx-popover-border);
  border-radius: var(--radius-lg);
  background: var(--mtx-popover-surface);
  color: var(--mtx-popover-text);
  box-shadow: var(--shadow-xl);
  color-scheme: dark;
}
.mtx-popover > .input { width: 100%; border-color: var(--mtx-popover-border); background: var(--mtx-popover-field); color: var(--mtx-popover-text); }
.mtx-filter-range { display: flex; align-items: center; gap: var(--space-1); }
.mtx-filter-range .input { min-width: 0; width: 90px; border-color: var(--mtx-popover-border); background: var(--mtx-popover-field); color: var(--mtx-popover-text); }
.mtx-popover-actions { display: flex; justify-content: flex-end; gap: var(--space-2); }

.mtx-axis-screen { padding: var(--space-4); gap: var(--space-3); }
.mtx-axis-head { justify-content: space-between; }
.mtx-axis-grid { display: grid; grid-template-columns: minmax(420px, 1.1fr) minmax(400px, 1fr); gap: var(--space-4); flex: 1; min-height: 0; }
.mtx-panel {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--mtx-border);
  border-radius: var(--radius-xl);
  background: var(--mtx-surface-2);
}
.mtx-panel h4 { color: var(--mtx-text-primary); font-size: var(--font-size-md); }
.mtx-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.mtx-preset {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--mtx-border);
  border-radius: var(--radius-lg);
  background: var(--mtx-surface-1);
  color: var(--mtx-text-secondary);
  cursor: pointer;
  font-family: var(--font-family);
  text-align: left;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.mtx-preset:hover { border-color: var(--mtx-accent); transform: translateY(-1px); }
.mtx-preset.active { border-color: var(--mtx-accent); background: var(--mtx-accent-soft); color: var(--mtx-text-primary); }
.mtx-preset strong,
.mtx-preset small { display: block; }
.mtx-preset small { margin-top: var(--space-1); color: var(--mtx-text-muted); font-size: var(--font-size-xs); }
.mtx-axis-line { display: flex; align-items: center; gap: var(--space-2); }
.mtx-axis-line .select { min-width: 0; flex: 1; }
.mtx-scale-toggle { flex: none; }
.mtx-scale-toggle .mtx-segment { min-height: 34px; }
.mtx-swap { align-self: flex-start; }
.mtx-preview-panel { overflow: hidden; }
.mtx-preview-head { display: flex; align-items: baseline; gap: var(--space-2); }
.mtx-preview { flex: 1; min-height: 0; }
.mtx-preview svg { display: block; width: 100%; height: 100%; }

.mtx-tab-row {
  display: flex;
  flex: none;
  align-items: flex-end;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4) 0;
  border-bottom: 1px solid var(--mtx-border);
}
.mtx-tab-wrap { position: relative; display: inline-flex; }
.mtx-tab {
  position: relative;
  top: 1px;
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5) var(--space-2) var(--space-3);
  border: 1px solid var(--mtx-border);
  border-bottom: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--mtx-surface-2);
  color: var(--mtx-text-secondary);
  cursor: pointer;
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
}
.mtx-tab small { color: var(--mtx-text-muted); font-size: var(--font-size-xs); }
.mtx-tab.active { background: var(--mtx-surface-3); color: var(--mtx-text-primary); font-weight: var(--font-weight-semibold); }
.mtx-tab-delete {
  position: absolute;
  z-index: 3;
  top: var(--space-1);
  right: var(--space-1);
  border: 0;
  background: transparent;
  color: var(--mtx-text-muted);
  cursor: pointer;
}
.mtx-tab-delete:hover { color: var(--mtx-danger); }
.mtx-tab-add {
  padding: var(--space-2) var(--space-3);
  border: 0;
  background: transparent;
  color: var(--mtx-accent);
  cursor: pointer;
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
}
.mtx-view-switch {
  display: inline-flex;
  overflow: hidden;
  margin-bottom: var(--space-1);
  border: 1px solid var(--mtx-border);
  border-radius: var(--radius-md);
  background: var(--mtx-surface-2);
}
.mtx-view-switch button {
  padding: var(--space-1) var(--space-3);
  border: 0;
  background: transparent;
  color: var(--mtx-text-secondary);
  cursor: pointer;
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
}
.mtx-view-switch button.active { background: var(--mtx-accent); color: var(--mtx-text-primary); font-weight: var(--font-weight-semibold); }
.mtx-result-body { position: relative; flex: 1; min-height: 0; background: var(--mtx-surface-3); }
.mtx-pane {
  position: absolute;
  inset: 0;
  display: flex;
  visibility: hidden;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal), visibility 0s linear var(--transition-normal);
}
/* 親画面が非表示のときは pane も必ず hidden（子の visibility:visible は継承を上書きして裏からクリックを奪う） */
.mtx-screen.active .mtx-pane.active { visibility: visible; opacity: 1; pointer-events: auto; transition-delay: 0s; }
.mtx-chart-wrap { display: flex; flex: 1; min-height: 0; flex-direction: column; padding: var(--space-2) var(--space-4) var(--space-1); }
.mtx-legend { display: flex; flex: none; align-items: center; gap: var(--space-3); min-height: 32px; color: var(--mtx-text-secondary); font-size: var(--font-size-sm); }
.mtx-legend-key { display: inline-flex; align-items: center; gap: var(--space-1); }
.mtx-legend-key .mtx-series-dot { margin: 0; }
.mtx-legend-note { color: var(--mtx-text-muted); }
.mtx-zone-chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); border: 1px solid var(--mtx-accent); border-radius: var(--radius-full); background: var(--mtx-accent-soft); color: var(--mtx-text-primary); }
.mtx-zone-chip button { border: 0; background: transparent; color: var(--mtx-text-secondary); cursor: pointer; }
.mtx-chart-box { position: relative; flex: 1; min-height: 0; }
.mtx-chart-box svg { display: block; width: 100%; height: 100%; min-height: 0; }
.mtx-grid-line { stroke: var(--mtx-grid); stroke-width: 1; }
.mtx-median-line { stroke: var(--mtx-baseline); stroke-width: 1.5; stroke-dasharray: 6 4; }
.mtx-axis-label { fill: var(--mtx-text-muted); font-family: var(--font-family); font-size: var(--font-size-xs); }
.mtx-axis-title { fill: var(--mtx-text-secondary); font-family: var(--font-family); font-size: var(--font-size-sm); }
.mtx-chart-empty { fill: var(--mtx-text-muted); font-family: var(--font-family); font-size: var(--font-size-md); }
.mtx-quad-area { fill: transparent; cursor: pointer; transition: fill var(--transition-normal); }
.mtx-quad-area:hover { fill: var(--mtx-accent-soft); }
.mtx-quad-area.zone { fill: var(--mtx-accent-soft); }
.mtx-quad-label { fill: var(--mtx-text-muted); cursor: pointer; font-family: var(--font-family); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.mtx-quad-label:hover { fill: var(--mtx-text-primary); }
.mtx-quad-label.zone { fill: var(--mtx-accent); }
.mtx-zone-rect { fill: var(--mtx-accent-soft); stroke: var(--mtx-accent); stroke-width: 1.5; stroke-dasharray: 5 3; pointer-events: none; }
.mtx-brush { fill: var(--mtx-accent-soft); stroke: var(--mtx-accent); stroke-width: 1; pointer-events: none; }
.mtx-point { cursor: pointer; outline: none; transition: opacity var(--transition-fast); }
.mtx-point-layer { isolation: isolate; }
.mtx-point-hit { fill: transparent; }
.mtx-point-mark { stroke: var(--mtx-surface-3); stroke-width: 2; transition: r var(--transition-fast), stroke-width var(--transition-fast); }
.mtx-point.mtx-series-0 .mtx-point-mark { fill: var(--mtx-series-0); }
.mtx-point.mtx-series-1 .mtx-point-mark { fill: var(--mtx-series-1); }
.mtx-point.mtx-series-2 .mtx-point-mark { fill: var(--mtx-series-2); }
.mtx-point.mtx-series-3 .mtx-point-mark { fill: var(--mtx-series-3); }
.mtx-point.mtx-series-4 .mtx-point-mark { fill: var(--mtx-series-4); }
.mtx-point.mtx-series-5 .mtx-point-mark { fill: var(--mtx-series-5); }
.mtx-point.mtx-series-6 .mtx-point-mark { fill: var(--mtx-series-6); }
.mtx-point.mtx-series-7 .mtx-point-mark { fill: var(--mtx-series-7); }
.mtx-point:hover .mtx-point-mark,
.mtx-point:focus-visible .mtx-point-mark { r: 8.5; stroke-width: 2.5; }
.mtx-point.mtx-enter .mtx-point-mark { animation: mtx-point-pop 0.45s var(--mtx-ease) both; animation-delay: var(--mtx-delay, 0ms); transform-box: fill-box; transform-origin: center; }
@keyframes mtx-point-pop { from { opacity: 0; transform: scale(0.2); } to { opacity: 1; transform: scale(1); } }
.mtx-point.dim,
.mtx-chart-thumb.dim { opacity: 0.15; }
.mtx-point-label { fill: var(--mtx-text-secondary); font-family: var(--font-family); font-size: var(--font-size-xs); pointer-events: none; }
.mtx-label-layer { pointer-events: none; }
.mtx-halo { fill: none; stroke: var(--mtx-accent); stroke-width: 2; opacity: 0.9; }
.mtx-halo-all { stroke: var(--mtx-good-text); stroke-width: 2.5; }
.mtx-halo-outer { fill: none; stroke: var(--mtx-good-text); stroke-width: 1.5; opacity: 0.6; }
.mtx-chart-thumb { cursor: pointer; transition: opacity var(--transition-fast); }
.mtx-thumb-layer { isolation: isolate; }
.mtx-thumb-bg { fill: var(--mtx-text-primary); stroke: var(--mtx-border); }
.mtx-outside { display: flex; flex: none; align-items: center; gap: var(--space-2); min-height: 30px; padding: var(--space-1) 0 var(--space-2); color: var(--mtx-text-secondary); font-size: var(--font-size-sm); }
.mtx-outside-label { color: var(--mtx-text-muted); }
.mtx-outside-list { display: flex; gap: var(--space-2); overflow: auto hidden; }
.mtx-out-chip { display: inline-flex; align-items: center; min-height: 24px; padding: 0 var(--space-2); border: 1px dashed var(--mtx-baseline); border-radius: var(--radius-full); background: transparent; color: var(--mtx-text-secondary); cursor: pointer; font-family: var(--font-family); font-size: var(--font-size-sm); white-space: nowrap; }
.mtx-out-chip::before { width: 8px; height: 8px; margin-right: var(--space-1); border-radius: var(--radius-full); background: var(--mtx-series-3); content: ""; }
.mtx-out-chip.mtx-series-0::before { background: var(--mtx-series-0); }
.mtx-out-chip.mtx-series-1::before { background: var(--mtx-series-1); }
.mtx-out-chip.mtx-series-2::before { background: var(--mtx-series-2); }
.mtx-out-chip.mtx-series-3::before { background: var(--mtx-series-3); }
.mtx-out-chip.mtx-series-4::before { background: var(--mtx-series-4); }
.mtx-out-chip.mtx-series-5::before { background: var(--mtx-series-5); }
.mtx-out-chip.mtx-series-6::before { background: var(--mtx-series-6); }
.mtx-out-chip.mtx-series-7::before { background: var(--mtx-series-7); }

.mtx-tooltip {
  position: absolute;
  z-index: var(--z-tooltip);
  display: flex;
  width: 320px;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--mtx-border);
  border-radius: var(--radius-xl);
  background: var(--mtx-surface-2);
  color: var(--mtx-text-secondary);
  box-shadow: var(--mtx-shadow);
  pointer-events: none;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}
.mtx-tooltip[hidden] { display: none; }
.mtx-tooltip img,
.mtx-tooltip-placeholder { width: 96px; height: 96px; flex: 0 0 96px; border-radius: var(--radius-lg); background: var(--mtx-text-primary); object-fit: contain; }
.mtx-tooltip-placeholder { display: inline-grid; place-items: center; color: var(--mtx-text-muted); }
.mtx-tooltip-body { display: flex; min-width: 0; flex-direction: column; gap: var(--space-1); }
.mtx-tooltip-name { overflow: hidden; color: var(--mtx-text-primary); font-size: var(--font-size-md); text-overflow: ellipsis; white-space: nowrap; }
.mtx-tooltip-store { color: var(--mtx-text-muted); font-size: var(--font-size-xs); }
.mtx-tooltip-main { color: var(--mtx-text-primary); font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); }
.mtx-tooltip-main small { color: var(--mtx-text-secondary); font-size: var(--font-size-xs); font-weight: var(--font-weight-normal); }
.mtx-tooltip-row { display: flex; justify-content: space-between; gap: var(--space-3); }
.mtx-tooltip-row strong { color: var(--mtx-text-primary); text-align: right; }
.mtx-tooltip-link { margin-top: var(--space-1); color: var(--mtx-accent); }

.mtx-list-toolbar { padding: var(--space-3) var(--space-4) 0; }
.mtx-result-list-scroll { margin-top: var(--space-3); margin-bottom: var(--space-3); }
.mtx-result-list-scroll .mtx-table { min-width: 1100px; }
.mtx-quad-tag { display: inline-block; padding: var(--space-1) var(--space-2); border-radius: var(--radius-md); background: var(--mtx-surface-3); color: var(--mtx-text-secondary); font-size: var(--font-size-xs); }
.mtx-quad-tag.hot { background: var(--mtx-good-soft); color: var(--mtx-good-text); }

.mtx-toast {
  position: absolute;
  z-index: var(--z-toast);
  right: var(--space-4);
  bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: 520px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--mtx-accent);
  border-radius: var(--radius-lg);
  background: var(--mtx-surface-2);
  color: var(--mtx-text-primary);
  box-shadow: var(--mtx-shadow);
  animation: mtx-toast-in 0.25s var(--mtx-ease) both;
}
@keyframes mtx-toast-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.mtx-toast-success { border-color: var(--mtx-good); color: var(--mtx-good-text); }
.mtx-toast-warning { border-color: var(--mtx-warning); color: var(--mtx-warning); }
.mtx-toast-error { border-color: var(--mtx-danger); color: var(--mtx-danger); }
.mtx-toast-info { border-color: var(--mtx-accent); color: var(--mtx-text-primary); }

.mtx-picker-backdrop { padding: var(--space-4); }
.mtx-picker-modal { width: min(1180px, 96vw); max-width: 1180px; max-height: 90vh; background: var(--mtx-surface-2); color: var(--mtx-text-primary); }
.mtx-picker-modal .modal-header,
.mtx-picker-modal .modal-footer { border-color: var(--mtx-border); }
.mtx-picker-toolbar { height: auto; min-height: var(--toolbar-height); padding: 0 0 var(--space-3); border-bottom: 0; flex-wrap: wrap; }
.mtx-picker-toolbar .select { min-width: 210px; }
.mtx-picker-toolbar .input { min-width: 260px; flex: 1; }
.mtx-picker-table-wrap { max-height: 460px; }
.mtx-picker-table { min-width: 920px; }
.mtx-picker-table th { background: var(--mtx-surface-3); color: var(--mtx-text-muted); }
.mtx-picker-table td { border-color: var(--mtx-grid); color: var(--mtx-text-secondary); }
.mtx-picker-thumb { width: 52px; height: 52px; flex: 0 0 52px; border-radius: var(--radius-lg); background: var(--mtx-text-primary); object-fit: contain; }
.mtx-picker-modal .mtx-thumb-placeholder { width: 52px; height: 52px; flex-basis: 52px; }
.mtx-picker-group { max-width: 520px; margin-top: var(--space-3); }
.mtx-picker-count { color: var(--mtx-text-muted); }
.mtx-inline-note { margin-bottom: var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--mtx-accent); border-radius: var(--radius-md); background: var(--mtx-accent-soft); color: var(--mtx-text-secondary); }
.mtx-inline-warning { border-color: var(--mtx-warning); color: var(--mtx-warning); }
.mtx-source-check { width: 18px; height: 18px; accent-color: var(--mtx-accent); cursor: pointer; }

.mtx-dispatch-tab-warning {
  display: inline-flex;
  align-items: center;
  align-self: center;
  margin: 0 var(--space-2) var(--space-1) 0;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--mtx-warning);
  border-radius: var(--radius-full);
  color: var(--mtx-warning);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}
.mtx-dispatch-warning {
  display: flex;
  flex: none;
  align-items: flex-start;
  gap: var(--space-3);
  margin: var(--space-3) var(--space-4) 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--mtx-warning);
  border-radius: var(--radius-lg);
  background: var(--mtx-surface-2);
  color: var(--mtx-text-secondary);
  font-size: var(--font-size-sm);
}
.mtx-dispatch-warning-title { flex: none; color: var(--mtx-warning); font-weight: var(--font-weight-semibold); }
.mtx-dispatch-failures { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: var(--space-1); }
.mtx-dispatch-failure { display: flex; min-width: 0; align-items: center; gap: var(--space-2); }
.mtx-dispatch-failure code { overflow: hidden; flex: 1; color: var(--mtx-text-muted); font-size: var(--font-size-xs); text-overflow: ellipsis; white-space: nowrap; }
.mtx-dispatch-kind { padding: 0 var(--space-2); border-radius: var(--radius-full); background: var(--mtx-surface-3); color: var(--mtx-text-primary); font-size: var(--font-size-xs); }
.mtx-candidate-toolbar > div:first-child { min-width: 520px; }
.mtx-zone-summary {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0 var(--space-4);
  color: var(--mtx-text-secondary);
  font-size: var(--font-size-xs);
}
.mtx-zs {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--mtx-border);
  border-radius: var(--radius-lg);
  background: var(--mtx-surface-2);
  color: var(--mtx-text-secondary);
  cursor: pointer;
  font-family: var(--font-family);
  font-size: var(--font-size-xs);
}
.mtx-zs:hover { border-color: var(--mtx-accent); }
.mtx-zs.none { border-style: dashed; color: var(--mtx-text-muted); }
.mtx-zs b { color: var(--mtx-text-primary); }
.mtx-candidate-list-scroll { margin-top: var(--space-2); }
.mtx-candidate-table { min-width: 1560px; }
.mtx-candidate-table tbody tr.adopted { background: var(--mtx-good-soft); }
.mtx-candidate-table tbody tr.adopted:hover { background: var(--mtx-good-soft); }
.mtx-score-pill {
  display: inline-block;
  min-width: 44px;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  background: var(--mtx-surface-3);
  color: var(--mtx-text-secondary);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.mtx-score-pill.full { background: var(--mtx-good-soft); color: var(--mtx-good-text); }
.mtx-match-dots { display: inline-flex; align-items: center; gap: var(--space-1); }
.mtx-match-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid var(--mtx-baseline);
  border-radius: var(--radius-full);
}
.mtx-match-dot.on { border-color: var(--mtx-good); background: var(--mtx-good); }
.mtx-match-dot.na {
  width: auto;
  height: auto;
  padding: 0 var(--space-1);
  border-width: 1px;
  border-style: dashed;
  border-radius: var(--radius-md);
  color: var(--mtx-text-muted);
  font-size: var(--font-size-2xs);
  line-height: var(--line-height-normal);
}
.mtx-adopt-check { accent-color: var(--mtx-good); }
.mtx-adopted-actions { display: flex; max-width: 170px; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.mtx-adopted-actions small { width: 100%; color: var(--mtx-text-muted); font-size: var(--font-size-2xs); white-space: normal; }
.mtx-adopted-badge { padding: var(--space-1) var(--space-2); border-radius: var(--radius-full); background: var(--mtx-good-soft); color: var(--mtx-good-text); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); }
.mtx-cancel-benchmark { color: var(--mtx-danger) !important; }
.mtx-candidate-empty { padding: var(--space-5); color: var(--mtx-text-muted); text-align: center; }
.mtx-candidate-foot { gap: var(--space-4); }
.mtx-adopt-hint { max-width: 420px; color: var(--mtx-text-muted); font-size: var(--font-size-xs); line-height: var(--line-height-normal); }
.mtx-benchmark-note { display: flex; width: 280px; flex: none; flex-direction: column; gap: var(--space-1); color: var(--mtx-text-secondary); font-size: var(--font-size-xs); }
.mtx-benchmark-note textarea { min-height: 52px; resize: vertical; }
.mtx-candidate-foot .btn-primary { flex: none; }

/* S6b: 軸列・一括プリセット・しきい値・手修正 */
.mtx-list-scroll .mtx-table { min-width: 1680px; }
.mtx-column-control { position: relative; z-index: var(--z-column-menu); flex: none; }
.mtx-columns-popover {
  position: absolute;
  z-index: var(--z-column-menu);
  top: calc(100% + var(--space-1));
  right: 0;
  display: grid;
  width: 580px;
  max-height: min(520px, 70vh);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  padding: var(--space-3);
  overflow: auto;
  border: 1px solid var(--mtx-border);
  border-radius: var(--radius-lg);
  background: var(--mtx-surface-2);
  box-shadow: var(--shadow-xl);
}
.mtx-columns-popover fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.mtx-columns-popover legend { margin-bottom: var(--space-1); color: var(--mtx-text-muted); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); }
.mtx-columns-popover label { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1); color: var(--mtx-text-secondary); font-size: var(--font-size-sm); cursor: pointer; }
.mtx-columns-popover input { accent-color: var(--mtx-accent); }
.mtx-axis-cell { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--space-1); white-space: nowrap; }
.mtx-axis-edit { min-width: 24px; padding-right: var(--space-1); padding-left: var(--space-1); color: var(--mtx-accent); }
.mtx-axis-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.mtx-presets { overflow: auto; padding: 1px; }
.mtx-progress-stack { display: flex; flex: none; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-2) var(--space-4) 0; background: var(--mtx-surface-3); }
.mtx-progress-banner { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-2); border: 1px solid var(--mtx-accent); border-radius: var(--radius-md); background: var(--mtx-accent-soft); color: var(--mtx-text-secondary); font-size: var(--font-size-xs); }
.mtx-zone-pending { padding: var(--space-1) var(--space-2); border: 1px dashed var(--mtx-warning); border-radius: var(--radius-full); color: var(--mtx-warning); font-size: var(--font-size-xs); }
.mtx-editor-popover { --mtx-danger: #ff6b6b; --mtx-warning: #f6c453; width: min(420px, calc(100vw - 16px)); }
.mtx-editor-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.mtx-editor-field { display: flex; min-width: 0; flex-direction: column; gap: var(--space-1); color: var(--mtx-popover-text); font-size: var(--font-size-xs); }
.mtx-editor-field .input { width: 100%; border-color: var(--mtx-popover-border); background: var(--mtx-popover-field); color: var(--mtx-popover-text); }
.mtx-editor-field textarea { min-height: 58px; resize: vertical; }
.mtx-editor-field small,
.mtx-editor-help { margin: 0; color: rgba(255, 255, 255, 0.65); font-size: var(--font-size-2xs); }
.mtx-editor-field b { color: var(--mtx-warning); }
.mtx-threshold-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.mtx-inline-error { min-height: 1.3em; color: var(--mtx-danger); font-size: var(--font-size-xs); }
.mtx-value-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin: 0; }
.mtx-value-summary div { padding: var(--space-2); border-radius: var(--radius-md); background: var(--mtx-popover-field); }
.mtx-value-summary dt { color: rgba(255, 255, 255, 0.65); font-size: var(--font-size-2xs); }
.mtx-value-summary dd { margin: var(--space-1) 0 0; color: var(--mtx-popover-text); font-weight: var(--font-weight-semibold); }

@media (max-width: 1220px) {
  .mtx-pool-action-grid { grid-template-columns: minmax(220px, 1fr) auto; }
  .mtx-pool-action-separator { grid-column: 1 / -1; justify-self: center; }
  .mtx-step { padding-right: var(--space-2); padding-left: var(--space-2); }
  .mtx-step-arrow { display: none; }
  .mtx-board-title { max-width: 210px; }
  .mtx-axis-grid { grid-template-columns: 1fr 1fr; }
}
/* === 管理 > PLAUD録音 === */
.plaud-page {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
}

.plaud-page-header h2 {
  margin: 0 0 var(--space-1);
  color: var(--text-primary);
  font-size: var(--font-size-2xl);
}

.plaud-page-header p,
.plaud-privacy-note {
  margin: 0;
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

.plaud-kpis {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.plaud-kpi {
  min-width: 150px;
  padding: var(--space-3) var(--space-4);
  color: var(--text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.plaud-kpi:hover,
.plaud-kpi.is-active {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.plaud-kpi-label {
  display: block;
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.plaud-kpi-value {
  display: block;
  color: var(--text-primary);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
}

.plaud-kpi-warning .plaud-kpi-value { color: var(--color-warning-text); }
.plaud-kpi-danger .plaud-kpi-value { color: var(--color-danger-text); }
.plaud-kpi-success .plaud-kpi-value { color: var(--color-success-text); }

.plaud-toolbar {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
}

.plaud-search { width: 220px; }

.plaud-list-count {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.plaud-table-container {
  flex: 1;
  min-height: 260px;
}

.plaud-table th:nth-child(1),
.plaud-table td:nth-child(1) { width: 13%; }
.plaud-table th:nth-child(2),
.plaud-table td:nth-child(2) { width: 31%; text-align: left; }
.plaud-table th:nth-child(3),
.plaud-table td:nth-child(3) { width: 8%; }
.plaud-table th:nth-child(4),
.plaud-table td:nth-child(4) { width: 15%; }
.plaud-table th:nth-child(5),
.plaud-table td:nth-child(5) { width: 15%; }
.plaud-table th:nth-child(6),
.plaud-table td:nth-child(6) { width: 18%; }

.plaud-table tbody tr { cursor: pointer; }
.plaud-table tbody tr.plaud-row-attention { background: var(--color-warning-bg); }
.plaud-table tbody tr.plaud-row-archived { background: var(--bg-muted); color: var(--text-muted); }
.plaud-table .plaud-title-cell { white-space: normal; line-height: var(--line-height-normal); }

.plaud-badge-ready { background: var(--color-info-subtle); color: var(--color-info); }
.plaud-badge-recorded { background: var(--color-success-subtle); color: var(--color-success-text); }
.plaud-badge-needs { background: var(--color-warning-subtle); color: var(--color-warning-text); }
.plaud-badge-audio,
.plaud-badge-archived,
.plaud-badge-skipped { background: var(--bg-subtle); color: var(--text-tertiary); }
.plaud-badge-retry { background: var(--color-danger-subtle); color: var(--color-danger-text); }
.plaud-badge-business { background: var(--color-primary-subtle); color: var(--color-primary); }
.plaud-badge-private { background: var(--color-info-subtle); color: var(--color-info); }
.plaud-confidence { color: var(--text-muted); font-size: var(--font-size-sm); }
.plaud-topic-link,
.plaud-drive-link {
  color: var(--color-primary);
  text-decoration: none;
  cursor: pointer;
}
.plaud-topic-link:hover,
.plaud-drive-link:hover { color: var(--color-primary-hover); text-decoration: underline; }

.plaud-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal-backdrop);
  background: color-mix(in srgb, var(--bg-nav) 35%, transparent);
}
.plaud-drawer-backdrop[hidden] { display: none; }

.plaud-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: var(--z-modal);
  display: flex;
  width: 600px;
  max-width: 92vw;
  height: 100vh;
  flex-direction: column;
  background: var(--bg-surface);
  box-shadow: var(--shadow-xl);
  transform: translateX(105%);
  transition: transform var(--transition-slow);
}
.plaud-drawer.is-open { transform: translateX(0); }

.plaud-drawer-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-default);
}
.plaud-drawer-header h3 {
  flex: 1;
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-normal);
}
.plaud-drawer-close { font-size: var(--font-size-xl); }

.plaud-drawer-body {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  gap: var(--space-3);
  overflow-y: auto;
  padding: var(--space-4);
}

.plaud-section-title {
  margin-bottom: var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.05em;
}

.plaud-player {
  padding: var(--space-3);
  border-radius: var(--radius-xl);
  background: var(--bg-nav);
  color: var(--text-inverse);
}
.plaud-player audio { display: block; width: 100%; }
.plaud-player audio[hidden] { display: none; }
.plaud-player-status { color: var(--text-muted); font-size: var(--font-size-sm); }
.plaud-player-error { color: var(--color-danger-subtle); font-size: var(--font-size-sm); }

.plaud-judge { border-left: var(--space-1) solid var(--color-primary); }
.plaud-judge-needs { border-left-color: var(--color-warning); }
.plaud-judge-retry { border-left-color: var(--color-danger); }
.plaud-judge-private { border-left-color: var(--color-info); }
.plaud-judge-pending { border-left-color: var(--border-medium); }
.plaud-judge-row,
.plaud-action-row,
.plaud-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.plaud-judge-row { margin-bottom: var(--space-2); }
.plaud-action-row { margin-top: var(--space-3); }
.plaud-reason { color: var(--text-secondary); font-size: var(--font-size-md); line-height: var(--line-height-relaxed); }
.plaud-tag {
  padding: 1px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}
.plaud-action-spacer { flex: 1; }

.plaud-summary {
  color: var(--text-secondary);
  font-size: var(--font-size-md);
  line-height: 1.75;
}
.plaud-summary h4 { margin: var(--space-2) 0 var(--space-1); color: var(--text-primary); font-size: var(--font-size-md); }
.plaud-summary p { margin: 0 0 var(--space-2); }
.plaud-summary ul { margin: 0 0 var(--space-2); padding-left: var(--space-5); }

.plaud-outline-card { padding: var(--space-2); }
.plaud-outline-item {
  display: flex;
  width: 100%;
  gap: var(--space-2);
  padding: 5px 6px;
  border: 0;
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.plaud-outline-item:hover { background: var(--color-primary-bg); }
.plaud-outline-time { flex-shrink: 0; color: var(--color-primary); font-size: var(--font-size-sm); font-variant-numeric: tabular-nums; }

.plaud-highlights {
  margin-bottom: var(--space-2);
  border-left: var(--space-1) solid var(--color-warning);
  white-space: pre-wrap;
}
.plaud-highlights-title { margin-bottom: var(--space-1); color: var(--color-warning-text); font-weight: var(--font-weight-semibold); }
.plaud-highlights-body { color: var(--text-secondary); font-size: var(--font-size-md); line-height: var(--line-height-relaxed); }

.plaud-transcript { padding: var(--space-2) var(--space-3); }
.plaud-transcript summary { color: var(--color-primary); font-size: var(--font-size-base); cursor: pointer; }
.plaud-transcript-lines { margin-top: var(--space-2); }
.plaud-transcript-line { display: flex; gap: var(--space-2); padding: var(--space-1) 0; font-size: var(--font-size-md); line-height: var(--line-height-relaxed); }
.plaud-transcript-time { flex-shrink: 0; padding-top: 2px; color: var(--text-muted); font-size: var(--font-size-xs); font-variant-numeric: tabular-nums; }
.plaud-speaker { flex-shrink: 0; padding-top: 1px; font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); }
.plaud-speaker-1 { color: var(--color-primary); }
.plaud-speaker-2 { color: var(--color-success-dark); }
.plaud-speaker-3 { color: var(--color-warning-text); }
.plaud-transcript-text,
.plaud-transcript-raw { color: var(--text-secondary); white-space: pre-wrap; }

.plaud-timeline { padding: var(--space-2) var(--space-3); }
.plaud-timeline-item { display: flex; gap: var(--space-2); padding: 3px 0; color: var(--text-tertiary); font-size: var(--font-size-sm); }
.plaud-timeline-dot { width: 8px; height: 8px; margin-top: var(--space-1); flex-shrink: 0; border-radius: var(--radius-full); background: var(--border-medium); }
.plaud-timeline-dot.is-ok { background: var(--color-success); }
.plaud-timeline-dot.is-warning { background: var(--color-warning); }
.plaud-timeline-dot.is-error { background: var(--color-danger); }
.plaud-timeline-meta { color: var(--text-muted); }

.plaud-archived-note,
.plaud-empty-note {
  padding: var(--space-3);
  border: 1px dashed var(--border-medium);
  border-radius: var(--radius-xl);
  background: var(--bg-muted);
  color: var(--text-tertiary);
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
}

.plaud-modal-backdrop[hidden] { display: none; }
.plaud-modal-backdrop .modal-header h3 { margin: 0; color: var(--text-primary); font-size: var(--font-size-xl); }
.plaud-modal-backdrop .modal-body p { margin: 0; color: var(--text-secondary); font-size: var(--font-size-md); line-height: var(--line-height-relaxed); }

.plaud-toast {
  position: fixed;
  bottom: var(--space-6);
  left: 50%;
  z-index: var(--z-toast);
  max-width: 520px;
  padding: 10px var(--space-4);
  border-radius: var(--radius-xl);
  background: var(--bg-nav);
  color: var(--text-inverse);
  box-shadow: var(--shadow-xl);
  font-size: var(--font-size-md);
  transform: translateX(-50%);
}
.plaud-toast.is-error { background: var(--color-danger-text); }
.plaud-toast[hidden] { display: none; }

/* === 楽天セール入稿ハブ (rssh) === */
.rssh-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--bg-body);
  color: var(--text-primary);
}

.rssh-toolbar {
  height: auto;
  min-height: var(--toolbar-height);
}

.rssh-page-title,
.rssh-pane-title,
.rssh-content-title,
.rssh-modal-title,
.rssh-detail-title {
  margin: 0;
  color: var(--text-primary);
}

.rssh-page-title { font-size: var(--font-size-xl); }
.rssh-pane-title,
.rssh-content-title { font-size: var(--font-size-lg); }
.rssh-modal-title { font-size: var(--font-size-xl); }
.rssh-detail-title { font-size: var(--font-size-md); }

.rssh-split {
  display: grid;
  grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
  gap: var(--space-3);
  flex: 1;
  min-height: 0;
  padding: var(--space-3);
}

.rssh-sales-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: var(--space-3);
  overflow: hidden;
}

.rssh-sale-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 0;
  margin-top: var(--space-3);
  overflow-y: auto;
}

.rssh-sale-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3);
  color: var(--text-secondary);
  text-align: left;
  cursor: pointer;
}

.rssh-sale-card:hover { background: var(--bg-hover); }
.rssh-sale-card.is-active {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
  box-shadow: var(--shadow-focus);
}

.rssh-sale-card-head,
.rssh-sale-counts,
.rssh-content-header,
.rssh-summary,
.rssh-status-progress,
.rssh-checks,
.rssh-form-actions,
.rssh-override-ui {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.rssh-sale-card-head { justify-content: space-between; }
.rssh-sale-title { color: var(--text-primary); font-size: var(--font-size-md); }
.rssh-sale-counts { flex-wrap: wrap; gap: var(--space-1); }
.rssh-muted { color: var(--text-tertiary); font-size: var(--font-size-sm); }

.rssh-content-pane {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.rssh-content-header {
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
}

.rssh-content-header .rssh-content-title { margin-right: auto; }

.rssh-alert {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
}

.rssh-alert-danger {
  border-color: var(--color-danger);
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
}

.rssh-alert-history {
  border-color: var(--color-info-border);
  background: var(--color-info-bg);
  color: var(--color-info);
}

.rssh-summary { flex-wrap: wrap; }
.rssh-summary-card {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 104px;
  padding: var(--space-2) var(--space-3);
}
.rssh-summary-label { color: var(--text-tertiary); font-size: var(--font-size-sm); }
.rssh-summary-value { color: var(--color-primary); font-size: var(--font-size-2xl); }

.rssh-inline-error {
  padding: var(--space-3);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-lg);
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
  text-align: left;
}

.rssh-table-scroll { min-height: 0; }
.rssh-table-container { min-width: 1660px; }
.rssh-table { table-layout: fixed; }
.rssh-table th:nth-child(1) { width: 180px; }
.rssh-table th:nth-child(2) { width: 135px; }
.rssh-table th:nth-child(3),
.rssh-table th:nth-child(4) { width: 105px; }
.rssh-table th:nth-child(5) { width: 100px; }
.rssh-table th:nth-child(6) { width: 165px; }
.rssh-table th:nth-child(7) { width: 310px; }
.rssh-table th:nth-child(8) { width: 560px; }

.rssh-table td {
  padding: var(--space-2);
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-surface);
  color: var(--text-secondary);
  text-align: left;
  vertical-align: top;
}

.rssh-product-row { cursor: pointer; }
.rssh-product-row:hover td { background: var(--bg-hover); }
.rssh-product-cell,
.rssh-verdict,
.rssh-discount-cell,
.rssh-confirmation-info,
.rssh-operations,
.rssh-confirm-form,
.rssh-form-field,
.rssh-override-detail,
.rssh-modal-stack,
.rssh-modal-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.rssh-manage-number { color: var(--text-primary); }
.rssh-product-title {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}
.rssh-discount-primary { color: var(--text-primary); font-weight: var(--font-weight-semibold); }

.rssh-status-progress { flex-wrap: wrap; gap: var(--space-1); }
.rssh-step-badge { opacity: .45; }
.rssh-step-badge.is-reached { opacity: 1; background: var(--color-primary-subtle); color: var(--color-primary); }
.rssh-step-badge.is-current { box-shadow: var(--shadow-focus); }

.rssh-confirm-form {
  padding: var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-muted);
}

.rssh-field-label { color: var(--text-secondary); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.rssh-percent-input { display: flex; align-items: center; gap: var(--space-1); }
.rssh-percent-input .input { width: 92px; }
.rssh-checkbox-label { color: var(--text-secondary); font-size: var(--font-size-sm); }
.rssh-note-input { min-height: 48px; width: 100%; }
.rssh-form-actions { align-items: flex-start; justify-content: space-between; }
.rssh-form-feedback { flex: 1; color: var(--text-tertiary); font-size: var(--font-size-sm); line-height: var(--line-height-normal); }
.rssh-form-feedback.is-error,
.rssh-modal-error { color: var(--color-danger-text); }
.rssh-form-feedback.is-warning,
.rssh-response-warnings { color: var(--color-warning-text); }

.rssh-response-warnings,
.rssh-reasoning-list,
.rssh-checks-summary,
.rssh-reason-list,
.rssh-exclusion-list {
  margin: 0;
  padding-left: var(--space-5);
}

.rssh-response-warnings { font-size: var(--font-size-sm); }
.rssh-note-text,
.rssh-override-detail {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  background: var(--bg-muted);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  white-space: pre-wrap;
}

.rssh-override-ui { align-items: flex-start; flex-wrap: wrap; }
.rssh-override-detail { flex: 1; }

.rssh-detail-row td { background: var(--bg-muted); }
.rssh-detail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-5);
  padding: var(--space-3) var(--space-4);
  color: var(--text-secondary);
  line-height: var(--line-height-relaxed);
}
.rssh-detail-title { grid-column: 1 / -1; }

.rssh-modal { max-width: 720px; }
.rssh-exclusion-list li {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 2fr;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-light);
}
.rssh-modal-error { min-height: var(--space-4); font-size: var(--font-size-sm); }
.rssh-modal-stack .textarea { width: 100%; }

@media (max-width: 1000px) {
  .rssh-split { grid-template-columns: 230px minmax(0, 1fr); }
  .rssh-detail { grid-template-columns: 1fr; }
}

/* 未引当のご案内 */
.customer-sub-panel#unallocatedConsultSubPanel {
  min-width: 0;
  min-height: 0;
  padding: 0;
}

.uc-page {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
}

.uc-toolbar {
  height: auto;
  min-height: var(--toolbar-height);
}

.uc-filter-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.uc-status-text {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.uc-status-danger { color: var(--color-danger-text); }

.uc-list-container {
  flex: 1;
  min-height: 0;
  border-radius: 0;
}

.uc-list-table col:nth-child(1) { width: 22%; }
.uc-list-table col:nth-child(2) { width: 13%; }
.uc-list-table col:nth-child(3) { width: 16%; }
.uc-list-table col:nth-child(4) { width: 11%; }
.uc-list-table col:nth-child(5) { width: 19%; }
.uc-list-table col:nth-child(6) { width: 19%; }

.uc-list-row { cursor: pointer; }
.uc-list-row:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: -2px;
}
.uc-list-table td .badge + .badge { margin-left: var(--space-1); }
.uc-overdue-row td { background: var(--color-danger-bg); }

.uc-badge-muted {
  background: var(--bg-active);
  color: var(--text-secondary);
}

.uc-modal-backdrop[hidden],
.uc-hidden[hidden] { display: none; }

.uc-detail-modal {
  width: 94%;
  max-width: 1100px;
  max-height: 92vh;
}

.uc-modal-title {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-xl);
}

.uc-detail-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.uc-detail-section { padding: var(--space-3); }
.uc-section-title {
  margin: 0 0 var(--space-3);
  color: var(--text-primary);
  font-size: var(--font-size-lg);
}
.uc-detail-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.uc-draft-text {
  margin: 0;
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-muted);
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.uc-detail-table-scroll {
  max-height: 260px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
}
.uc-detail-table { min-width: 560px; }
.uc-sends-table { min-width: 820px; }
.uc-events-table { min-width: 900px; }
.uc-events-table td:last-child {
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
}
.uc-unknown-alert { margin-bottom: var(--space-3); }
.uc-send-unknown td { background: var(--color-danger-bg); }

.uc-customer-hold-alert {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}
.uc-customer-hold-details {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}
.uc-customer-hold-case-link { align-self: flex-start; }

.uc-action-message { color: var(--text-tertiary); }
.uc-action-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.uc-action-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.uc-action-form,
.uc-answer-form,
.uc-resolve-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  align-items: end;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-muted);
}
.uc-action-form { grid-template-columns: minmax(240px, 1fr) auto; }
.uc-action-field { margin-top: 0; }
.uc-action-input { width: 100%; }
.uc-no-actions {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

/* === スタッフ招待 === */
.staff-invitation-admin[hidden] {
  display: none !important;
}

.staff-invitation-section {
  margin-top: var(--space-6);
}

.staff-invitation-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.staff-invitation-heading h4 {
  color: var(--text-primary);
  font-size: var(--font-size-lg);
}

.staff-invitation-latest,
.staff-invitation-result {
  margin-bottom: var(--space-3);
}

.staff-invitation-link-label,
.staff-invitation-permission-label {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.staff-invitation-link-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.staff-invitation-link-row .input {
  flex: 1;
  min-width: 0;
}

.staff-invitation-latest p {
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
}

.account-form-status.is-error {
  color: var(--color-danger-text);
}

.account-form-status.is-success {
  color: var(--color-success-dark);
}

.account-form-status.is-warning {
  color: var(--color-warning-text);
}

.staff-invitation-table-container {
  max-height: 360px;
}

.staff-invitation-table {
  min-width: 760px;
}

.staff-invitation-col-name { width: 16%; }
.staff-invitation-col-email { width: 23%; }
.staff-invitation-col-status { width: 10%; }
.staff-invitation-col-expires { width: 18%; }
.staff-invitation-col-creator { width: 13%; }
.staff-invitation-col-actions { width: 20%; }

.staff-invitation-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-1);
}

/* === 招待受取ページ === */
body.invite-page {
  min-height: 100vh;
  height: auto;
  background: var(--bg-muted);
  color: var(--text-primary);
}

.invite-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
  padding: var(--space-6) var(--space-4);
}

.invite-card {
  width: 100%;
  max-width: 480px;
  padding: var(--space-6);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
  box-shadow: var(--shadow-xl);
}

.invite-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.invite-logo {
  display: block;
  width: 112px;
  max-height: 36px;
}

.invite-progress {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
}

.invite-progress-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.invite-progress-item.active {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--text-inverse);
}

.invite-progress-item.complete {
  border-color: var(--color-success-dark);
  background: var(--color-success-subtle);
  color: var(--color-success-text);
}

.invite-alert {
  margin-bottom: var(--space-4);
}

.invite-step[hidden] {
  display: none;
}

.invite-title {
  margin-bottom: var(--space-3);
  color: var(--text-primary);
  font-size: var(--font-size-3xl);
  line-height: var(--line-height-tight);
}

.invite-description {
  margin-bottom: var(--space-5);
  color: var(--text-secondary);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
}

.invite-destination {
  margin-bottom: var(--space-4);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-primary-bg);
  color: var(--text-secondary);
  font-size: var(--font-size-base);
}

.invite-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.invite-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}

.invite-field .input {
  width: 100%;
  min-height: 40px;
  background: var(--bg-surface);
  font-size: var(--font-size-lg);
}

.invite-code-input {
  text-align: center;
  letter-spacing: var(--space-2);
  font-size: var(--font-size-2xl) !important;
  font-weight: var(--font-weight-semibold);
}

.invite-primary-action {
  width: 100%;
  min-height: 40px;
}

.invite-resend-action {
  display: block;
  margin: var(--space-3) auto 0;
}

.invite-password-policy {
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-muted);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

.invite-password-policy p {
  margin-bottom: var(--space-1);
  color: var(--text-secondary);
  font-weight: var(--font-weight-semibold);
}

.invite-password-policy ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-1) var(--space-3);
  padding-left: var(--space-5);
}

.invite-password-policy li.valid {
  color: var(--color-success-dark);
  font-weight: var(--font-weight-semibold);
}

@media (max-width: 560px) {
  .invite-shell {
    align-items: flex-start;
    padding: var(--space-3);
  }

  .invite-card {
    padding: var(--space-5) var(--space-4);
    box-shadow: var(--shadow-md);
  }

  .invite-password-policy ul {
    grid-template-columns: 1fr;
  }

  .staff-invitation-link-row {
    align-items: stretch;
    flex-direction: column;
  }
}

/* === 納品画像一次チェック === */
#deliveryPrecheckPanel {
  overflow: hidden;
  background: var(--bg-body);
}

#deliveryPrecheckPanel.active {
  display: flex;
  flex-direction: column;
}

.dpc-root,
.dpc-content,
.dpc-list-view,
.dpc-detail-view {
  min-width: 0;
  min-height: 0;
}

.dpc-root,
.dpc-content,
.dpc-list-view,
.dpc-detail-view {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.dpc-toolbar {
  gap: var(--space-2);
}

.dpc-search-input {
  width: 180px;
}

.dpc-status-select {
  width: 150px;
}

.dpc-list-table-container {
  flex: 1;
  margin: var(--space-3);
}

.dpc-list-scroll {
  min-height: 0;
}

.dpc-list-table {
  min-width: 1040px;
}

.dpc-col-product { width: 12%; }
.dpc-col-title { width: 20%; }
.dpc-col-revision { width: 7%; }
.dpc-col-designer { width: 12%; }
.dpc-col-count { width: 7%; }
.dpc-col-status { width: 10%; }
.dpc-col-created { width: 18%; }

.dpc-case-row {
  cursor: pointer;
}

.dpc-case-row:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: -2px;
}

.dpc-product-code,
.dpc-title-cell {
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
}

.dpc-count-ng {
  color: var(--color-danger-text);
  font-weight: var(--font-weight-bold);
}

.dpc-count-unsure {
  color: var(--color-warning-text);
  font-weight: var(--font-weight-bold);
}

.dpc-list-count {
  color: var(--text-tertiary);
}

.dpc-modal-backdrop {
  z-index: var(--z-modal-backdrop);
}

.dpc-create-modal {
  width: 560px;
}

.dpc-modal-title {
  color: var(--text-primary);
  font-size: var(--font-size-xl);
}

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

.dpc-form-field,
.dpc-field-label {
  min-width: 0;
}

.dpc-form-field .input {
  width: 100%;
}

.dpc-field-label {
  color: var(--text-secondary);
}

.dpc-modal-error {
  grid-column: 1 / -1;
}

.dpc-detail-title {
  min-width: 0;
  overflow: hidden;
  color: var(--text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dpc-detail-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 0;
  padding: var(--space-3);
  overflow-y: auto;
}

.dpc-section {
  flex: 0 0 auto;
}

.dpc-matrix-section,
.dpc-review-section {
  min-width: 0;
}

.dpc-section-title {
  margin-bottom: var(--space-3);
  color: var(--text-primary);
  font-size: var(--font-size-lg);
}

.dpc-section-empty {
  padding: var(--space-4);
}

.dpc-meta-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: var(--space-3);
}

.dpc-meta-item {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-1);
}

.dpc-meta-label {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.dpc-meta-value {
  overflow: hidden;
  color: var(--text-primary);
  font-size: var(--font-size-base);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dpc-external-link {
  align-self: flex-start;
}

.dpc-brief-alert,
.dpc-review-alert {
  margin-top: var(--space-3);
}

.dpc-progress-stage {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-info-border);
  border-radius: var(--radius-lg);
  background: var(--color-info-bg);
  color: var(--color-info);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

.dpc-progress-stage-success {
  border-color: var(--color-success-subtle);
  background: var(--color-success-bg);
  color: var(--color-success-text);
}

.dpc-progress-stage-warning {
  border-color: var(--color-warning);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}

.dpc-progress-stage-danger {
  border-color: var(--color-danger);
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
}

.dpc-progress-stage-info {
  border-color: var(--color-info-border);
}

.dpc-preparation-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.dpc-preparation-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-muted);
}

.dpc-preparation-title {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-base);
}

.dpc-preparation-note,
.dpc-preparation-status,
.dpc-start-help {
  margin: 0;
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

.dpc-preparation-status[data-tone="error"] {
  color: var(--color-danger-text);
}

.dpc-preparation-status[data-tone="success"] {
  color: var(--color-success-text);
}

.dpc-upload-input {
  width: 100%;
}

.dpc-upload-progress {
  width: 100%;
  accent-color: var(--color-primary);
}

.dpc-upload-progress[hidden] {
  display: none;
}

.dpc-uploaded-images-host {
  width: 100%;
}

.dpc-uploaded-images-body {
  width: 100%;
}

.dpc-uploaded-images-toggle {
  font-weight: var(--font-weight-medium);
}

.dpc-uploaded-images {
  width: 100%;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-default);
}

.dpc-uploaded-images-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.dpc-uploaded-images-title {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-sm);
}

.dpc-uploaded-images-empty {
  padding: var(--space-3);
}

.dpc-delete-locked {
  margin-top: var(--space-2);
}

.dpc-uploaded-image-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.dpc-uploaded-image-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}

.dpc-uploaded-image-summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.dpc-uploaded-image-thumbnail {
  display: block;
  width: 64px;
  height: 48px;
  flex: 0 0 auto;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: var(--bg-muted);
  object-fit: contain;
}

.dpc-uploaded-image-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}

.dpc-uploaded-image-filename {
  max-width: 260px;
  overflow-wrap: anywhere;
  color: var(--text-primary);
  font-size: var(--font-size-sm);
}

.dpc-uploaded-image-delete {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: var(--space-2);
  margin-left: auto;
}

.dpc-delete-confirm {
  max-width: 360px;
  padding: var(--space-3);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-md);
  background: var(--color-danger-bg);
}

.dpc-delete-confirm[hidden] {
  display: none;
}

.dpc-delete-confirm-title {
  color: var(--color-danger-text);
  font-size: var(--font-size-sm);
}

.dpc-delete-confirm-message {
  margin: var(--space-1) 0 var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

.dpc-delete-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.dpc-start-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

@media (max-width: 760px) {
  .dpc-preparation-grid {
    grid-template-columns: 1fr;
  }

  .dpc-start-row {
    align-items: stretch;
    flex-direction: column;
  }

  .dpc-uploaded-images-heading,
  .dpc-uploaded-image-row {
    align-items: stretch;
    flex-direction: column;
  }

  .dpc-uploaded-image-delete {
    align-items: stretch;
    margin-left: 0;
  }

  .dpc-delete-confirm {
    max-width: none;
  }
}

.dpc-case-verdict-table th:nth-child(1) { width: 24%; }
.dpc-case-verdict-table th:nth-child(2) { width: 10%; }
.dpc-case-verdict-table th:nth-child(3) { width: 66%; }

.dpc-case-item-label {
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
}

.table td.dpc-description-cell {
  text-align: left;
  white-space: normal;
}

.dpc-description-line + .dpc-description-line {
  margin-top: var(--space-1);
}

.dpc-matrix-container {
  max-width: 100%;
}

.dpc-matrix-scroll {
  max-height: 620px;
  overflow: auto;
}

.dpc-matrix-table {
  width: max-content;
  min-width: 100%;
  table-layout: auto;
}

.dpc-matrix-table .dpc-matrix-image-header,
.dpc-matrix-table .dpc-matrix-image-cell {
  position: sticky;
  left: 0;
  min-width: 230px;
  max-width: 230px;
}

.dpc-matrix-table .dpc-matrix-image-header {
  z-index: calc(var(--z-sticky) + 1);
}

.dpc-matrix-table .dpc-matrix-image-cell {
  z-index: 1;
  background: var(--bg-surface);
}

.dpc-matrix-item-header {
  min-width: 104px;
  max-width: 144px;
  cursor: help;
}

.dpc-matrix-drive-header,
.dpc-drive-cell {
  min-width: 150px;
}

.dpc-image-summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.dpc-thumbnail {
  display: block;
  width: 72px;
  height: 54px;
  flex: 0 0 auto;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-muted);
  object-fit: contain;
}

.dpc-thumbnail-error {
  border-color: var(--color-danger);
  background: var(--color-danger-bg);
}

.dpc-image-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}

.dpc-image-filename {
  max-width: 135px;
  overflow: hidden;
  color: var(--text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dpc-verdict-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  background: transparent;
  font-family: var(--font-family);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: transform var(--transition-fast), background var(--transition-fast);
}

.dpc-verdict-button:hover {
  transform: scale(1.08);
}

.dpc-verdict-ok {
  border-color: var(--color-success-subtle);
  background: var(--color-success-bg);
  color: var(--color-success-dark);
}

.dpc-verdict-ng {
  border-color: var(--color-danger);
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
}

.dpc-verdict-unsure {
  border-color: var(--color-warning);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}

.dpc-verdict-missing {
  color: var(--text-muted);
}

.dpc-drive-cell {
  white-space: normal;
}

.dpc-comment-badge {
  margin-left: var(--space-1);
}

.dpc-finding-panel[hidden] {
  display: none;
}

.dpc-finding-panel {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
}

.dpc-finding-panel-heading,
.dpc-instruction-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.dpc-finding-panel-heading .dpc-section-title {
  margin-bottom: 0;
}

.dpc-finding-panel-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.dpc-finding-target {
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
}

.dpc-finding-verdict {
  align-self: flex-start;
  padding: var(--space-1) var(--space-3);
  border: 1px solid;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
}

.dpc-finding-card {
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}

.dpc-finding-checker {
  margin-bottom: var(--space-2);
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
}

.dpc-finding-type,
.dpc-finding-text {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.dpc-finding-description {
  margin: var(--space-1) 0;
  color: var(--text-secondary);
  line-height: var(--line-height-relaxed);
}

.dpc-review-findings,
.dpc-image-review-list,
.dpc-human-finding-add,
.dpc-instruction-wrap {
  margin-top: var(--space-4);
}

.dpc-review-subtitle {
  margin-bottom: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-base);
}

.dpc-review-finding-row,
.dpc-image-review-row,
.dpc-human-finding-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border-bottom: 1px solid var(--border-light);
  color: var(--text-secondary);
  font-size: var(--font-size-base);
}

.dpc-review-finding-row input,
.dpc-image-review-row input {
  flex: 0 0 auto;
  accent-color: var(--color-primary);
}

.dpc-review-finding-copy,
.dpc-image-review-name,
.dpc-human-finding-copy {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.dpc-image-review-label {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.dpc-human-finding-controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.dpc-human-finding-list {
  margin-top: var(--space-2);
}

.dpc-human-image-select {
  width: 220px;
}

.dpc-human-text-input {
  flex: 1;
  min-width: 240px;
}

.dpc-human-item-select {
  width: 180px;
}

.dpc-review-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.dpc-review-save-status {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.dpc-review-draft-alerts:empty {
  display: none;
}

.dpc-review-draft-alerts .dpc-review-alert {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.dpc-review-conflict-copy {
  flex: 1;
}

.dpc-instruction-text {
  width: 100%;
  min-height: 150px;
  margin-top: var(--space-2);
  background: var(--bg-surface);
  color: var(--text-primary);
  line-height: var(--line-height-relaxed);
}

.dpc-error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-6);
}

.dpc-toast {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: var(--z-toast);
  max-width: 420px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-info);
  border-radius: var(--radius-lg);
  background: var(--color-info-bg);
  color: var(--color-info);
  box-shadow: var(--shadow-lg);
  font-size: var(--font-size-base);
}

.dpc-toast[data-type="success"] {
  border-color: var(--color-success);
  background: var(--color-success-bg);
  color: var(--color-success-text);
}

.dpc-toast[data-type="error"] {
  border-color: var(--color-danger);
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
}

/* 楽天バナー 試し置き（第2弾 S0'） */
.rb-scn-card {
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}

.rb-scn-heading,
.rb-scn-section-heading,
.rb-scn-capacity-summary,
.rb-scn-controls,
.rb-scn-choice-row,
.rb-scn-control-actions,
.rb-scn-row-actions,
.rb-scn-form-actions,
.rb-scn-legend {
  display: flex;
  align-items: center;
}

.rb-scn-heading {
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.rb-scn-heading h3,
.rb-scn-heading p,
.rb-scn-section-heading h4,
.rb-scn-capacity-kind p,
.rb-scn-capacity-warning p,
.rb-scn-day-detail h5,
.rb-scn-day-detail h6 {
  margin: 0;
}

.rb-scn-heading h3 {
  color: var(--text-primary);
  font-size: var(--font-size-lg);
}

.rb-scn-heading p,
.rb-scn-section-heading span,
.rb-scn-secondary,
.rb-scn-note,
.rb-scn-hint,
.rb-scn-range,
.rb-scn-none {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.rb-scn-intro {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-info-border);
  border-radius: var(--radius-lg);
  background: var(--color-info-bg);
  color: var(--text-secondary);
  font-size: var(--font-size-md);
}

.rb-scn-intro strong {
  color: var(--color-info);
}

.rb-scn-loading,
.rb-scn-retry,
.rb-scn-message {
  margin-top: var(--space-3);
}

.rb-scn-controls {
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-4);
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-muted);
}

.rb-scn-control-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.rb-scn-control-label {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.rb-scn-choice-row,
.rb-scn-control-actions,
.rb-scn-row-actions,
.rb-scn-form-actions,
.rb-scn-legend {
  flex-wrap: wrap;
  gap: var(--space-2);
}

.rb-scn-control-actions {
  align-self: center;
}

.rb-scn-range {
  align-self: center;
  margin-left: auto;
}

.rb-scn-section {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-default);
}

.rb-scn-section-heading {
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.rb-scn-section-heading h4 {
  color: var(--text-primary);
  font-size: var(--font-size-lg);
}

.rb-scn-capacity-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.rb-scn-capacity-kind {
  padding: var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}

.rb-scn-capacity-blocked {
  border-color: var(--color-danger);
  background: var(--color-danger-bg);
}

.rb-scn-capacity-ok {
  border-color: var(--color-success-subtle);
  background: var(--color-success-bg);
}

.rb-scn-capacity-summary {
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--text-primary);
  font-size: var(--font-size-lg);
}

.rb-scn-capacity-summary span {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
}

.rb-scn-blocked-copy {
  margin-top: var(--space-2) !important;
  color: var(--color-danger-text);
  font-weight: var(--font-weight-bold);
}

.rb-scn-ok-copy {
  margin-top: var(--space-2) !important;
  color: var(--color-success-text);
}

.rb-scn-capacity-detail,
.rb-scn-capacity-warning {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-default);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.rb-scn-capacity-detail > strong {
  display: block;
  margin-bottom: var(--space-1);
}

.rb-scn-key-list,
.rb-scn-capacity-warning ol,
.rb-scn-evicted ul {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-5);
}

.rb-scn-capacity-warning {
  margin-right: calc(-1 * var(--space-2));
  margin-left: calc(-1 * var(--space-2));
  padding: var(--space-3);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-md);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}

.rb-scn-capacity-warning p {
  margin-top: var(--space-2);
  font-size: var(--font-size-xs);
}

.rb-scn-evicted {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  background: var(--bg-subtle);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.rb-scn-evicted > span {
  margin-left: var(--space-2);
}

.rb-scn-timeline-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: var(--space-3);
  align-items: start;
}

.rb-scn-matrix-scroll,
.rb-scn-table-scroll {
  overflow-x: auto;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
}

.rb-scn-matrix {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.rb-scn-matrix th,
.rb-scn-matrix td {
  min-width: 48px;
  padding: var(--space-2);
  border-right: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  text-align: center;
}

.rb-scn-matrix th:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 150px;
  background: var(--bg-muted);
  text-align: left;
}

.rb-scn-matrix thead th {
  background: var(--bg-muted);
}

.rb-scn-matrix tbody th span,
.rb-scn-matrix tbody th small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rb-scn-matrix tbody th small {
  margin-top: var(--space-1);
  color: var(--text-tertiary);
  font-weight: var(--font-weight-normal);
}

.rb-scn-day-button {
  padding: var(--space-1) var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.rb-scn-day-button:hover,
.rb-scn-day-selected {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
  color: var(--color-primary);
}

.rb-scn-cell-assigned {
  background: var(--color-success-subtle);
  color: var(--color-success-text);
  font-weight: var(--font-weight-bold);
}

.rb-scn-cell-hidden {
  background: var(--bg-subtle);
  color: var(--text-tertiary);
}

.rb-scn-cell-overflow {
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
  font-weight: var(--font-weight-bold);
}

.rb-scn-cell-outside {
  background: var(--bg-muted);
}

.rb-scn-entry-archived {
  opacity: 0.55;
}

.rb-scn-day-detail {
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-muted);
}

.rb-scn-day-detail h5 {
  padding: var(--space-3);
  border-bottom: 1px solid var(--border-default);
  color: var(--text-primary);
  font-size: var(--font-size-md);
}

.rb-scn-day-groups {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  padding: var(--space-3);
}

.rb-scn-day-groups h6 {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.rb-scn-day-groups ol {
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
}

.rb-scn-day-groups li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: var(--space-2);
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}

.rb-scn-day-groups li strong {
  color: var(--text-secondary);
}

.rb-scn-legend {
  margin-top: var(--space-3);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.rb-scn-legend > span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.rb-scn-legend b {
  min-width: 24px;
  padding: 1px var(--space-1);
  border-radius: var(--radius-sm);
  text-align: center;
}

.rb-scn-legend-assigned {
  background: var(--color-success-subtle);
  color: var(--color-success-text);
}

.rb-scn-legend-hidden {
  background: var(--bg-subtle);
  color: var(--text-tertiary);
}

.rb-scn-legend-overflow {
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
}

.rb-scn-legend > strong {
  flex-basis: 100%;
  color: var(--color-danger-text);
}

.rb-scn-entries-table,
.rb-scn-overrides-table {
  min-width: 900px;
}

.rb-scn-entries-table th,
.rb-scn-entries-table td,
.rb-scn-overrides-table th,
.rb-scn-overrides-table td {
  white-space: normal;
  vertical-align: top;
}

.rb-scn-entries-table td:nth-child(2) {
  min-width: 180px;
  overflow-wrap: anywhere;
}

.rb-scn-secondary,
.rb-scn-note {
  display: block;
  margin-top: var(--space-1);
}

.rb-scn-note {
  max-width: 260px;
  overflow-wrap: anywhere;
}

.rb-scn-thumbnail {
  display: block;
  width: 100px;
  max-height: 54px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  object-fit: contain;
}

.rb-scn-image-link {
  display: inline-block;
}

.rb-scn-image-fallback {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}

.rb-scn-edit-row td {
  background: var(--color-primary-bg);
}

.rb-scn-add-panel {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-muted);
}

.rb-scn-add-panel summary {
  color: var(--color-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

.rb-scn-form {
  margin-top: var(--space-3);
}

.rb-scn-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: var(--space-3);
}

.rb-scn-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

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

.rb-scn-field .input,
.rb-scn-field .select,
.rb-scn-field .textarea {
  width: 100%;
}

.rb-scn-textarea {
  min-height: 58px;
  resize: vertical;
}

.rb-scn-form-actions {
  justify-content: flex-end;
  margin-top: var(--space-3);
}

.rb-scn-empty {
  padding: var(--space-5);
  border: 1px dashed var(--border-medium);
  border-radius: var(--radius-lg);
  background: var(--bg-muted);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  text-align: center;
}

.rb-scn-missing-row {
  background: var(--color-warning-bg);
}

.rb-scn-missing-copy {
  display: block;
  margin-top: var(--space-1);
  color: var(--color-warning-text);
  font-size: var(--font-size-xs);
}

.rb-s5-plan {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
}

.rb-s5-switch,
.rb-s5-drift-actions,
.rb-s5-drift-resolution,
.rb-s5-baseline-reset {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.rb-s5-switch {
  margin-bottom: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}

.rb-s5-switch span {
  flex: 1;
  min-width: 180px;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.rb-s5-decision {
  margin-bottom: var(--space-3);
  padding: var(--space-4);
  border: 2px solid currentColor;
  border-radius: var(--radius-lg);
  font-size: var(--font-size-xl);
  text-align: center;
}

.rb-s5-decision-auto,
.rb-s5-decision-no_change {
  background: var(--color-success-bg);
  color: var(--color-success-text);
}

.rb-s5-decision-needs_approval {
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}

.rb-s5-decision-blocked {
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
}

.rb-s5-reasons {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-5);
  color: var(--text-primary);
}

.rb-s5-drift-actions {
  margin-bottom: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-lg);
  background: var(--color-warning-bg);
}

.rb-s5-baseline-reset {
  margin-left: auto;
  padding-left: var(--space-3);
  border-left: 1px solid var(--color-warning);
}

.rb-s5-baseline-reset span {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.rb-s5-changes td:nth-child(3),
.rb-s5-changes td:nth-child(4) {
  min-width: 180px;
  overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
  .rb-scn-timeline-layout {
    grid-template-columns: 1fr;
  }

  .rb-scn-day-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rb-scn-form-grid {
    grid-template-columns: repeat(2, minmax(130px, 1fr));
  }
}

@media (max-width: 720px) {
  .rb-scn-capacity-grid,
  .rb-scn-form-grid,
  .rb-scn-day-groups {
    grid-template-columns: 1fr;
  }

  .rb-scn-field-wide {
    grid-column: span 1;
  }

  .rb-scn-range {
    width: 100%;
    margin-left: 0;
  }
}

.necto-tooltip {
  position: fixed;
  z-index: var(--z-tooltip);
  max-width: min(320px, calc(100vw - 16px));
  padding: 6px 10px;
  border-radius: var(--radius-md);
  background: var(--bg-nav);
  color: var(--text-inverse);
  box-shadow: var(--shadow-lg);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  white-space: normal;
  word-break: break-word;
}
.cs-hub-refund-panel { margin: 10px 0; padding: 12px; }
.cs-hub-refund-panel-quiet > .cs-hub-refund-panel-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 0;
  cursor: pointer;
  list-style: none;
}
.cs-hub-refund-panel-quiet[open] > .cs-hub-refund-panel-title { margin-bottom: 8px; }
.cs-hub-refund-panel-quiet > .cs-hub-refund-panel-title::-webkit-details-marker { display: none; }
.cs-hub-refund-panel-note {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
}
.cs-hub-refund-panel-title { font-weight: 700; margin-bottom: 8px; }
.cs-hub-refund-order { border-top: 1px solid var(--color-border); padding: 10px 0; display: grid; gap: 8px; }
.cs-hub-refund-order-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.cs-hub-refund-help { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.cs-hub-refund-block { color: var(--color-warning-text, #92400e); background: var(--color-warning-bg, #fffbeb); border-radius: 6px; padding: 8px; font-size: var(--font-size-sm); }
.cs-hub-refund-unimported { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; align-items: end; }
.cs-hub-refund-unimported label { display: grid; gap: 4px; font-size: var(--font-size-sm); }

/* 宿題パネル: 1件=1行に畳み、押したときだけ全文を出す */
.cs-hub-cases-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-4);
  border-left: var(--space-1) solid var(--color-warning);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}
.cs-hub-cases-title {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}
.cs-hub-case-row {
  padding-top: var(--space-1);
  border-top: 1px solid var(--border-light);
}
.cs-hub-case-row:first-of-type {
  padding-top: 0;
  border-top: none;
}
.cs-hub-case-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  cursor: pointer;
  list-style: none;
}
.cs-hub-case-head::-webkit-details-marker { display: none; }
.cs-hub-case-head-line {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.cs-hub-case-id {
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}
.cs-hub-case-due {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}
.cs-hub-case-actions {
  display: flex;
  gap: var(--space-2);
  margin-left: auto;
}
.cs-hub-case-summary {
  overflow: hidden;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cs-hub-case-row[open] .cs-hub-case-summary { display: none; }
.cs-hub-case-detail {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--bg-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}
.cs-hub-case-detail-meta {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}
.cs-hub-case-detail-body {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

/* ===== AIトークン画面（管理>AIトークン）=====
   2026-09-03、Codex枠が3アカウントとも尽きてフリートAGT31種が停止した事故を受けて新設。
   スクロールせずに「あと何日もつか」「何が使っているか」が分かることを最優先にしている。 */
.tk-grid-top { display: grid; grid-template-columns: 1.15fr 1.15fr 1fr 1fr; gap: var(--space-3); margin-bottom: var(--space-3); }
.tk-grid-mid { display: grid; grid-template-columns: 1.25fr 1.25fr 1fr; gap: var(--space-3); }
.tk-card { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); }
.tk-card-alert { border-color: var(--color-danger); box-shadow: 0 0 0 3px var(--color-danger-subtle); }
.tk-k { font-size: var(--font-size-sm); color: var(--text-tertiary); margin-bottom: var(--space-1); display: flex; align-items: center; gap: var(--space-1); }
.tk-v { font-size: 30px; font-weight: 700; line-height: 1.1; letter-spacing: -0.5px; }
.tk-v small { font-size: var(--font-size-md); font-weight: 600; color: var(--text-tertiary); margin-left: var(--space-1); }
.tk-v-ng { color: var(--color-danger-text); }
.tk-v-warn { color: var(--color-warning-text); }
.tk-v-ok { color: var(--color-success-dark); }
.tk-v-muted { color: var(--text-tertiary); }
.tk-sub { font-size: var(--font-size-sm); color: var(--text-tertiary); margin-top: var(--space-1); }
.tk-chips { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-2); }
.tk-chip { font-size: var(--font-size-xs); padding: 2px 7px; border-radius: 20px; background: var(--bg-subtle); color: var(--text-tertiary); }
.tk-chip-ng { background: var(--color-danger-subtle); color: var(--color-danger-text); }
.tk-chip-warn { background: var(--color-warning-subtle); color: var(--color-warning-text); }
.tk-chip-ok { background: var(--color-success-subtle); color: var(--color-success-dark); }
.tk-h { margin: 0 0 var(--space-2); font-size: var(--font-size-base); font-weight: 700; display: flex; align-items: center; gap: var(--space-1); }
.tk-h .tk-hint { font-weight: 400; color: var(--text-tertiary); font-size: var(--font-size-xs); }
.tk-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-base); }
.tk-table th { text-align: left; font-size: var(--font-size-xs); color: var(--text-tertiary); font-weight: 600; padding: 0 var(--space-1) var(--space-1) 0; border-bottom: 1px solid var(--border-default); white-space: nowrap; }
.tk-table td { padding: var(--space-1) var(--space-1) var(--space-1) 0; border-bottom: 1px solid var(--bg-subtle); vertical-align: middle; }
.tk-table tr:last-child td { border-bottom: 0; }
.tk-name { font-weight: 600; }
.tk-sysname { color: var(--text-tertiary); font-weight: 400; font-size: var(--font-size-xs); }
.tk-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tk-strong { font-weight: 700; }
.tk-track { background: var(--bg-subtle); border-radius: var(--radius-sm); height: 7px; min-width: 52px; }
.tk-fill { height: 7px; border-radius: var(--radius-sm); background: var(--color-primary); }
.tk-fill-codex { background: #7c3aed; }
.tk-fill-claude { background: #0891b2; }
.tk-fill-ng { background: var(--color-danger); }
.tk-fill-ok { background: var(--color-success-hover); }
.tk-pill { font-size: var(--font-size-xs); padding: 1px 6px; border-radius: var(--radius-sm); background: var(--bg-subtle); color: var(--text-tertiary); }
.tk-pill-codex { background: #f3e8ff; color: #6b21a8; }
.tk-pill-claude { background: #cffafe; color: #155e75; }
.tk-pill-local { background: var(--color-success-subtle); color: var(--color-success-dark); }
.tk-spark { display: flex; align-items: flex-end; gap: 5px; height: 74px; margin-top: var(--space-1); }
.tk-sp { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 1px; }
.tk-sp .tk-b { width: 100%; border-radius: 2px 2px 0 0; }
.tk-sp .tk-lb { font-size: 9px; color: var(--text-tertiary); text-align: center; margin-top: 3px; }
.tk-legend { display: flex; gap: var(--space-3); font-size: var(--font-size-xs); color: var(--text-tertiary); margin-top: var(--space-1); }
.tk-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 3px; }
@media (max-width: 1400px) {
  .tk-grid-top { grid-template-columns: 1fr 1fr; }
  .tk-grid-mid { grid-template-columns: 1fr; }
}
.tk-align-start { align-items: start; }
/* 要注意注文: AIが判断材料の後着を待っている理由と期限 */
.flagged-order-material {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-muted);
  color: var(--text-secondary);
  line-height: var(--line-height-normal);
}
.flagged-order-material.is-pending {
  border-color: var(--color-info-border);
  background: var(--color-info-bg);
}
.flagged-order-material-codes,
.flagged-order-material-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
}
.flagged-order-material-code {
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}
.flagged-order-material-meta {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}

/* 取引先の管理。集計・判断待ちの分類・条件の詳細をこの画面に閉じる。 */
.pr-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.pr-stat { display: flex; flex-direction: column; gap: var(--space-2); }
.pr-stat > span { color: var(--text-secondary); font-size: var(--font-size-sm); }
.pr-stat > strong { font-size: var(--font-size-2xl); color: var(--text-primary); }
.pr-stat:first-child { border-color: var(--color-primary); background: var(--color-primary-bg); }
.pr-tabs { display: flex; gap: var(--space-2); flex-wrap: wrap; border-bottom: 1px solid var(--border-default); }
.pr-tab { border: 0; border-bottom: 3px solid transparent; padding: var(--space-3); background: transparent; color: var(--text-secondary); cursor: pointer; font: inherit; }
.pr-tab[aria-selected="true"] { border-bottom-color: var(--color-primary); color: var(--color-primary); font-weight: var(--font-weight-bold); }
.pr-tab:focus-visible, .pr-expand:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.pr-tab:disabled { cursor: default; opacity: 0.6; }
.pr-bulk { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-3); background: var(--color-primary-bg); border-radius: var(--radius-md); }
.pr-help { color: var(--text-secondary); font-size: var(--font-size-sm); margin: var(--space-3) 0; }
.pr-error { color: var(--color-danger-text); }
.pr-expand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); border: 0; background: transparent; color: var(--text-primary); cursor: pointer; font: inherit; text-align: left; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.pr-expand > span { color: var(--color-primary); font-size: var(--font-size-xs); }
.pr-expand > small { color: var(--text-secondary); }
.pr-table { width: 100%; }
/* 共通の .table td は省略表示。詳細だけ全文を折り返し、他の表には波及させない。 */
/* ⚠️ 共通の .table は中央寄せ・折り返しなし。ここだけ上書きし、共通側は触らない。 */
.table td.pr-detail-cell { white-space: normal; overflow: visible; text-overflow: clip; max-width: none; text-align: left; }
/* 相手・条件は読み物なので左寄せ（種類・判定・件数は共通どおり中央のまま）。 */
.table td.pr-target-cell { text-align: left; }
.pr-detail { padding: var(--space-4); background: var(--bg-muted); overflow-wrap: anywhere; text-align: left; }
.pr-detail p { white-space: pre-wrap; margin: var(--space-2) 0 var(--space-4); }
.pr-detail h4 { margin: var(--space-2) 0; }
#prSearch, #prValue { min-width: 280px; }
#prResult { white-space: pre-wrap; overflow-wrap: anywhere; margin: var(--space-3) 0; }
@media (max-width: 900px) { .pr-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

#partnerRulesContent [hidden] { display: none; }
/* ⚠️ 親（.customer-support-panel）は overflow:hidden の縦フレックス。
   このページ自身がスクロールしないと、はみ出した分が**切り落とされて見えなくなる**
   （2026-09-08 に一覧が画面下で切れて操作できなくなった）。 */
#partnerRulesPage {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.cs-hub-postal-check-note {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-2);
  overflow-wrap: anywhere;
}

/* ============================================================
   宿題ボード カレンダー（cscal-*）
   契約: docs/cs-case-board-calendar-CONTRACT.md
   レイアウトの考え方は .dp-calendar-*（デザイン制作）を踏襲し、
   プロット（棒線の上に重ねる点）だけ .acv-gantt-* の表現を取り込む。
   ⚠️ 動的な座標・幅は style 属性ではなく CSS変数（--cscal-*）で渡すこと。
   ============================================================ */

.cscal {
  /* 日数 × --cscal-day-width。JSが setProperty で流し込む（既定は42日ぶん） */
  --cscal-track-width: 1260px;
  --cscal-day-width: 30px;
  --cscal-lane-height: 38px;
  --cscal-row-padding: 10px;
  --cscal-name-width: 240px;
  --cscal-bar-height: 10px;
  --cscal-plot-size: 11px;
  --cscal-ink: var(--text-primary);
  --cscal-sub: var(--text-tertiary);
  --cscal-line: var(--border-default);
  --cscal-bar: #8f8a80;
  --cscal-plot-pending: var(--color-danger);
  --cscal-plot-done: #6b675f;
  background: var(--bg-muted);
}

.cscal-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  flex-wrap: wrap;
}

.cscal-health {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 12px;
  border: 1px solid var(--cscal-line);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  font-size: var(--font-size-xs);
  color: var(--cscal-sub);
}

.cscal-health-warn {
  color: var(--color-danger);
  font-weight: 600;
}

.cscal-scroll {
  position: relative;
  overflow: auto;
  border: 1px solid var(--cscal-line);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}

.cscal-header-row {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--cscal-line);
}

.cscal-header-spacer {
  position: sticky;
  left: 0;
  z-index: 4;
  flex: 0 0 var(--cscal-name-width);
  width: var(--cscal-name-width);
  background: var(--bg-surface);
  border-right: 1px solid var(--cscal-line);
}

.cscal-date-row {
  display: flex;
  flex: 0 0 var(--cscal-track-width);
  width: var(--cscal-track-width);
}

.cscal-date-cell {
  flex: 0 0 var(--cscal-day-width);
  width: var(--cscal-day-width);
  padding: 4px 0;
  text-align: center;
  font-size: 10px;
  line-height: 1.3;
  color: var(--cscal-sub);
}

.cscal-date-cell-today {
  color: var(--color-warning);
  font-weight: 700;
}

.cscal-date-cell-weekend {
  background: var(--bg-subtle);
}

.cscal-group {
  border-top: 1px solid var(--cscal-line);
}

.cscal-group-head {
  position: sticky;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--bg-subtle);
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--cscal-ink);
}

.cscal-group-count {
  font-weight: 400;
  color: var(--cscal-sub);
}

.cscal-row {
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: calc(var(--cscal-lane-height) + var(--cscal-row-padding) * 2);
  border-top: 1px solid var(--cscal-line);
}

.cscal-name {
  position: sticky;
  left: 0;
  z-index: 2;
  flex: 0 0 var(--cscal-name-width);
  width: var(--cscal-name-width);
  padding: 8px 12px;
  background: var(--bg-surface);
  border-right: 1px solid var(--cscal-line);
  overflow: hidden;
}

.cscal-name-title {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--cscal-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cscal-name-meta {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  color: var(--cscal-sub);
}

.cscal-stalled {
  font-weight: 700;
}

.cscal-stalled-warn {
  color: var(--color-warning);
}

.cscal-stalled-danger {
  color: var(--color-danger);
}

.cscal-track {
  position: relative;
  flex: 0 0 var(--cscal-track-width);
  width: var(--cscal-track-width);
}

.cscal-cell {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--cscal-day-width);
  left: var(--cscal-x);
  border-right: 1px solid var(--cscal-line);
  pointer-events: none;
}

.cscal-cell-weekend {
  background: var(--bg-subtle);
}

.cscal-today-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--cscal-x);
  width: 2px;
  background: var(--color-warning);
  opacity: 0.5;
  pointer-events: none;
}

/* 棒線（スタート〜着地） */
.cscal-bar {
  position: absolute;
  left: var(--cscal-x);
  top: var(--cscal-y);
  width: var(--cscal-w);
  height: var(--cscal-bar-height);
  border-radius: calc(var(--cscal-bar-height) / 2);
  background: var(--cscal-bar);
  opacity: 0.35;
}

.cscal-bar-overdue {
  background: var(--color-danger);
  opacity: 0.3;
}

/* プロット（棒線の真上に重ねる点） */
.cscal-plot {
  position: absolute;
  left: var(--cscal-x);
  top: var(--cscal-y);
  width: var(--cscal-plot-size);
  height: var(--cscal-plot-size);
  padding: 0;
  border: 2px solid var(--cscal-plot-done);
  border-radius: 50%;
  background: var(--cscal-plot-done);
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 1;
}

.cscal-plot:hover,
.cscal-plot:focus-visible {
  outline: 2px solid var(--color-warning);
  outline-offset: 2px;
}

/* 実行済み・実行が確定している＝塗りつぶし */
.cscal-plot-done {
  background: var(--cscal-plot-done);
  border-color: var(--cscal-plot-done);
}

/* 条件付き＝白抜き＋点線 */
.cscal-plot-conditional {
  background: var(--bg-surface);
  border-style: dashed;
}

/* 承認待ちのアクション案がある＝赤 */
.cscal-plot-pending {
  background: var(--cscal-plot-pending);
  border-color: var(--cscal-plot-pending);
}

/* 同じ日に複数ある＝束ねる */
.cscal-plot-bundle::after {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 12px;
  height: 12px;
  padding: 0 2px;
  border-radius: 6px;
  background: var(--cscal-ink);
  color: var(--bg-muted);
  font-size: 9px;
  line-height: 12px;
  text-align: center;
  content: attr(data-count);
}

/* ツールチップ */
.cscal-situation-tip {
  position: absolute;
  left: var(--cscal-x);
  top: var(--cscal-y);
  z-index: 10;
  box-sizing: border-box;
  width: 380px;
  max-width: var(--cscal-situation-width);
  max-height: var(--cscal-situation-height);
  overflow-y: auto;
  pointer-events: none;
  padding: var(--space-3);
  border: 1px solid var(--cscal-line);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--cscal-ink);
  box-shadow: var(--shadow-lg);
  font-size: var(--font-size-xs);
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.cscal-situation-pinned { pointer-events: auto; }
.cscal-situation-tip h3 {
  margin: var(--space-2) 0 var(--space-1);
  font-size: var(--font-size-sm);
}
.cscal-situation-tip p { margin: var(--space-1) 0; white-space: pre-wrap; }
.cscal-situation-tip ul { margin: var(--space-1) 0; padding-left: var(--space-4); }
.cscal-situation-tip li { white-space: pre-wrap; }
.cscal-situation-alert { color: var(--color-danger); white-space: pre-wrap; }
.cscal-situation-rule { color: var(--cscal-sub); }
.cscal-situation-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  color: var(--cscal-sub);
}
.cscal-situation-foot > span { white-space: nowrap; }
.cscal-situation-badges { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.cscal-situation-badge {
  display: inline-block;
  padding: 0 var(--space-1);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-muted);
  font-size: var(--font-size-xs);
}
.cscal-row-attention > .cscal-name > .cscal-situation-badge { color: var(--color-danger); }
.cscal-link-badge,
.cscal-situation-btn {
  display: inline-block;
  margin-top: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: var(--font-size-xs);
  cursor: pointer;
}
.cscal-link-badge:focus-visible,
.cscal-situation-link-badge:focus-visible,
.cscal-situation-btn:focus-visible { outline: 2px solid var(--color-primary); }

.cscal-link-badge { margin-right: var(--space-1); }
.cscal-link-badge:disabled { color: var(--text-muted); cursor: default; }
.cscal-situation-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-block: var(--space-2);
}
.cscal-situation-link-badge {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-muted);
  color: var(--text-primary);
  font-size: var(--font-size-xs);
}

.cscal-tip {
  position: absolute;
  left: var(--cscal-x);
  top: var(--cscal-y);
  z-index: 10;
  width: 360px;
  max-width: 90vw;
  padding: 12px;
  border: 1px solid var(--cscal-line);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  box-shadow: var(--shadow-lg);
}

.cscal-tip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.cscal-tip-title {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--cscal-ink);
}

.cscal-tip-meta {
  margin-bottom: 8px;
  font-size: var(--font-size-xs);
  color: var(--cscal-sub);
}

.cscal-tip-body {
  max-height: 220px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--cscal-line);
  border-radius: var(--radius-sm);
  background: var(--bg-muted);
  font-size: var(--font-size-xs);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

.cscal-tip-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.cscal-empty {
  padding: 24px;
  text-align: center;
  color: var(--cscal-sub);
  font-size: var(--font-size-sm);
}


/* 顧客対応・LINE・Instagram 共通の顧客バッジ */
.necto-customer-badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  flex: none;
  padding: 1px 6px;
  border: 1px solid;
}
.necto-customer-badge.is-flagged {
  background: var(--color-danger-subtle);
  color: #991b1b;
  border-color: #fecaca;
}
.necto-customer-badge.is-repeat {
  background: var(--color-info-subtle);
  color: #075985;
  border-color: var(--color-info-border);
}
.lc-customer-title,
.igdm-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-2);
}
.igdm-title-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ------------------------------------------------------------
   宿題ボードのタブ（カレンダー / 一覧 / まだ宿題になっていない連絡）
   ⚠️ ページ全体を縦スクロールさせない。各タブの中だけがスクロールする。
   ------------------------------------------------------------ */

.cscal-tabs {
  display: flex;
  flex-direction: column;
  /* ヘッダ・ナビの下から画面下端まで。中身がはみ出しても外側は伸ばさない */
  height: calc(100vh - var(--cscal-tabs-offset, 180px));
  min-height: 360px;
}

.cscal-tabbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 8px 0;
  flex-wrap: wrap;
}

.cscal-tabpanel {
  display: none;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.cscal-tabpanel-active {
  display: block;
}

/* カレンダーはタブの高さいっぱいに広げ、横だけスクロールさせる */
.cscal-tabpanel-active > .cscal {
  height: 100%;
}

.cscal-tabpanel-active > .cscal > .cscal-scroll {
  max-height: none;
}

.cscal-tab-count {
  margin-left: 4px;
  font-weight: 400;
  opacity: 0.75;
}

/* ------------------------------------------------------------
   宿題ボード カレンダー：ツールチップ内の承認UI（第2弾）
   契約: docs/cs-case-board-calendar-CONTRACT.md
   ⚠️ 問い合わせページの承認カードと同じ部品を使う。ここは配置だけを担う。
   ------------------------------------------------------------ */

.cscal-tip-approve {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-default);
}

.cscal-tip-approve-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.cscal-tip-approve-title {
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--text-primary);
}

.cscal-tip-editor {
  width: 100%;
  min-height: 120px;
  max-height: 260px;
  padding: 8px;
  border: 1px solid var(--border-input);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  font-family: inherit;
  font-size: var(--font-size-xs);
  line-height: 1.6;
  resize: vertical;
}

.cscal-tip-counter {
  margin-top: 4px;
  font-size: 10px;
  color: var(--text-tertiary);
  text-align: right;
}

.cscal-tip-counter-over {
  color: var(--color-danger);
  font-weight: 700;
}

/* 非定常依頼のチェック（倉庫のミスと確定していなければ既定ON） */
.cscal-tip-adhoc {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 8px;
  padding: 8px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-muted);
}

.cscal-tip-adhoc-label {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  line-height: 1.5;
}

.cscal-tip-adhoc-why {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  color: var(--text-tertiary);
}

.cscal-tip-error {
  margin-top: 8px;
  padding: 8px;
  border: 1px solid var(--color-danger-subtle);
  border-radius: var(--radius-sm);
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
  font-size: var(--font-size-xs);
  line-height: 1.6;
  white-space: pre-wrap;
}

.cscal-tip-note {
  margin-top: 6px;
  font-size: 10px;
  color: var(--text-tertiary);
  line-height: 1.5;
}

/* 宿題カレンダー第3弾: 既存 cscal 規則の末尾に追加 */
.cscal-name-who {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--cscal-ink);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.cscal-date-cell-month-start {
  box-shadow: inset 2px 0 0 var(--cscal-line);
}

.cscal-legend {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  overflow-x: auto;
  color: var(--cscal-sub);
  font-size: var(--font-size-xs);
}

.cscal-legend-item {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
}

.cscal-watch {
  position: absolute;
  left: var(--cscal-x);
  top: var(--cscal-y);
  width: var(--cscal-w);
  height: var(--cscal-bar-height);
  padding: 0;
  border: 1px solid var(--cscal-sub);
  border-radius: var(--radius-sm);
  background: repeating-linear-gradient(135deg, var(--bg-surface) 0 3px, var(--cscal-line) 3px 5px);
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 1;
}

.cscal-edge {
  position: absolute;
  left: var(--cscal-x);
  top: var(--cscal-y);
  width: 12px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cscal-ink);
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 1;
}

.cscal-edge-start::before,
.cscal-edge-deadline::before,
.cscal-edge-end::before {
  content: "";
  display: block;
  height: 16px;
  width: 0;
  margin: auto;
  border-left: 2px solid currentColor;
}

.cscal-edge-start::before {
  height: 10px;
  width: 6px;
  border: 2px solid currentColor;
  border-right: 0;
}

.cscal-edge-end-deadline::before,
.cscal-edge-deadline-final::before {
  border-left-style: solid;
}

.cscal-edge-end-provisional::before,
.cscal-edge-deadline-provisional::before {
  border-left-style: dotted;
}

.cscal-edge-end-open::before {
  height: 0;
  border: 7px solid transparent;
  border-right: 0;
  border-left: 10px solid var(--color-warning);
}

.cscal-edge:hover,
.cscal-edge:focus-visible,
.cscal-watch:hover,
.cscal-watch:focus-visible {
  outline: 2px solid var(--color-warning);
  outline-offset: 2px;
}

.cscal-track > .cscal-plot {
  z-index: 2;
}

.cscal-plot-inferred {
  border-style: dotted;
  background: transparent;
  border-radius: 0;
  transform: translate(-50%, -50%) rotate(45deg);
  border-color: color-mix(in srgb, var(--cscal-plot-done) 60%, transparent);
}

.cscal-plot-inferred.cscal-plot-pending {
  border-color: var(--cscal-plot-pending);
}

.cscal-plot-inferred.cscal-plot-bundle::after {
  transform: rotate(-45deg);
}

.cscal-plot-has-inferred::before {
  content: "";
  position: absolute;
  left: -6px;
  bottom: -6px;
  width: 5px;
  height: 5px;
  border: 1px dotted var(--cscal-sub);
  background: var(--bg-surface);
  transform: rotate(45deg);
}

.cscal-legend .cscal-legend-sample {
  position: relative;
  flex: none;
  left: auto;
  top: auto;
  transform: none;
  cursor: default;
}

.cscal-legend .cscal-plot-inferred {
  transform: rotate(45deg);
}

.cscal-legend .cscal-watch {
  width: 24px;
}

/* 凡例は実物のセレクタに含めず、専用クラスだけで描画する。 */
.cscal-legend .cscal-legend-sample {
  position: static;
  transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--cscal-plot-size);
  height: var(--cscal-plot-size);
  padding: 0;
  border: calc(var(--space-1) / 2) solid var(--cscal-plot-done);
  border-radius: 50%;
  background: var(--cscal-plot-done);
}

.cscal-legend-sample.cscal-legend-sample-conditional {
  border-style: dashed;
  background: var(--bg-surface);
}

.cscal-legend-sample.cscal-legend-sample-pending {
  border-color: var(--cscal-plot-pending);
  background: var(--cscal-plot-pending);
}

.cscal-legend-sample.cscal-legend-sample-inferred {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.cscal-legend-sample-inferred::before {
  content: "";
  box-sizing: border-box;
  width: var(--cscal-plot-size);
  height: var(--cscal-plot-size);
  border: calc(var(--space-1) / 2) dotted color-mix(in srgb, var(--cscal-plot-done) 60%, transparent);
  transform: rotate(45deg);
}

.cscal-legend-sample.cscal-legend-sample-watch {
  width: calc(var(--space-3) * 2);
  height: var(--cscal-bar-height);
  border: calc(var(--space-1) / 4) solid var(--cscal-sub);
  border-radius: var(--radius-sm);
  background: repeating-linear-gradient(135deg,
    var(--bg-surface) 0 calc(var(--space-1) * 0.75),
    var(--cscal-line) calc(var(--space-1) * 0.75) calc(var(--space-1) * 1.25));
}

.cscal-legend-sample.cscal-legend-sample-start,
.cscal-legend-sample.cscal-legend-sample-deadline,
.cscal-legend-sample.cscal-legend-sample-provisional,
.cscal-legend-sample.cscal-legend-sample-open {
  width: var(--space-3);
  height: calc(var(--space-3) * 2);
  border: 0;
  border-radius: 0;
  color: var(--cscal-ink);
  background: transparent;
}

.cscal-legend-sample-start::before,
.cscal-legend-sample-deadline::before,
.cscal-legend-sample-provisional::before,
.cscal-legend-sample-open::before {
  content: "";
  display: block;
  height: calc(var(--space-2) * 2);
  width: 0;
  border-left: calc(var(--space-1) / 2) solid currentColor;
}

.cscal-legend-sample-start::before {
  height: var(--cscal-bar-height);
  width: calc(var(--space-3) / 2);
  border: calc(var(--space-1) / 2) solid currentColor;
  border-right: 0;
}

.cscal-legend-sample-provisional::before {
  border-left-style: dotted;
}

.cscal-legend-sample-open::before {
  height: 0;
  border: calc(var(--space-2) - var(--space-1) / 4) solid transparent;
  border-right: 0;
  border-left: var(--cscal-bar-height) solid var(--color-warning);
}

/* 顧客対応ハブ: レビュー一括承認 */
.cs-hub-bulk-section { display: none; grid-column: 2 / -1; min-width: 0; min-height: 0; background: var(--bg-surface); padding: var(--space-4); border-radius: var(--radius-lg); overflow: auto; }
.cs-hub-root.is-bulk > .cs-hub-detail-section,
.cs-hub-root.is-bulk > .cs-hub-customer-section { display: none; }
.cs-hub-root.is-bulk > .cs-hub-bulk-section { display: block; }
.cs-hub-bulk-header, .cs-hub-bulk-filters, .cs-hub-bulk-footer { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3) 0; }
.cs-hub-bulk-title { font-size: var(--font-size-xl); margin: 0; }
.cs-hub-bulk-badge, .cs-hub-bulk-control { padding: var(--space-1) var(--space-2); border-radius: var(--radius-md); background: var(--bg-subtle); color: var(--text-secondary); font-size: var(--font-size-base); }
.cs-hub-bulk-control[data-live="true"] { background: var(--color-danger-bg); color: var(--color-danger-text); }
.cs-hub-bulk-button, .cs-hub-bulk-entry { padding: var(--space-2) var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-surface); color: var(--text-primary); font-size: var(--font-size-base); cursor: pointer; }
.cs-hub-bulk-button[aria-pressed="true"] { background: var(--color-primary-subtle); color: var(--color-primary); border-color: var(--color-primary); }
.cs-hub-bulk-button:disabled, .cs-hub-bulk-entry:disabled { opacity: .5; cursor: default; }
.cs-hub-bulk-button[data-primary="true"] { background: var(--color-primary); color: var(--text-inverse); }
.cs-hub-bulk-row { display: grid; grid-template-columns: 24px minmax(0, 0.6fr) minmax(0, 1.4fr) minmax(110px, .45fr); gap: var(--space-3); padding: var(--space-3); border-bottom: 1px solid var(--border-default); border-left: 3px solid transparent; }
.cs-hub-bulk-badge[data-score-band="good"] { color: var(--color-success-dark); }
.cs-hub-bulk-badge[data-score-band="caution"] { color: var(--color-warning-text); }
.cs-hub-bulk-badge[data-score-band="bad"] { color: var(--color-danger-text); }
.cs-hub-bulk-badge[data-incident="true"] { display: inline-block; margin-bottom: var(--space-1); background: var(--color-danger-bg); color: var(--color-danger-text); font-weight: 700; }
.cs-hub-bulk-row[data-attention="warning"] { border-left-color: var(--color-warning); }
.cs-hub-bulk-row[data-attention="danger"] { border-left-color: var(--color-danger); }
.cs-hub-bulk-copy { white-space: pre-wrap; overflow-wrap: anywhere; margin: var(--space-2) 0; font-size: var(--font-size-md); line-height: var(--line-height-relaxed); }
.cs-hub-bulk-status { font-size: var(--font-size-base); overflow-wrap: anywhere; }
.cs-hub-bulk-footer { position: sticky; bottom: 0; background: var(--bg-surface); border-top: 1px solid var(--border-default); }
.cs-hub-bulk-notice { padding: var(--space-3); background: var(--color-info-bg); color: var(--text-primary); white-space: pre-wrap; }
.cs-hub-bulk-unselectable { padding: var(--space-3); background: var(--color-warning-bg); color: var(--text-primary); }
.cs-hub-bulk-dialog { width: min(900px, 90vw); max-height: 85vh; overflow: auto; padding: var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--bg-surface); color: var(--text-primary); margin: auto; }
.cs-hub-bulk-dialog::backdrop { background: var(--bg-nav); opacity: .5; }
.cs-hub-bulk-danger { padding: var(--space-3); background: var(--color-danger-bg); color: var(--color-danger-text); }
.cs-hub-bulk-preview { max-height: 40vh; overflow: auto; }
.cs-hub-bulk-preview-item { padding: var(--space-3); border-bottom: 1px solid var(--border-default); }
.cs-hub-bulk-progress { width: 100%; accent-color: var(--color-primary); }

.cs-hub-bulk-entry { grid-column: 1 / -1; }

/* 月次レポートは外側を固定し、件数が増えた場合だけ選択中のタブ内でスクロールする。 */
.cs-hub-draft-report { overflow: hidden; }
.cs-hub-draft-report-title { flex: none; }
.cs-hub-draft-report-tabbar {
  display: flex;
  flex: none;
  gap: var(--space-2);
  border-bottom: 1px solid var(--border-default);
}
.cs-hub-draft-report-tabpanel {
  display: block;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
/* display を持つクラスでも hidden の非選択状態を優先する。 */
.cs-hub-draft-report-tabpanel[hidden],
.cs-hub-draft-report-toolbar[hidden],
.cs-hub-draft-report-column-options[hidden] { display: none; }
.cs-hub-draft-report-col-hidden { display: none; }
.cs-hub-draft-report-table.is-narrowed { min-width: 0; }
.cs-hub-draft-report-kpis.is-compact {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-bottom: var(--space-3);
}
.cs-hub-draft-report-kpis.is-compact .cs-hub-draft-report-kpi { padding: var(--space-3); }
.cs-hub-draft-report-kpis.is-compact .cs-hub-draft-report-kpi-value { font-size: var(--font-size-xl); }
.cs-hub-draft-report-view-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.cs-hub-draft-report-column-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
}
.cs-hub-draft-report-column-rule { flex-basis: 100%; margin: 0; color: var(--text-secondary); }
.cs-hub-draft-report-rate-basis {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  color: var(--text-secondary);
}
@media (max-width: 1280px) {
  .cs-hub-draft-report-kpis.is-compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .cs-hub-draft-report-kpis.is-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.cs-hub-draft-report-presets {
  display: inline-flex;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.cs-hub-draft-report-preset {
  padding: var(--space-1) var(--space-3);
  border: 0;
  background: var(--bg-muted);
  color: var(--text-secondary);
  font: inherit;
  cursor: pointer;
}
.cs-hub-draft-report-preset + .cs-hub-draft-report-preset {
  border-left: 1px solid var(--border-default);
}
.cs-hub-draft-report-preset.is-active {
  background: var(--color-primary);
  color: var(--text-inverse);
}
.cs-hub-draft-report-preset:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: -3px;
}
.cs-hub-draft-report-custom {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}
.cs-hub-draft-report-tab-count {
  margin-left: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

/* CS: 当社発信メールの開始 */
.cs-hub-outbound-modal {
  /* 全体リセットで dialog も margin:0 になっているため、中央寄せを明示する。 */
  margin: auto;
  width: min(95vw, 1180px);
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--space-5);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  color: var(--text-primary);
}
.cs-hub-outbound-modal::backdrop { background: color-mix(in srgb, var(--text-primary) 40%, transparent); }
.cs-hub-outbound-search { display: flex; gap: var(--space-2); margin-top: var(--space-4); }
/* 注文番号（楽天は26文字）がそのまま読める幅を確保する。 */
.cs-hub-outbound-search .input { flex: 1 1 auto; min-width: 22rem; }
.cs-hub-outbound-search .btn { flex: 0 0 auto; }
.cs-hub-outbound-note { color: var(--text-secondary); font-size: var(--font-size-sm); }
.cs-hub-outbound-results { overflow-x: auto; }
.cs-hub-outbound-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.cs-hub-outbound-table th, .cs-hub-outbound-table td {
  text-align: left; padding: var(--space-2); border-bottom: 1px solid var(--border-default);
}
.cs-hub-outbound-table button { margin: var(--space-1); }
/* 見出しは折り返さない。値も、長い商品名だけを省略する。 */
.cs-hub-outbound-table th { white-space: nowrap; }
.cs-hub-outbound-cell-date,
.cs-hub-outbound-cell-mall,
.cs-hub-outbound-cell-order,
.cs-hub-outbound-cell-name,
.cs-hub-outbound-cell-thread { white-space: nowrap; }
.cs-hub-outbound-cell-name { white-space: normal; min-width: 8rem; }
.cs-hub-outbound-cell-items {
  max-width: 26rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cs-hub-outbound-ship-name { display: block; color: var(--text-secondary); font-size: var(--font-size-xs); }
.cs-hub-outbound-subject { display: grid; gap: var(--space-2); margin-bottom: var(--space-3); font-size: var(--font-size-sm); }

/* LINE / Instagram: AI generation-time rationale and review. */
.sns-ai-judgement-card {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  overflow-wrap: anywhere;
}
.sns-ai-judgement-note, .sns-ai-judgement-label { color: var(--text-secondary); }
.sns-ai-judgement-warning { color: var(--color-danger-text); }
.sns-ai-judgement-card > .cs-hub-ai-judgement-grid,
.sns-ai-judgement-details { margin-top: var(--space-2); }
.sns-ai-judgement-details > summary { cursor: pointer; color: var(--text-secondary); }
.sns-ai-judgement-details[open] > summary { margin-bottom: var(--space-2); }
.sns-ai-judgement-value { white-space: pre-wrap; min-width: 0; }
/* ===== メール窓口 ⇄ その他メール の手動移動（掴んで左ナビへ落とす） ===== */

/* 掴んでいるカード。掴んでいる間だけ薄くして「いま動かしている」と分かるようにする。 */
.mail-routing-dragging {
  opacity: 0.45;
  cursor: grabbing;
}

/* ドラッグ中は落とせる場所を先に見せる（落としてから気づくのでは遅い）。 */
body.mail-routing-drag-active [data-mail-routing-drop] {
  outline: 1px dashed var(--border-medium);
  outline-offset: -2px;
  border-radius: var(--radius-md);
}

[data-mail-routing-drop].mail-routing-drop-hover {
  background: var(--color-primary-subtle);
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
  color: var(--text-primary);
}

/* ドラッグできない環境（タッチ・キーボード）用のメニュー。 */
.mail-routing-menu {
  position: fixed;
  z-index: var(--z-overlay);
  min-width: 180px;
  padding: var(--space-1);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.mail-routing-menu-item {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: var(--font-size-md);
  text-align: left;
  cursor: pointer;
}

.mail-routing-menu-item:hover,
.mail-routing-menu-item:focus-visible {
  background: var(--color-primary-bg);
  color: var(--text-primary);
  outline: none;
}

/* 移動の結果を伝える帯。行き先と、逆向きに移す導線を1つだけ置く。 */
.mail-routing-toast {
  position: fixed;
  left: 50%;
  bottom: var(--space-6);
  transform: translateX(-50%);
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: min(560px, calc(100vw - var(--space-8)));
  padding: var(--space-3) var(--space-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-left: 3px solid var(--color-info);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  color: var(--text-primary);
  font-size: var(--font-size-md);
}

.mail-routing-toast.is-success { border-left-color: var(--color-success); }
.mail-routing-toast.is-error { border-left-color: var(--color-danger); }

.mail-routing-toast-text { flex: 1; }

.mail-routing-toast-close {
  padding: 0 var(--space-1);
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  font-size: var(--font-size-xl);
  line-height: 1;
  cursor: pointer;
}

.mail-routing-toast-close:hover { color: var(--text-primary); }
/* アクション案の「構成」セル。判断と実行の2本を縦に積む。
   片方が「—」でも段の位置がずれないよう、ラベルの幅を固定する。 */
.cs-hub-draft-report-compose-line {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.cs-hub-draft-report-compose-line + .cs-hub-draft-report-compose-line {
  margin-top: var(--space-1);
}
.cs-hub-draft-report-compose-label {
  flex: none;
  width: 3em;
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  text-align: left;
}
/* 帯の地の色＝まだ人が判断していない提案。凡例でも同じ色を見せる。 */
.cs-hub-draft-report-legend-dot.is-empty {
  border: 1px solid var(--border-medium);
  background: var(--bg-subtle);
}
.cs-hub-draft-report-legend-group {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.cs-hub-draft-report-legend-line {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}

/* SNS conversation homework: fixed summary and bounded expansion. */
.sns-case-panel-slot { flex: 0 0 auto; min-width: 0; }
.sns-case-panel-root { border-bottom: 1px solid var(--border-default); background: var(--bg-muted); color: var(--text-primary); font-size: var(--font-size-xs); }
.sns-case-panel-summary { padding: var(--space-2) var(--space-3); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sns-case-panel-body { max-height: min(24vh, 240px); overflow-y: auto; overscroll-behavior: contain; padding: var(--space-2) var(--space-3); }
.sns-case-panel-row { border-bottom: 1px solid var(--border-default); padding: var(--space-2) 0; }
.sns-case-panel-heading { font-weight: var(--font-weight-semibold); overflow-wrap: anywhere; }
.sns-case-panel-text { white-space: pre-wrap; overflow-wrap: anywhere; margin: var(--space-1) 0; }
.sns-case-panel-error { color: var(--color-danger-text); padding: var(--space-2); }
.sns-case-panel-retry { margin: var(--space-1); padding: var(--space-1) var(--space-2); border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--bg-surface); color: var(--text-primary); cursor: pointer; font: inherit; }
.sns-case-panel-loading, .sns-case-panel-empty, .sns-case-panel-more { display: block; padding: var(--space-2); color: var(--text-secondary); }

/* SNS execution history: dedicated namespace; JST timestamps are rendered by the card. */
.sns-execution-history { display: grid; gap: var(--space-2); margin-block: var(--space-2); }
.sns-execution-card { padding: var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-surface); }
.sns-execution-card[data-status="unknown"] { border-color: var(--color-warning); background: var(--color-warning-bg); }
.sns-execution-title { margin: 0; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.sns-execution-time { color: var(--text-secondary); font-size: var(--font-size-xs); margin-block: var(--space-1); }
.sns-execution-outcome, .sns-execution-notice { margin-block: var(--space-2); font-size: var(--font-size-sm); overflow-wrap: anywhere; }
.sns-execution-card[data-status="unknown"] .sns-execution-outcome { font-weight: var(--font-weight-semibold); }
.sns-execution-resolution { display: grid; gap: var(--space-2); }
/* 部分交換でお色が変わるときの注意行（2026-09-11・判断記録 #960）。
   同じ商品のお色違いは商品コードも価格も同じで機械の検査に掛からないため、
   承認者がこの行を読むことが誤発送の最後の砦になる。 */
.cs-hub-action-proposal-detail.is-warning {
  display: block;
  border: 1px solid var(--color-warning);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  margin: var(--space-1) 0;
  font-weight: var(--font-weight-semibold);
}

/* SNS: handled is independent of unread and flags. */
.sns-handled-control {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.sns-handled-badge {
  flex: 0 0 auto;
  white-space: nowrap;
}
.sns-handled-error {
  color: var(--color-danger-text);
  font-size: var(--font-size-xs);
}

/* ===== item robot 予約表（作業 › item robot） ===== */
/* ⚠️ ID セレクタで display を書くと .work-sub-panel { display:none } を上書きしてしまい、
   他のサブタブを開いても予約表が残る（2026-09-11 に実際に発生）。display は .active のときだけ書く */
#workItemRobotPanel { flex-direction: column; height: 100%; min-height: 0; padding: 8px 12px; }
#workItemRobotPanel.active { display: flex; }
.ir-tabs { display: flex; gap: 2px; border-bottom: 2px solid var(--color-border); margin-bottom: 8px; flex: 0 0 auto; }
.ir-tab { border: 1px solid var(--color-border); border-bottom: none; background: var(--color-bg-subtle);
  border-radius: 6px 6px 0 0; padding: 6px 16px; cursor: pointer; font-size: 13px; color: var(--color-text-secondary);
  position: relative; top: 2px; }
.ir-tab.active { background: var(--color-bg-white); color: var(--color-primary); font-weight: 600; border-bottom: 2px solid var(--color-bg-white); }
.ir-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.ir-toolbar { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; flex: 0 0 auto; flex-wrap: wrap; }
.ir-week { font-weight: 600; margin: 0 4px; }
.ir-sub { color: var(--color-text-secondary); font-size: 12px; }
.ir-note { background: var(--color-warning-bg); border: 1px solid var(--color-warning-subtle);
  border-radius: 6px; padding: 6px 12px; font-size: 12px; flex: 0 0 auto; margin-bottom: 6px; }
.ir-legend { display: flex; gap: 10px; flex-wrap: wrap; font-size: 11px; color: var(--color-text-secondary); align-items: center; }
.ir-dot { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 3px; vertical-align: -1px; }
.ir-calwrap { flex: 1 1 auto; min-height: 0; overflow: auto; background: var(--color-bg-white);
  border: 1px solid var(--color-border); border-radius: 6px; }
.ir-cal { border-collapse: collapse; table-layout: fixed; width: max-content; min-width: 100%; }
.ir-cal th, .ir-cal td { border: 1px solid var(--color-border); padding: 0; text-align: center; font-size: 11px; }
/* 罫線の引き方（オーナー指摘 2026-09-11）
   ・日と日の区切り（縦線）をはっきり引く
   ・毎正時は横線を引く
   ・x:30 には線を引かない（狙ってドラッグすれば30分で区切れる、という約束）*/
.ir-cal th, .ir-cal td { border-right: 1px solid #cbd5e1; border-left: none; }
.ir-cal td.ir-slot { border-top: none; }
.ir-cal td.ir-hour { border-top: 1px solid #cbd5e1; }
.ir-cal td.ir-time { border-top: 1px solid #cbd5e1; border-right: 2px solid #94a3b8; }
.ir-cal th.ir-time { border-right: 2px solid #94a3b8; }
.ir-cal th { border-bottom: 2px solid #94a3b8; }
.ir-cal th { background: var(--bg-subtle); padding: 4px 2px; font-weight: 600; position: sticky; top: 0; z-index: 5; }
.ir-cal .ir-time { width: 58px; background: #fafafa; color: var(--color-text-secondary); font-size: 10px;
  position: sticky; left: 0; z-index: 2; }
.ir-cal th.ir-time { z-index: 6; }
.ir-cal td.ir-slot { height: 14px; cursor: crosshair; position: relative; z-index: 0; user-select: none; }
.ir-cal td.ir-slot:hover { background: var(--color-primary-bg); }
.ir-cal td.ir-sel { background: #bfdbfe !important; outline: 1px solid var(--color-primary); outline-offset: -1px; }
.ir-cal .ir-today { background: var(--color-warning-bg); }
.ir-ev { position: absolute; inset: 1px; border-radius: 3px; display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: #fff; font-weight: 600; overflow: hidden; z-index: 1; cursor: default; }
.ir-x { margin-left: 4px; cursor: pointer; opacity: .8; }
.ir-x:hover { opacity: 1; }
.ir-ok-note { background: var(--color-success-bg); color: var(--color-success-text); padding: 6px 10px; margin-bottom: 6px; font-size: 12px; flex: 0 0 auto; }
.ir-cal .ir-lane > td { position: sticky; z-index: 3; background: var(--bg-surface); box-shadow: inset -1px 0 #cbd5e1, inset 0 -1px var(--border-default); }
.ir-cal .ir-lane .ir-lane-lbl { left: 0; z-index: 4; background: var(--bg-subtle); box-shadow: inset -2px 0 #94a3b8, inset 0 -1px var(--border-default); }
.ir-cal .ir-lane-last > td { box-shadow: inset -1px 0 #cbd5e1, inset 0 -2px #94a3b8; }
.ir-cal .ir-lane-last .ir-lane-lbl { box-shadow: inset -2px 0 #94a3b8, inset 0 -2px #94a3b8; }
.ir-cal .ir-lane-cell { padding: 3px; text-align: left; }
.ir-cal thead th { box-shadow: inset -1px 0 #cbd5e1, inset 0 -2px #94a3b8; }
.ir-cal thead th.ir-time { box-shadow: inset -2px 0 #94a3b8, inset 0 -2px #94a3b8; }
.ir-bar, .ir-lane-dot { background: var(--color-danger-subtle); color: var(--color-danger-text); border: 1px solid var(--color-danger-text); border-radius: 3px; }
.ir-bar { display: flex; align-items: center; gap: 2px; width: 100%; padding: 3px 4px; font: inherit; text-align: left; cursor: pointer; }
.ir-bar-warning { background: var(--color-warning-subtle); color: var(--color-warning-text); border-color: var(--color-warning-text); }
.ir-bar-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.ir-bar-arrow { flex-shrink: 0; }
.ir-product-chip { background: var(--bg-surface); border-radius: 2px; padding: 0 2px; }
.ir-lane-more { border: 1px solid var(--color-primary); background: var(--bg-surface); color: var(--color-primary); border-radius: 3px; padding: 3px 10px; font: inherit; cursor: pointer; }
.ir-lane-more:hover { background: var(--color-primary-bg); }
.ir-bar:focus-visible, .ir-lane-more:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.ir-empty-products { color: var(--color-warning-text); }
.table th.ir-restr-products { width: 260px; }
.table td.ir-restr-products { white-space: normal; overflow-wrap: anywhere; }
.ir-restr-note { white-space: pre-wrap; overflow-wrap: anywhere; }
.ir-restr-highlight > td { background: var(--color-warning-subtle); box-shadow: inset 0 2px var(--color-warning-text), inset 0 -2px var(--color-warning-text); }
.ir-tblwrap { flex: 1 1 auto; min-height: 0; overflow: auto; background: var(--color-bg-white);
  border: 1px solid var(--color-border); border-radius: 6px; }
.ir-dlg { width: 420px; }
.ir-dlg-h { padding: 11px 15px; border-bottom: 1px solid var(--color-border); font-weight: 600; }
.ir-dlg-b { padding: 13px 15px; }
.ir-dlg-f { padding: 9px 15px; border-top: 1px solid var(--color-border); display: flex; gap: 8px; justify-content: flex-end; }
.ir-row { margin-bottom: 9px; }
.ir-row label { display: block; font-size: 11px; color: var(--color-text-secondary); margin-bottom: 2px; }
.ir-row input, .ir-row select, .ir-row textarea { width: 100%; border: 1px solid var(--color-border);
  border-radius: 5px; padding: 5px 8px; font-size: 13px; font-family: inherit; }
.ir-hint { font-size: 11px; color: var(--color-text-secondary); margin-top: 3px; }
.ir-warn { background: var(--color-danger-bg); border: 1px solid var(--color-danger-subtle);
  color: var(--color-danger-text); border-radius: 5px; padding: 7px 9px; font-size: 12px; margin-top: 6px; }
#irDlg { border: none; border-radius: 10px; padding: 0; box-shadow: 0 10px 40px rgba(0,0,0,.2);
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; }
#irDlg::backdrop { background: rgba(0,0,0,.35); }
#irRestrDlg { border: none; border-radius: 10px; padding: 0; box-shadow: 0 10px 40px rgba(0,0,0,.2);
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; }
#irRestrDlg::backdrop { background: rgba(0,0,0,.35); }

/* AI draft authors: shared by approval cards and the inquiry list. */
.badge-primary { background: var(--color-primary-subtle); color: var(--color-primary); }
.badge-draft-codex { --draft-codex-bg: #ede9fe; --draft-codex-text: #5b21b6;
  background: var(--draft-codex-bg); color: var(--draft-codex-text); }
.badge-draft-author { border: 1px solid currentColor; font-size: var(--font-size-md);
  padding: var(--space-1) var(--space-2); font-weight: 600; }

/* 管理 > 発注関連 > 設定: メソッドの表示範囲 */
.order-method-modes { margin-bottom: var(--space-4); }
.order-method-modes h3 { margin-top: 0; }
.order-method-mode-fields { display: grid; gap: var(--space-3); }
.order-method-mode-fields fieldset { margin: 0; min-width: 0; }
.order-method-mode-fields label { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-2); }
.order-method-mode-fields .toolbar { flex-wrap: wrap; height: auto; }
.order-method-mode-status { color: var(--text-secondary); }
.order-method-mode-status[data-error="true"] { color: var(--color-danger); }

/* メール一覧: 取引先の管理・その場で登録 */
.gmail-partner-menu { position: relative; }
.gmail-partner-menu-popover {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: var(--z-dropdown);
  min-width: 280px;
  max-width: min(380px, 90vw);
  max-height: min(560px, 75vh);
  overflow-y: auto;
  padding: var(--space-1);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-xl);
  font-size: var(--font-size-sm);
  overflow-wrap: anywhere;
}
.gmail-partner-menu-list,
.gmail-partner-quick,
.gmail-partner-quick-kinds {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.gmail-partner-menu-item {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.gmail-partner-menu-item:hover:not(:disabled) { background: var(--color-primary-bg); }
.gmail-partner-menu-item:disabled { color: var(--text-muted); cursor: default; }
.gmail-partner-quick {
  margin-top: var(--space-2);
  padding: var(--space-3);
  border-top: 1px solid var(--border-default);
}
.gmail-partner-quick-name { font-weight: var(--font-weight-semibold); }
.gmail-partner-quick-address,
.gmail-partner-quick-message { overflow-wrap: anywhere; }
.gmail-partner-quick-note,
.gmail-partner-quick-count { color: var(--text-muted); }
.gmail-partner-quick-kinds label,
.gmail-partner-quick-actions { display: flex; align-items: center; gap: var(--space-2); }
.gmail-partner-quick-count.is-warning { color: var(--color-danger); }
.gmail-partner-menu :focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: var(--space-1);
}
.gmail-partner-menu [hidden] { display: none; }

/* Gmail pane handles remain outside collapsed/inert content. */
.gmail-inbox-pane-handle {
  flex: 0 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: col-resize;
  touch-action: none;
  user-select: none;
  color: var(--text-secondary);
  background: var(--bg-subtle);
  font-size: var(--font-size-base);
}
.gmail-inbox-pane-handle[hidden] { display: none; }
.gmail-inbox-pane-handle:hover,
.gmail-inbox-pane-handle:focus-visible { background: var(--color-primary-subtle); }
.gmail-inbox-pane-handle:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -2px; }
.gmail-inbox-layout.is-resizing { cursor: col-resize; user-select: none; }
.gmail-inbox-layout.is-resizing iframe { pointer-events: none; }
.gmail-inbox-list-pane.is-collapsed,
.gmail-inbox-action-pane.is-collapsed {
  min-width: 0;
  width: 0;
  overflow: hidden;
  border: none;
  visibility: hidden; /* Also prevents focus in browsers without inert. */
}
.gmail-inbox-layout > .gmail-inbox-center { min-width: 320px; }
.gmail-inbox-message-sender { overflow-wrap: anywhere; }
.gmail-inbox-message-controls { min-width: 0; }

/* メール窓口の移動確認で、残る記録を読みやすく並べる。 */
.mail-routing-confirm-list { margin: 12px 0; padding-left: 24px; }
.mail-routing-confirm-list li { margin: 4px 0; }

/* 販路API返金（顧客対応スレッド上のカード ＋ 顧客対応 > 返金待ち 一覧）。
   設計: docs/rr-refund-mall-api-DESIGN.md §12-2 ／ モック: docs/mockups/rr-refund-mall-api-ui-mock.html
   カードはスレッド上でも一覧上でも同じ見た目にする（置き場所で作り分けない）。 */
.mall-refund-card { display: grid; gap: var(--space-3); }
.mall-refund-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.mall-refund-card-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}
.mall-refund-card-body { display: grid; gap: var(--space-2); }
.mall-refund-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  font-size: var(--font-size-base);
  color: var(--text-tertiary);
}

/* 請求の内訳（いま / 返金後）と、結果の照合（予定 / 実際）。
   金額は桁をそろえて読むので tabular-nums を当てる。 */
.mall-refund-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-base);
}
.mall-refund-table th {
  text-align: right;
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--border-default);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-tertiary);
}
.mall-refund-table th:first-child { text-align: left; }
.mall-refund-table td {
  padding: var(--space-1) var(--space-2);
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}
.mall-refund-table td:first-child { text-align: left; color: var(--text-tertiary); }
.mall-refund-row-sub td { color: var(--text-muted); font-size: var(--font-size-sm); }
.mall-refund-row-total td {
  border-top: 1px solid var(--border-default);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}
.mall-refund-row-refund td {
  background: var(--color-primary-bg);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-active);
}
.mall-refund-cell-changed { color: var(--color-primary-active); font-weight: var(--font-weight-semibold); }
.mall-refund-cell-keep { color: var(--text-muted); }

.mall-refund-note {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-muted);
  font-size: var(--font-size-base);
  color: var(--text-secondary);
}
.mall-refund-note-strong { font-weight: var(--font-weight-semibold); color: var(--color-warning-text); }
.mall-refund-note-success {
  border-color: var(--color-success-subtle);
  background: var(--color-success-bg);
  color: var(--color-success-text);
}
.mall-refund-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.mall-refund-feedback { margin: 0; }

/* 結果不明（§9）の決着の3択。
   🔴 3つ目「未返金だった」だけ意味が逆（お金が動いていない）なので、
      2つ目「販路で返金した」と取り違えないよう、お金が動いたかで組を分けて枠と色を変える。 */
.mall-refund-resolve-choices { display: grid; gap: var(--space-3); }
.mall-refund-resolve-group {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}
.mall-refund-resolve-group-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-tertiary);
}
/* 未返金＝やり直す側。赤い縁取りで「返金済み」の組と地の色から違えて見せる */
.mall-refund-resolve-group-retry {
  border-color: var(--color-danger-subtle);
  background: var(--color-danger-bg);
}
.mall-refund-resolve-group-retry .mall-refund-resolve-group-title { color: var(--color-danger-text); }
.mall-refund-resolve-choice {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
}
.mall-refund-resolve-hint {
  flex: 1 1 18rem;
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}

.mall-refund-queue { display: grid; gap: var(--space-3); }
.mall-refund-queue-list { display: grid; gap: var(--space-3); }
.mall-refund-queue-row {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}
.mall-refund-queue-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.mall-refund-queue-no {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}
.mall-refund-queue-order {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}
.mall-refund-queue-amount {
  margin-left: auto;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--color-primary-active);
}
.mall-refund-queue-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  font-size: var(--font-size-base);
  color: var(--text-tertiary);
}
/* 金額は一覧のSQLでは出ず、`queue/amounts` で後から差し込む（listing.ts）。
   差し替える入れ物は、空のときに余白を作らない。 */
.mall-refund-queue-amount-slot {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}
.mall-refund-queue-amount-slot .mall-refund-queue-amount { margin-left: 0; }
.mall-refund-queue-amount-pending {
  font-size: var(--font-size-base);
  color: var(--text-muted);
}
.mall-refund-queue-blocked-slot:empty { display: none; }
.mall-refund-queue-caps-slot:empty { display: none; }
/* 実行・決着の結果。カードは作り直されるので、結果はカードの外に残す。
   成功の色はここで持つ（2026-09-30 に発注画面が足した共通の .alert-success とは枠線の色が違う別物）。 */
.mall-refund-queue-result { margin: 0; }
.mall-refund-queue-result-success {
  border-color: var(--color-success-subtle);
  background: var(--color-success-bg);
  color: var(--color-success-text);
}
.mall-refund-queue-actions { display: grid; gap: var(--space-2); }
.mall-refund-queue-candidate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  color: var(--text-secondary);
}
.mall-refund-queue-card-slot:empty { display: none; }

/* 顧客対応スレッド上の返金カード（設計 §12-2 の主たる導線）。
   見出し以外は返金待ち一覧と同じ部品・同じ見た目にする（場所で作り分けない）。 */
.mall-refund-thread-slot:empty { display: none; }
.mall-refund-thread-panel {
  display: grid;
  gap: var(--space-3);
  margin: 10px 0;
  padding: 12px;
}
.mall-refund-thread-list { display: grid; gap: var(--space-3); }
.mall-refund-thread-case {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}

/* ─── 在庫フロー: 納品先の内訳と単位トグル ───────────────────
   設計: docs/multi-warehouse-inventory-flow-DESIGN.md §2・§3 */

/* 単位トグル（枚で見る／パックで見る） */
.inv-flow-unit {
  display: inline-flex;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.inv-flow-unit-btn {
  padding: 4px 10px;
  border: none;
  background: var(--bg-surface);
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-family: inherit;
  cursor: pointer;
}
.inv-flow-unit-btn.active {
  background: var(--color-primary);
  color: #fff;
}
.inv-flow-unit-btn:disabled {
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: 0.55;
}

/* 3段目（納品先の行）。SKU行よりさらに一段内側に置く。 */
.inv-flow-dest-row { background: var(--bg-subtle); }
.inv-flow-dest-name {
  padding-left: 40px;
  color: var(--text-secondary);
}
/* 拠点に対応の無い納品先（ラルカ・石塚宅など）。在庫の話をしない先であることを示す。 */
.inv-flow-dest-name.is-no-location { font-style: italic; }

/* 未取得（0と書かない）。設計書 §6 */
.inv-flow-unobserved {
  color: var(--color-danger-text);
  font-weight: 600;
  font-size: var(--font-size-xs);
}
/* 親＝子の合計が崩れた行の印（max(0,…)のクランプで潰した差） */
.inv-flow-mismatch-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 0 4px;
  border-radius: var(--radius-sm);
  background: var(--color-warning-subtle);
  color: var(--color-warning-text);
  font-size: var(--font-size-xs);
  font-weight: 600;
}
/* 計上されなかった発送明細の通知（設計書 §7-2） */
.inv-flow-unmatched-note {
  margin-bottom: var(--space-2);
  padding: 8px 10px;
  border-left: 3px solid var(--color-warning);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  font-size: var(--font-size-sm);
}

/* ─── 在庫フロー第2弾・納入一覧: 倉庫ごとの到着（ADR-0040・承認モック 3-inventory-flow-arrivals） ─── */
/* 倉庫のバッジ（表示用の頭文字・倉庫の判定は拠点台帳＝ADR-0037） */
.warehouse-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 0 6px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
  background: var(--bg-subtle);
  color: var(--text-secondary);
}
.warehouse-badge.is-rsl { background: var(--color-danger-subtle); color: var(--color-danger-text); }
.warehouse-badge.is-fba-jp { background: var(--color-warning-subtle); color: var(--color-warning-text); }
.warehouse-badge.is-fba-us { background: var(--color-info-subtle); color: var(--color-info); }
.warehouse-badge.is-syag { background: var(--color-primary-subtle); color: var(--color-primary-active); }
.warehouse-badge.is-unset { background: var(--bg-subtle); color: var(--text-muted); font-style: italic; }
/* 到着の根拠（到着の記録で数えた） */
.arrival-src {
  margin-left: 3px;
  font-size: 9px;
  color: var(--text-tertiary);
}
/* AGL引き渡し（Amazonの輸送へ渡した1件。海翔ロジ様の AGL1SDL… とは別物） */
.agl-handoff-tag {
  display: inline-block;
  margin-left: 4px;
  padding: 0 4px;
  border-radius: var(--radius-sm);
  background: var(--color-warning-subtle);
  color: var(--color-warning-text);
  font-size: 9px;
  font-weight: 600;
}
.agl-handoff-tag:first-child { margin-left: 0; margin-right: 4px; }
/* 納品先の行のうち開ける行（FBA: AGL引き渡し → 追跡番号） */
.inv-flow-dest-row.is-expandable { cursor: pointer; }
.inv-flow-dest-arrow { display: inline-block; width: 10px; font-size: 9px; }
/* AGL引き渡しの子行 */
.inv-flow-handoff-row td {
  background: var(--color-warning-bg);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}
.inv-flow-handoff-row td.inv-flow-handoff-label { padding-left: 58px; }
.inv-flow-handoff-row td.inv-flow-handoff-note { color: var(--color-warning-text); }
/* 納入一覧: 便の到着の状態バッジ（一部到着） */
.sr-status-partial {
  padding: 0 4px;
  border-radius: var(--radius-sm);
  background: var(--ucnb-purple-text);
  color: var(--text-inverse);
  font-size: 9px;
}
/* 納入一覧: RSL・FBAの到着日（入力欄を出さない・到着の記録から表示） */
.sr-arrival-recorded { font-size: var(--font-size-xs); color: var(--text-secondary); }
.sr-arrival-pending { font-size: var(--font-size-xs); color: var(--text-tertiary); }
/* 納入一覧: AGL引き渡しの子行（Amazon側で分かれた追跡番号） */
.sr-split-row td {
  padding: 2px 4px;
  background: var(--color-warning-bg);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}
.sr-split-row td.sr-split-label { padding-left: 18px; }
/* 納入一覧: RSL・FBA便の明細で到着数を入力させない理由 */
.sr-arrival-locked-note {
  margin-bottom: 4px;
  padding: 4px 8px;
  border-left: 3px solid var(--color-warning);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  font-size: var(--font-size-xs);
}

/* 顧客対応: 完了した記録は会話の時系列へ、残った作業は会話の後へ置く。 */
.cs-hub-timeline-record {
  border: 1px solid var(--border-default);
  border-radius: 6px;
  padding: 8px 12px;
  margin: 6px 0;
}
.cs-hub-timeline-record > summary {
  cursor: pointer;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  list-style-position: inside;
}
.cs-hub-timeline-unknown, .cs-hub-thread-todo {
  margin-top: 16px;
}
.cs-hub-timeline-notice {
  color: var(--text-secondary);
  margin: 8px 0;
}
.mall-refund-details { margin-top: 8px; }
.mall-refund-details > summary { cursor: pointer; }
.mall-refund-primary { font-weight: 600; }

/* 返金する明細（倉庫で受け取ったもの）と「開封後は返金しない商品」の登録。
   設計: docs/no-refund-after-open-DESIGN.md §9 ／ モック: refund-select-mock.html（オーナー確認済み）
   金額は画面で計算しない。チェックを変えるとサーバに保存して、カード全体を描き直す。 */
.mall-refund-lines {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.mall-refund-lines-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-muted);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--text-secondary);
}
.mall-refund-lines-count {
  font-weight: var(--font-weight-normal);
  color: var(--text-muted);
  font-size: var(--font-size-base);
}
.mall-refund-line {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: var(--space-2) 10px;
  align-items: center;
  padding: 9px var(--space-3);
  border-top: 1px solid var(--border-default);
  font-size: var(--font-size-md);
  cursor: pointer;
}
.mall-refund-line:hover { background: var(--bg-hover); }
/* 返金カードとして出したAIの返金起案の操作欄（要注意顧客の登録・数量を直す・却下） */
.mall-refund-proposal-controls { display: grid; gap: var(--space-2); margin-top: var(--space-2); }
/* 返送なしの返金（起案・返金指示）で返す明細。選べないのでチェック欄と押せる見た目を持たない */
.mall-refund-line.is-readonly { grid-template-columns: 1fr auto; cursor: default; }
.mall-refund-line.is-readonly:hover { background: transparent; }
.mall-refund-line-check { width: 16px; height: 16px; margin: 0; }
.mall-refund-line-main { display: grid; gap: 2px; min-width: 0; }
.mall-refund-line-sku { font-weight: var(--font-weight-semibold); color: var(--text-primary); }
.mall-refund-line-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: center;
  color: var(--text-secondary);
  font-size: var(--font-size-base);
}
.mall-refund-line-price {
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}
.mall-refund-line.is-off .mall-refund-line-main,
.mall-refund-line.is-off .mall-refund-line-price { opacity: .5; }
.mall-refund-line.is-off .mall-refund-line-price { text-decoration: line-through; }
.mall-refund-line-warn {
  grid-column: 2 / 4;
  font-size: var(--font-size-base);
  color: var(--color-danger-text);
}
.mall-refund-lines-changed,
.mall-refund-lines-status {
  padding: 6px var(--space-3);
  border-top: 1px solid var(--border-default);
  background: var(--bg-muted);
  font-size: var(--font-size-base);
  color: var(--text-tertiary);
}
.mall-refund-lines-error { margin: var(--space-2) var(--space-3); }
/* 返送なしで返金する品の追加欄（商品・数量・理由・追加） */
.mall-refund-refund-only-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--border-default);
}
.mall-refund-refund-only-sku { flex: 1 1 180px; min-width: 0; }
.mall-refund-refund-only-qty { width: 64px; }
.mall-refund-refund-only-reason { flex: 2 1 200px; min-width: 0; }

.mall-refund-tag {
  display: inline-block;
  padding: 1px 7px;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  line-height: 1.6;
}
.mall-refund-tag-new { background: var(--color-success-bg); color: var(--color-success-text); border-color: var(--color-success-subtle); }
.mall-refund-tag-opened { background: var(--color-warning-bg); color: var(--color-warning-text); border-color: var(--color-warning-subtle); }
.mall-refund-tag-dispose { background: var(--color-danger-bg); color: var(--color-danger-text); border-color: var(--color-danger-subtle); }
.mall-refund-tag-policy,
.mall-refund-tag-unknown { background: var(--bg-muted); color: var(--text-secondary); border-color: var(--border-medium); }

.mall-refund-linkbtn {
  padding: 0;
  border: none;
  background: none;
  color: var(--color-primary);
  font-size: var(--font-size-base);
  cursor: pointer;
}
.mall-refund-linkbtn:hover { color: var(--color-primary-hover); text-decoration: underline; }
.mall-refund-linkbtn:disabled { color: var(--text-muted); cursor: not-allowed; text-decoration: none; }

/* アコーディオン。AIの提案があるときだけ自動で開き、枠を強調する（is-ai-open）。 */
.mall-refund-nr { border: 1px solid var(--border-default); border-radius: var(--radius-md); }
.mall-refund-nr > summary {
  list-style: none;
  display: flex;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-base);
  color: var(--text-tertiary);
  cursor: pointer;
}
.mall-refund-nr > summary::-webkit-details-marker { display: none; }
.mall-refund-nr > summary::before { content: "▸"; font-size: var(--font-size-sm); transition: transform var(--transition-fast); }
.mall-refund-nr[open] > summary::before { transform: rotate(90deg); }
.mall-refund-nr.is-ai-open { border-color: var(--color-primary-light); box-shadow: 0 0 0 3px var(--color-primary-bg); }
.mall-refund-nr.is-ai-open > summary { color: var(--color-primary-active); font-weight: var(--font-weight-semibold); }
.mall-refund-nr-body { display: grid; gap: var(--space-3); padding: var(--space-1) 14px 14px; font-size: var(--font-size-md); }
.mall-refund-nr-body:empty { display: none; }
.mall-refund-nr-ai {
  display: grid;
  gap: var(--space-1);
  padding: 10px var(--space-3);
  border: 1px solid var(--color-primary-subtle);
  border-radius: var(--radius-md);
  background: var(--color-primary-bg);
}
.mall-refund-nr-ai.is-maybe { background: var(--bg-muted); border-color: var(--border-medium); }
.mall-refund-nr-ai-title { font-weight: var(--font-weight-bold); color: var(--color-primary-active); }
.mall-refund-nr-ai.is-maybe .mall-refund-nr-ai-title { color: var(--text-secondary); }
.mall-refund-nr-ai-reason { color: var(--text-secondary); line-height: 1.6; white-space: pre-wrap; }
.mall-refund-nr-selection { display: grid; gap: var(--space-3); }
.mall-refund-nr-main {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.mall-refund-nr-main input { width: 16px; height: 16px; margin-top: 3px; }
.mall-refund-nr-main b { font-size: var(--font-size-lg); }
.mall-refund-nr-main-sub { display: block; margin-top: 2px; }
.mall-refund-nr-muted { color: var(--text-muted); font-size: var(--font-size-base); }
.mall-refund-nr-sim { display: grid; gap: var(--space-2); }
.mall-refund-nr-sim-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.mall-refund-nr-sim-title { font-weight: var(--font-weight-semibold); color: var(--text-secondary); }
.mall-refund-nr-count { font-size: var(--font-size-base); color: var(--text-tertiary); }
.mall-refund-nr-sim-list { display: grid; gap: 10px; }
.mall-refund-nr-matrix { width: auto; border-collapse: collapse; font-size: var(--font-size-base); }
.mall-refund-nr-matrix th,
.mall-refund-nr-matrix td { border: 1px solid var(--border-default); padding: var(--space-1) var(--space-2); text-align: center; }
.mall-refund-nr-matrix th {
  background: var(--bg-muted);
  font-weight: var(--font-weight-semibold);
  color: var(--text-tertiary);
  cursor: pointer;
}
.mall-refund-nr-matrix th.mall-refund-nr-matrix-row { text-align: left; }
.mall-refund-nr-cell-self { background: var(--color-primary-bg); color: var(--color-primary-active); }
.mall-refund-nr-cell-none { background: var(--bg-muted); color: var(--text-muted); }
.mall-refund-nr-sets-wrap { display: grid; gap: var(--space-1); }
.mall-refund-nr-sets { display: flex; flex-wrap: wrap; gap: 6px; }
.mall-refund-nr-chip {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 3px 9px;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  font-size: var(--font-size-base);
  cursor: pointer;
}
.mall-refund-nr-chip input { margin: 0; }
.mall-refund-nr-future { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--font-size-base); color: var(--text-secondary); }
.mall-refund-nr-actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.mall-refund-nr-done {
  display: grid;
  gap: 2px;
  padding: 10px var(--space-3);
  border: 1px solid var(--color-success-subtle);
  border-radius: var(--radius-md);
  background: var(--color-success-bg);
  color: var(--color-success-text);
  line-height: 1.6;
}
.mall-refund-nr-registered { display: grid; gap: 6px; }
.mall-refund-nr-registered-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; }
.mall-refund-nr-registered-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 10px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}

/* 出来事は全幅で表示し、会話内の間隔は親のgapに揃える。吹き出しの左右寄せは維持する。 */
.cs-hub-messages > .cs-hub-timeline-record {
  align-self: stretch;
  min-width: 0;
  margin: 0;
}
.cs-hub-timeline-record {
  min-width: 0;
  overflow-wrap: anywhere;
}
/* Shared de-escalation record on thread, customer and SNS approval cards. */
.cs-hub-de-escalation {
  flex-basis: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* 健康被害の申告の印。承認ボタン付近・AI判断カードの先頭に出し、承認前に必ず目を通させる。 */
.cs-hub-health-report {
  flex-basis: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: var(--space-2) 0;
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--color-danger);
  border-radius: var(--radius-md);
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
  overflow-wrap: anywhere;
}
.cs-hub-health-report-title { font-weight: var(--font-weight-bold); }
.cs-hub-health-report-basis { color: var(--text-primary); }
.cs-hub-health-report-note { font-size: var(--font-size-sm); }

/* メール1通ごとの宛先（To / Cc）。差出人行の下に小さく出す。
   ⚠️ 当社のアドレスだけ色を変えている（自分が To なのか Cc なのかを見分けるため）。 */
.gmail-inbox-message-recipients {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--space-1);
  margin-bottom: var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}
.gmail-inbox-recipient-row { display: flex; gap: var(--space-1); align-items: baseline; min-width: 0; }
.gmail-inbox-recipient-label {
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}
.gmail-inbox-recipient-values { overflow-wrap: anywhere; min-width: 0; }
.gmail-inbox-recipient-address { margin-right: var(--space-1); }
.gmail-inbox-recipient-address.is-us { color: var(--color-primary); font-weight: var(--font-weight-medium); }
.gmail-inbox-recipient-unknown { color: var(--text-muted); font-style: italic; }
.gmail-inbox-recipient-more {
  padding: 0;
  border: none;
  background: none;
  color: var(--color-primary);
  font-family: inherit;
  font-size: var(--font-size-sm);
  text-decoration: underline;
  cursor: pointer;
}
.gmail-inbox-message-recipients[data-collapsed="true"] .overflow { display: none; }
.gmail-inbox-message-recipients[data-collapsed="false"] .gmail-inbox-recipient-more { display: none; }
/* 取引先に登録する候補（差出人・To・Cc）の一覧。宛先が多いメールでも画面から溢れさせない。 */
.gmail-partner-quick-candidates { max-height: 16rem; overflow-y: auto; margin-bottom: var(--space-2); }
.gmail-partner-quick-candidate {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  margin-bottom: var(--space-1);
  cursor: pointer;
}
.gmail-partner-quick-candidate-text { display: flex; flex-direction: column; min-width: 0; }
.gmail-partner-quick-candidate-name { color: var(--text-primary); }
.gmail-partner-quick-candidate .gmail-partner-quick-address {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}
.gmail-partner-quick-role {
  flex-shrink: 0;
  margin-left: auto;
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}

/* ページタブと入稿内の切替は別階層。スクロールは各ペインが受け持つ。 */
#workAmazonCampaignMarketingPanel { overflow: hidden; }
#workAmazonCampaignMarketingPanel.active { display: flex; flex-direction: column; }
.amazon-page-tabs { display: flex; flex: none; gap: var(--space-4); padding: 0 var(--space-4); border-bottom: 1px solid var(--border-default); }
.amazon-page-tab { background: transparent; border: 0; border-bottom: 3px solid transparent; padding: var(--space-3); font: inherit; font-size: var(--font-size-lg); color: var(--text-secondary); cursor: pointer; }
.amazon-page-tab[aria-selected="true"] { border-bottom-color: var(--color-primary); color: var(--text-primary); font-weight: 600; }
.amazon-page-pane { flex: 1; min-height: 0; overflow: auto; }
.amazon-page-pane[hidden], .amazon-item-detail[hidden] { display: none !important; }
.amazon-sheet-label, .amazon-submission-status { color: var(--text-tertiary); font-size: var(--font-size-sm); }
.amazon-item-detail .table { min-width: 50rem !important; }
.amazon-item-detail p { white-space: normal; }

#amazonPromotionRecords .table { table-layout: auto; min-width: 90rem; }
#amazonPromotionRecords .table td:nth-child(3) { white-space: normal; min-width: 14rem; max-width: 24rem; }

/* ── 人間メモ・フラグ（会話ごと・2026-09-26）── modules/cs-hub/staff-note.js
   顧客対応ハブ・LINE・インスタDMの3画面で共通に使う。 */
.staff-note {
  position: relative;
  display: inline-flex;
  min-width: 0;
}
.staff-note[hidden] { display: none; }
.staff-note-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  max-width: 420px;
  min-width: 0;
  padding: 2px var(--space-3);
  border: 1px dashed var(--border-medium);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.staff-note-badge:hover { border-color: var(--color-primary); color: var(--color-primary); }
.staff-note-badge:focus-visible { box-shadow: var(--shadow-focus); outline: none; }
.staff-note-badge.is-filled {
  border: 1px solid var(--color-warning);
  background: var(--color-warning);
  box-shadow: 0 0 0 3px var(--color-warning-subtle);
  color: var(--text-inverse);
  font-weight: var(--font-weight-bold);
}
.staff-note-badge-label { flex: none; white-space: nowrap; }
.staff-note-badge-text {
  min-width: 0;
  overflow: hidden;
  font-weight: var(--font-weight-normal);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.staff-note-badge-text::before { content: "｜"; }
.staff-note-pop {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  z-index: var(--z-dropdown);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 440px;
  max-width: 80vw;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-lg);
  color: var(--text-primary);
  font-weight: var(--font-weight-normal);
}
.staff-note-pop[hidden] { display: none; }
.staff-note-pop-title { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); }
.staff-note-pop-help,
.staff-note-pop-meta { color: var(--text-muted); font-size: var(--font-size-xs); }
.staff-note-textarea {
  width: 100%;
  min-height: 120px;
  resize: vertical;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}
.staff-note-pop-error { color: var(--color-danger-text); font-size: var(--font-size-xs); }
.staff-note-pop-error[hidden] { display: none; }
.staff-note-pop-actions { display: flex; gap: var(--space-2); justify-content: flex-end; }
.staff-note-pop-actions .staff-note-delete { margin-right: auto; color: var(--color-danger-text); }
.staff-note-pop-actions .staff-note-delete[hidden] { display: none; }
.badge.staff-note-list-badge {
  background: var(--color-warning);
  color: var(--text-inverse);
  font-weight: var(--font-weight-bold);
}
.staff-flag-button {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border-radius: var(--radius-sm);
  color: var(--border-medium);
  cursor: pointer;
  line-height: 1;
}
.staff-flag-button:hover { background: var(--bg-muted); color: var(--text-muted); }
.staff-flag-button:focus-visible { box-shadow: var(--shadow-focus); outline: none; }
.staff-flag-button.is-on,
.staff-flag-button.is-on:hover { color: var(--color-danger); }
.staff-flag-filter {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}
.staff-flag-filter-icon { font-size: var(--font-size-xs); }
.staff-flag-filter-select { width: auto; }
.cs-hub-thread-row.is-staff-flagged {
  background: linear-gradient(90deg, var(--color-danger-bg), var(--bg-surface) 60%);
}
.cs-hub-thread-row.is-staff-flagged.is-selected {
  background: linear-gradient(90deg, var(--color-danger-bg), var(--color-primary-bg) 60%);
}

/* ===== Amazon セール入稿管理（セール一覧） ===== */
#amazonSaleList .table { table-layout: auto; min-width: 72rem; }
#amazonSaleList .table td { vertical-align: top; }
#amazonSaleList { position: relative; }
#amazonSaleList .amazon-sale-table-container { width: max-content; }
#amazonSaleList .amazon-sale-table { table-layout: fixed; width: 0; min-width: 0; }
.amazon-sale-table th { position: relative; padding-right: 14px; }
.amazon-sale-table td { overflow-wrap: anywhere; }
.amazon-sale-col-resizer { position: absolute; top: 0; right: 0; bottom: 0; width: 8px; cursor: col-resize; }
.amazon-sale-col-resizer:hover, .amazon-sale-col-resizer.is-dragging { background: var(--color-primary); }
.amazon-sale-resizing, .amazon-sale-resizing * { cursor: col-resize !important; user-select: none !important; }
.amazon-sale-help { border: 0; cursor: pointer; font: inherit; }
.amazon-sale-help:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
/* 共通 .necto-tooltip と同じ配色・余白。スクロール領域の外に置いて切れを防ぐ。 */
.amazon-sale-tooltip { position: absolute; bottom: 100%; left: var(--space-2); z-index: var(--z-tooltip);
  max-width: min(320px, calc(100% - 16px)); padding: 6px 10px; border-radius: var(--radius-md);
  background: var(--bg-nav); color: var(--text-inverse); box-shadow: var(--shadow-lg);
  font-size: var(--font-size-sm); line-height: var(--line-height-relaxed); white-space: normal; word-break: break-word; }
.amazon-sale-tooltip[hidden] { display: none; }

.amazon-sale-note { color: var(--text-tertiary); font-size: var(--font-size-xs); }
/* 未着手→進行中→確定。現在地だけを濃くして、そこだけ押せるようにする。 */
.amazon-sale-steps { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }
.amazon-sale-step { display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-1) var(--space-2); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); background: var(--bg-surface); color: var(--text-tertiary);
  font: inherit; font-size: var(--font-size-sm); white-space: nowrap; }
.amazon-sale-step.is-current { background: var(--color-primary); border-color: var(--color-primary);
  color: var(--text-inverse); font-weight: 600; cursor: pointer; }
.amazon-sale-step-arrow { color: var(--text-tertiary); font-size: var(--font-size-sm); }
.amazon-sale-deadline { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.amazon-sale-deadline-main { font-size: var(--font-size-lg); font-weight: 600; white-space: nowrap; }
.amazon-sale-info { width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1px solid var(--border-default);
  background: var(--bg-surface); color: var(--text-secondary); font: inherit; font-size: var(--font-size-xs);
  line-height: 1; cursor: pointer; }
.amazon-sale-deadline-list { margin: 0; padding-left: var(--space-4); }
.amazon-sale-detail[hidden] { display: none !important; }

/* Amazon入稿検討 */
.amazon-entry-toolbar { display: flex; align-items: center; gap: .75rem; flex-wrap: nowrap; overflow-x: auto; padding-block: .5rem; white-space: nowrap; }
.amazon-entry-toolbar > * { flex-shrink: 0; }
.amazon-entry-toolbar h3 { margin: 0; font-size: var(--font-size-lg); }
.amazon-entry-toolbar [data-entry-export] { margin-left: auto; }
.amazon-entry-schedule, .amazon-entry-deadlines { font-size: var(--font-size-sm); color: var(--text-secondary); }
.amazon-entry-summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-block: 1rem; flex-wrap: wrap; }
.amazon-entry-dashboard { flex-wrap: nowrap; gap: .75rem; }
.amazon-entry-stage { display: flex; flex-direction: column; gap: .25rem; min-width: 7rem; padding: .75rem 1.25rem; border: 2px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-surface); color: var(--text-secondary); }
.amazon-entry-stage > span { font-size: var(--font-size-xs); }
.amazon-entry-stage > strong { font-size: 2rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.amazon-entry-stage.is-current { border-color: var(--color-primary); background: var(--color-primary); color: var(--text-inverse); }
.amazon-entry-selection { font-size: var(--font-size-sm); white-space: nowrap; }
.amazon-entry-condition { display: grid; grid-template-columns: 4.5rem 6rem auto; align-items: center; gap: .4rem .6rem; padding: .5rem .65rem; margin-block: .3rem; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-surface); white-space: nowrap; }
.amazon-entry-condition-kind { font-size: var(--font-size-xs); font-weight: 600; }
.amazon-entry-percent { display: flex; align-items: center; gap: .4rem; margin: 0; }
.amazon-entry-percent input { box-sizing: border-box; width: 4.75rem; padding: .4rem; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-surface); color: var(--text-primary); text-align: right; font: inherit; }
.amazon-entry-percent > span { color: var(--text-secondary); }
.amazon-entry-source { padding: .2rem .4rem; border-radius: var(--radius-md); background: var(--bg-secondary); color: var(--text-secondary); font-size: var(--font-size-xs); }
.amazon-entry-source.is-manual { color: var(--color-primary); border: 1px solid currentColor; }
.amazon-entry-reset { grid-column: 2 / -1; justify-self: end; }
.amazon-entry-child { background: var(--bg-secondary); }
.amazon-entry-child-name { padding-left: 2rem !important; min-width: 15rem; }
.amazon-entry-child-name .amazon-sale-note { max-width: 28rem; margin-top: .3rem; line-height: 1.6; }
.amazon-entry-inherited { opacity: .55; }
[data-entry-row-status]:empty, [data-entry-message]:empty { display: none; }

/* Amazon sale SKU decisions and generation imports */
.amazon-sale-upload-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin: 16px 0; }
.amazon-sale-upload-card { border: 1px solid #d1d5db; border-radius: 8px; padding: 16px; display: grid; gap: 12px; }
.amazon-sale-upload-card label, .amazon-sku-inputs label { display: grid; gap: 4px; }
.amazon-sku-recommendation { font-size: 12px; margin-top: 8px; }
.amazon-sku-recommendation span, .amazon-sku-recommendation strong { display: block; }
.amazon-sku-review { background-color: #fff2df; }
.amazon-sku-review strong { color: #8a3b00; }
.amazon-sku-inputs { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin-bottom: 12px; }
.amazon-sku-inputs input { max-width: 110px; }

.cs-hub-adhoc-reference-section { margin-top: var(--space-3); }
.cs-hub-adhoc-reference-heading { display: block; margin: 0 0 var(--space-2); }
.cs-hub-adhoc-reference-title { font-size: var(--font-size-sm); font-weight: 700; }
.cs-hub-adhoc-reference-description { white-space: pre-wrap; color: var(--text-secondary); font-size: var(--font-size-sm); }
.cs-hub-adhoc-reference-images { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
.cs-hub-adhoc-reference-image { margin: 0; max-width: 160px; }
.cs-hub-adhoc-reference-thumbnail { display: block; max-width: 100%; max-height: 160px; object-fit: contain; border-radius: var(--radius-md); }
.cs-hub-adhoc-reference-label { margin-top: var(--space-1); color: var(--text-secondary); font-size: var(--font-size-sm); }

.cs-hub-inquiry-reference-section { margin-top: var(--space-3); }
.cs-hub-inquiry-reference-image { overflow-wrap: anywhere; }
.cs-hub-inquiry-reference-badge { display: inline-block; padding: 2px 6px; border-radius: var(--radius-md); background: var(--color-warning-bg); color: var(--color-warning-text); font-size: var(--font-size-sm); }
.cs-hub-inquiry-reference-provenance { margin: var(--space-1) 0; color: var(--text-secondary); font-size: var(--font-size-xs); }
.cs-hub-inquiry-reference-warning { padding: var(--space-2); border-left: 3px solid var(--color-warning); background: var(--color-warning-subtle); color: var(--color-warning-text); overflow-wrap: anywhere; }

/* 電話の折り返し依頼: NECTO card / form / badge レシピ */
.phone-inquiries-root { overflow-y: auto; }
.phone-callbacks { margin: var(--space-3); flex-shrink: 0; }
.phone-callback-heading,
.phone-callback-meta,
.phone-callback-deadline,
.phone-callback-recordings,
.phone-callback-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.phone-callback-heading { justify-content: space-between; }
.phone-callback-heading h3 { margin: 0; font-size: var(--font-size-lg); }
.phone-callback-request { padding: var(--space-4) 0; border-top: 1px solid var(--border-default); }
.phone-callback-deadline { margin-top: var(--space-2); font-size: var(--font-size-sm); }
.phone-callback-overdue { color: var(--color-danger-text); font-weight: var(--font-weight-bold); }
.phone-callback-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 2fr); gap: var(--space-4); margin: var(--space-3) 0; }
.phone-callback-fields dt { color: var(--text-secondary); font-size: var(--font-size-sm); }
.phone-callback-fields dd { margin: var(--space-1) 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.phone-callback-history { margin: var(--space-3) 0; }
.phone-callback-history summary { cursor: pointer; color: var(--text-secondary); }
.phone-callback-history p,
.phone-callback-handled { white-space: pre-wrap; overflow-wrap: anywhere; }
.phone-callback-actions { align-items: flex-end; }
.phone-callback-actions label { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--font-size-sm); }
.phone-callback-note { flex: 1; min-width: 12rem; }
.phone-callback-note textarea { width: 100%; }
.phone-callback-feedback { margin-top: var(--space-2); color: var(--color-danger-text); }
.phone-callback-player:empty { display: none; }
.phone-callback-player audio { max-width: 100%; }
.phone-inquiries-table-container { flex: none; overflow: visible; }
.phone-inquiries-table th:nth-child(1) { width: 13%; }
.phone-inquiries-table th:nth-child(2) { width: 14%; }
.phone-inquiries-table th:nth-child(3) { width: 25%; }
.phone-inquiries-table th:nth-child(4) { width: 7%; }
.phone-inquiries-table th:nth-child(5) { width: 15%; }
.phone-inquiries-table th:nth-child(6) { width: 9%; }
.phone-inquiries-table th:nth-child(7) { width: 9%; }
.phone-inquiries-table th:nth-child(8) { width: 8%; }
@media (max-width: 900px) {
  .phone-callback-fields { grid-template-columns: minmax(0, 1fr); }
}

/* 通話ルート: サーバの論理座標は維持し、図の内側だけスクロールする。 */
.phone-route[hidden], .phone-inquiries-list[hidden] { display: none; }
.phone-route { min-width: 0; padding: var(--space-3); }
.phone-route h3 { font-size: var(--font-size-lg); margin: var(--space-2) 0; }
.phone-route-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--space-3); }
.phone-route-selection { max-height: 65vh; overflow: auto; }
.phone-route-call { display: flex; align-items: start; gap: var(--space-2); padding: var(--space-2) 0; border-bottom: 1px solid var(--border-default); cursor: pointer; }
.phone-route-call small { display: block; color: var(--text-tertiary); }
.phone-route-diagram { min-width: 0; }
.phone-route-diagram .toolbar { height: auto; flex-wrap: wrap; }
.phone-route-viewport { height: 65vh; overflow: auto; border: 1px solid var(--border-default); background: var(--bg-muted); }
.phone-route-viewport svg { display: block; max-width: none; }
.phone-route-edge { fill: none; stroke: var(--text-muted); }
.phone-route-trail { fill: none; stroke: currentColor; pointer-events: none; }
.phone-route-node { fill: var(--bg-surface); stroke: var(--border-medium); }
.phone-route-label, .phone-route-node-count, .phone-route-count { fill: var(--text-primary); font-size: var(--font-size-base); text-anchor: middle; }
.phone-route-label { font-size: 18px; }
.phone-route-label-long { font-size: 14px; }
.phone-route-edge-hidden { display: none; }
.phone-route-node-count { font-size: 12px; }
.phone-route-full { position: fixed; inset: 12px; z-index: 1000; padding: 8px; background: var(--bg-surface); display: flex; flex-direction: column; }
.phone-route-full .phone-route-viewport { flex: 1; min-height: 0; height: auto; }
.phone-route-full #phoneRouteSvg { margin: 0 auto; }
.phone-route-exit { fill: var(--color-danger-text); font-size: 11px; }
.phone-route-count { paint-order: stroke; stroke: var(--bg-muted); stroke-width: 4px; stroke-linejoin: round; }
.phone-route-dot circle { fill: currentColor; stroke: var(--bg-surface); stroke-width: 2px; }
.phone-route-dot text { fill: var(--text-inverse); font-size: var(--font-size-base); font-weight: var(--font-weight-bold); }
.phone-route-hangup { fill: var(--color-danger-text); font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); }
.phone-route-legends { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0; }
.phone-route-emphasis { filter: drop-shadow(0 0 3px currentColor); font-weight: var(--font-weight-bold); }
.phone-route-emphasis circle { stroke-width: 4px; }
#phoneRouteStatus { padding: var(--space-2) 0; color: var(--text-secondary); }
@media (max-width: 700px) {
  .phone-route-layout { grid-template-columns: minmax(0, 1fr); }
  .phone-route-selection { max-height: 30vh; }
  .phone-route .toolbar { height: auto; flex-wrap: wrap; }
}
.phone-route-color-1 { color: color-mix(in srgb, var(--color-primary) 100%, var(--color-success-dark)); }
.phone-route-color-2 { color: color-mix(in srgb, var(--color-success-dark) 100%, var(--color-danger-text)); }
.phone-route-color-3 { color: color-mix(in srgb, var(--color-danger-text) 100%, var(--color-warning-text)); }
.phone-route-color-4 { color: color-mix(in srgb, var(--color-warning-text) 100%, var(--color-info)); }
.phone-route-color-5 { color: color-mix(in srgb, var(--color-info) 100%, var(--color-primary)); }
.phone-route-color-6 { color: color-mix(in srgb, var(--color-primary) 75%, var(--color-success-dark)); }
.phone-route-color-7 { color: color-mix(in srgb, var(--color-success-dark) 75%, var(--color-danger-text)); }
.phone-route-color-8 { color: color-mix(in srgb, var(--color-danger-text) 75%, var(--color-warning-text)); }
.phone-route-color-9 { color: color-mix(in srgb, var(--color-warning-text) 75%, var(--color-info)); }
.phone-route-color-10 { color: color-mix(in srgb, var(--color-info) 75%, var(--color-primary)); }
.phone-route-color-11 { color: color-mix(in srgb, var(--color-primary) 50%, var(--color-success-dark)); }
.phone-route-color-12 { color: color-mix(in srgb, var(--color-success-dark) 50%, var(--color-danger-text)); }
.phone-route-color-13 { color: color-mix(in srgb, var(--color-danger-text) 50%, var(--color-warning-text)); }
.phone-route-color-14 { color: color-mix(in srgb, var(--color-warning-text) 50%, var(--color-info)); }
.phone-route-color-15 { color: color-mix(in srgb, var(--color-info) 50%, var(--color-primary)); }
.phone-route-color-16 { color: color-mix(in srgb, var(--color-primary) 25%, var(--color-success-dark)); }
.phone-route-color-17 { color: color-mix(in srgb, var(--color-success-dark) 25%, var(--color-danger-text)); }
.phone-route-color-18 { color: color-mix(in srgb, var(--color-danger-text) 25%, var(--color-warning-text)); }
.phone-route-color-19 { color: color-mix(in srgb, var(--color-warning-text) 25%, var(--color-info)); }
.phone-route-color-20 { color: color-mix(in srgb, var(--color-info) 25%, var(--color-primary)); }

/* ===== Amazon 出荷遅延レポート（modules/shipping-delay-report.js・接頭辞 lsr-） ===== */
.lsr-page { padding: var(--space-4) var(--space-6) var(--space-8); max-width: 1540px; color: var(--text-primary); font-size: var(--font-size-base); }
.lsr-num { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.lsr-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-3); }
.lsr-title { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); margin: 0; }
.lsr-sp { flex: 1; }
.lsr-chip { display: inline-flex; align-items: center; gap: var(--space-1); height: 24px; padding: 0 var(--space-3); border-radius: var(--radius-full); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); white-space: nowrap; }
.lsr-chip-calm { background: var(--color-success-subtle); color: var(--color-success-text); }
.lsr-chip-appeal { background: var(--color-warning-subtle); color: var(--color-warning-text); }
.lsr-chip-danger { background: var(--color-danger-subtle); color: var(--color-danger-text); }
.lsr-chip-ghost { background: var(--bg-subtle); color: var(--text-tertiary); font-weight: var(--font-weight-medium); }
.lsr-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.lsr-seg { display: inline-flex; background: var(--bg-subtle); border-radius: var(--radius-xl); padding: 2px; }
.lsr-seg-btn { border: 0; background: transparent; padding: var(--space-1) var(--space-3); border-radius: var(--radius-lg); font-size: var(--font-size-sm); color: var(--text-tertiary); cursor: pointer; font-family: inherit; }
.lsr-seg-btn.is-active { background: var(--bg-surface); color: var(--text-primary); font-weight: var(--font-weight-semibold); box-shadow: var(--shadow-sm); }
.lsr-card { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: calc(var(--radius-xl) * 1.5); }
.lsr-pad { padding: var(--space-4) var(--space-5); }
.lsr-label { font-size: var(--font-size-sm); color: var(--text-tertiary); font-weight: var(--font-weight-semibold); letter-spacing: 0.02em; }
.lsr-card-h { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.lsr-note { font-size: var(--font-size-sm); color: var(--text-tertiary); }

/* 看板: 申立ライン(2%)・Amazon基準(4%)に対する位置 */
.lsr-track-card { padding: var(--space-5) var(--space-6); display: grid; grid-template-columns: 230px 1fr 230px; gap: var(--space-8); align-items: center; }
.lsr-nums { display: flex; flex-direction: column; gap: var(--space-3); }
.lsr-num-row { display: flex; align-items: baseline; gap: var(--space-2); }
.lsr-key { font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); color: var(--text-inverse); border-radius: var(--radius-md); padding: 2px var(--space-1); min-width: 34px; text-align: center; }
.lsr-key-10 { background: var(--color-primary); }
.lsr-key-30 { background: var(--text-primary); }
.lsr-big { font-size: calc(var(--font-size-3xl) * 1.7); font-weight: var(--font-weight-bold); line-height: 1; }
.lsr-big-unit { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--text-tertiary); margin-left: 1px; }
.lsr-frac { font-size: var(--font-size-xs); color: var(--text-tertiary); }
.lsr-track { position: relative; height: 96px; }
.lsr-zones { position: absolute; left: 0; right: 0; top: 40px; height: 14px; display: flex; border-radius: 7px; overflow: hidden; }
.lsr-zone { display: block; height: 100%; }
.lsr-zone-1 { background: var(--color-success-subtle); width: 40%; }
.lsr-zone-2 { background: var(--color-warning-subtle); width: 40%; }
.lsr-zone-3 { background: var(--color-danger-subtle); width: 20%; }
.lsr-ticks { position: absolute; left: 0; right: 0; top: 60px; height: 36px; }
.lsr-tick { position: absolute; transform: translateX(-50%); text-align: center; font-size: var(--font-size-xs); color: var(--text-muted); white-space: nowrap; }
.lsr-tick.is-key { color: var(--text-secondary); font-weight: var(--font-weight-bold); font-size: var(--font-size-sm); }
.lsr-tick-sub { display: block; font-weight: var(--font-weight-medium); color: var(--text-tertiary); font-size: var(--font-size-xs); margin-top: 1px; }
.lsr-line { position: absolute; top: 32px; width: 2px; height: 30px; transform: translateX(-50%); border-radius: 1px; }
.lsr-line-2 { background: var(--color-warning); }
.lsr-line-4 { background: var(--color-danger); }
.lsr-pin { position: absolute; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.lsr-pin-10 { top: -3px; }
.lsr-pin-30 { top: 15px; }
.lsr-pin-key { font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); color: var(--text-inverse); border-radius: var(--radius-md); padding: 1px var(--space-1); }
.lsr-pin-stem { width: 2px; height: 8px; }
.lsr-pin-10 .lsr-pin-stem { height: 26px; }
.lsr-pin-dot { width: 12px; height: 12px; border-radius: 50%; border: 3px solid var(--bg-surface); box-shadow: 0 0 0 1px var(--border-default); margin-top: -2px; }
.lsr-pin-10 .lsr-pin-key, .lsr-pin-10 .lsr-pin-stem, .lsr-pin-10 .lsr-pin-dot { background: var(--color-primary); }
.lsr-pin-30 .lsr-pin-key, .lsr-pin-30 .lsr-pin-stem, .lsr-pin-30 .lsr-pin-dot { background: var(--text-primary); }
.lsr-verdict { border-left: 1px solid var(--border-default); padding-left: var(--space-6); }
.lsr-verdict-big { font-size: calc(var(--font-size-3xl) * 2); font-weight: var(--font-weight-bold); line-height: 1; color: var(--color-success-dark); margin-top: var(--space-1); }
.lsr-verdict-big.is-over { color: var(--color-danger-text); }
.lsr-verdict-big.is-none { color: var(--text-muted); }
.lsr-verdict-unit { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); margin-left: 2px; }
.lsr-verdict-cap { font-size: var(--font-size-sm); color: var(--text-tertiary); margin-top: var(--space-1); }
.lsr-verdict-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }

/* 2カラム */
.lsr-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--space-3); margin-top: var(--space-3); align-items: start; }
.lsr-col { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.lsr-legend { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: var(--font-size-xs); color: var(--text-tertiary); }
.lsr-legend-item { display: inline-flex; align-items: center; gap: var(--space-1); }
.lsr-sw { width: 10px; height: 10px; border-radius: var(--radius-sm); display: inline-block; }
.lsr-sw-line { width: 14px; height: 2px; border-radius: 1px; }
.lsr-sw-30 { background: var(--text-primary); }
.lsr-sw-10 { background: var(--color-primary); }
.lsr-sw-th { height: 0; border-top: 2px dashed var(--color-warning); }
.lsr-sw-appeal { background: var(--color-primary); }
.lsr-sw-true { background: var(--color-danger); }
.lsr-sw-wait { background: var(--color-warning); }

/* 推移グラフ（SVG） */
.lsr-trend { display: block; width: 100%; height: auto; }
.lsr-trend text { font-family: var(--font-family); }
.lsr-grid-line { stroke: var(--border-light); }
.lsr-axis-text { font-size: 9px; fill: var(--text-muted); }
.lsr-th-line { stroke-width: 1.5; stroke-dasharray: 4 4; fill: none; }
.lsr-th-2 { stroke: var(--color-warning); }
.lsr-th-4 { stroke: var(--color-danger); }
.lsr-th-text { font-size: 9px; font-weight: var(--font-weight-bold); }
.lsr-th-text-2 { fill: var(--color-warning-text); }
.lsr-th-text-4 { fill: var(--color-danger-text); }
.lsr-th-badge { fill: var(--color-warning-bg); }
.lsr-th-badge-text { font-size: 10px; font-weight: var(--font-weight-bold); fill: var(--color-warning-text); }
.lsr-path-10 { fill: none; stroke: var(--color-primary); stroke-width: 1.6; stroke-linejoin: round; opacity: 0.55; }
.lsr-path-30 { fill: none; stroke: var(--text-primary); stroke-width: 2.4; stroke-linejoin: round; }
.lsr-pt-10 { fill: var(--color-primary); stroke: var(--color-primary); stroke-width: 1.4; opacity: 0.7; }
.lsr-pt-30 { fill: var(--text-primary); stroke: var(--text-primary); stroke-width: 1.8; }
.lsr-pt-10.is-manual, .lsr-pt-30.is-manual { fill: var(--bg-surface); }
.lsr-last-label { font-size: 11px; font-weight: var(--font-weight-bold); fill: var(--text-primary); }

/* 遅延が出た日（出荷予定日×曜日） */
.lsr-cal { display: grid; gap: var(--space-1); align-items: center; }
.lsr-cal-dw { font-size: var(--font-size-xs); color: var(--text-muted); text-align: right; padding-right: var(--space-1); }
.lsr-cal-mo { font-size: var(--font-size-xs); color: var(--text-muted); text-align: left; white-space: nowrap; }
.lsr-cal-c { height: 20px; border-radius: var(--radius-md); background: var(--bg-subtle); position: relative; }
.lsr-cal-c.is-appeal { background: var(--color-primary); }
.lsr-cal-c.is-appeal-done { background: var(--color-primary-subtle); box-shadow: inset 0 0 0 1.5px var(--color-primary); }
.lsr-cal-c.is-true { background: var(--color-danger); }
.lsr-cal-c.is-wait { background: var(--color-warning); }
.lsr-cal-c.is-mix-at { background: linear-gradient(135deg, var(--color-primary) 50%, var(--color-danger) 50%); }
.lsr-cal-c.is-mix-aw { background: linear-gradient(135deg, var(--color-primary) 50%, var(--color-warning) 50%); }
.lsr-cal-c.is-mix-tw { background: linear-gradient(135deg, var(--color-danger) 50%, var(--color-warning) 50%); }
.lsr-cal-c.is-future { background: transparent; box-shadow: inset 0 0 0 1px var(--border-light); }
.lsr-cal-n { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: var(--font-size-xs); color: var(--text-inverse); font-weight: var(--font-weight-bold); }
.lsr-cal-c.is-appeal-done .lsr-cal-n { color: var(--color-primary); }
.lsr-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-top: var(--space-3); }
.lsr-stat { border-radius: var(--radius-xl); padding: var(--space-2) var(--space-3); display: flex; align-items: baseline; gap: var(--space-2); }
.lsr-stat-n { font-size: calc(var(--font-size-3xl) * 1.2); font-weight: var(--font-weight-bold); }
.lsr-stat-t { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.lsr-stat-s { font-size: var(--font-size-xs); margin-left: auto; }
.lsr-stat-blue { background: var(--color-primary-bg); color: var(--color-primary); }
.lsr-stat-red { background: var(--color-danger-bg); color: var(--color-danger-text); }

/* 申立の進み具合 */
.lsr-flow { display: grid; grid-template-columns: 1fr 18px 1fr 18px 1fr; align-items: stretch; gap: var(--space-1); }
.lsr-stage { border-radius: var(--radius-xl); padding: var(--space-3); background: var(--bg-muted); border: 1px solid var(--border-light); }
.lsr-stage-n { font-size: calc(var(--font-size-3xl) * 1.3); font-weight: var(--font-weight-bold); line-height: 1.1; }
.lsr-stage-t { font-size: var(--font-size-sm); color: var(--text-tertiary); font-weight: var(--font-weight-semibold); margin-top: 2px; }
.lsr-stage-sub { font-size: var(--font-size-xs); color: var(--color-danger-text); font-weight: var(--font-weight-semibold); margin-top: 2px; }
.lsr-stage-w .lsr-stage-n { color: var(--color-warning-text); }
.lsr-stage-q .lsr-stage-n { color: var(--color-primary); }
.lsr-stage-d .lsr-stage-n { color: var(--color-success-dark); }
.lsr-arrow { display: flex; align-items: center; justify-content: center; color: var(--text-muted); }
.lsr-ids { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-3); }
.lsr-id { font-size: var(--font-size-xs); font-family: ui-monospace, Menlo, monospace; background: var(--bg-subtle); border-radius: var(--radius-md); padding: 3px var(--space-2); color: var(--text-secondary); }
.lsr-id-meta { font-style: normal; color: var(--text-muted); margin-left: var(--space-1); }
.lsr-hint { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-xl); background: var(--color-warning-bg); color: var(--color-warning-text); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.lsr-hint-icon { flex-shrink: 0; }
.lsr-hint-link { margin-left: auto; border: 0; background: transparent; color: var(--color-primary); font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); cursor: pointer; font-family: inherit; padding: 0; }
.lsr-hint-link:hover { text-decoration: underline; }

/* アカウント健全性 */
.lsr-ring { width: 54px; height: 54px; }
.lsr-ring-bg { fill: none; stroke: var(--bg-subtle); stroke-width: 6; }
.lsr-ring-fg { fill: none; stroke-width: 6; stroke-linecap: round; stroke: var(--color-success); }
.lsr-ring-fg.is-fair { stroke: var(--color-warning); }
.lsr-ring-fg.is-bad { stroke: var(--color-danger); }
.lsr-ring-text { font-size: 12px; font-weight: var(--font-weight-bold); fill: var(--text-primary); }
.lsr-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
.lsr-tile { padding: var(--space-3); border: 1px solid var(--border-default); border-radius: calc(var(--radius-xl) * 1.5); background: var(--bg-surface); }
.lsr-tile-v { font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); margin-top: var(--space-1); }
.lsr-bar { position: relative; height: 5px; border-radius: 3px; background: var(--bg-subtle); margin-top: var(--space-2); }
.lsr-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--color-success); }
.lsr-bar-target { position: absolute; top: -4px; width: 2px; height: 13px; background: var(--text-secondary); border-radius: 1px; }
.lsr-tile-tg { font-size: var(--font-size-xs); color: var(--text-muted); margin-top: var(--space-1); }
.lsr-tile.is-warn .lsr-tile-v { color: var(--color-warning-text); }
.lsr-tile.is-warn .lsr-bar-fill { background: var(--color-warning); }

.lsr-foot { font-size: var(--font-size-xs); color: var(--text-muted); margin-top: var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-3); }
.lsr-empty { padding: var(--space-6) var(--space-4); text-align: center; color: var(--text-tertiary); font-size: var(--font-size-md); }
.lsr-error { padding: var(--space-5); display: flex; align-items: center; gap: var(--space-3); color: var(--color-danger-text); font-size: var(--font-size-md); }

@media (max-width: 1200px) {
  .lsr-grid { grid-template-columns: 1fr; }
  .lsr-track-card { grid-template-columns: 1fr; gap: var(--space-4); }
  .lsr-verdict { border-left: 0; border-top: 1px solid var(--border-default); padding-left: 0; padding-top: var(--space-4); }
}
@media (max-width: 640px) {
  .lsr-page { padding: var(--space-3); }
  .lsr-tiles, .lsr-split { grid-template-columns: 1fr; }
  .lsr-flow { grid-template-columns: 1fr; }
  .lsr-arrow { display: none; }
}

/* 電話: 対応・着信履歴・ルート分析 (§8-6) */
#phoneInquiriesSubPanel[hidden],
.phone-inquiries-root [hidden] { display: none !important; }
.phone-subtabs { display: flex; gap: var(--space-4); border-bottom: 1px solid var(--border-default); margin-bottom: var(--space-4); }
.phone-subtabs .active { color: var(--color-primary); border-bottom: 2px solid var(--color-primary); border-radius: 0; }
.phone-inquiries-summary { display: flex; gap: var(--space-3); margin-bottom: var(--space-4); }
.phone-inquiries-summary-card { flex: 1; min-width: 0; border-top: 3px solid var(--border-default); }
.phone-inquiries-summary-card small { color: var(--text-tertiary); font-size: var(--font-size-sm); }
.phone-summary-success, .phone-summary-callback { border-top-color: var(--color-success); }
.phone-summary-mail, .phone-summary-sms { border-top-color: var(--color-primary); }
.phone-summary-connected { border-top-color: var(--color-info); }
.phone-summary-warning { border-top-color: var(--color-warning); background: var(--color-warning-bg); }
.phone-summary-danger { border-top-color: var(--color-danger); }
.phone-callback-request { border-left: 3px solid var(--color-warning); padding: var(--space-3); }
.phone-callback-late { border-left-color: var(--color-danger); }
.phone-callback-row { display: flex; align-items: center; gap: var(--space-3); }
.phone-callback-expand { display: flex; align-items: center; flex: 1; min-width: 0; gap: var(--space-4); text-align: left; }
.phone-callback-preview { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phone-callback-detail { padding-top: var(--space-4); border-top: 1px solid var(--border-light); margin-top: var(--space-3); }
.phone-history-layout { display: flex; gap: var(--space-3); align-items: flex-start; }
.phone-history-list { flex: 1; min-width: 0; overflow: auto; }
.phone-call-detail { flex: 0 0 280px; display: flex; flex-direction: column; gap: var(--space-3); }
.phone-call-detail h3, .phone-call-detail h4 { margin: 0; font-size: var(--font-size-lg); }
.phone-inquiries-table th:nth-child(1) { width: 4%; }
.phone-inquiries-table th:nth-child(2) { width: 14%; }
.phone-inquiries-table th:nth-child(3) { width: 23%; }
.phone-inquiries-table th:nth-child(4) { width: 8%; }
.phone-inquiries-table th:nth-child(5) { width: 22%; }
.phone-inquiries-table th:nth-child(6) { width: 20%; }
.phone-inquiries-table th:nth-child(7) { width: 9%; }
.phone-inquiries-table td { white-space: normal; overflow: visible; }
.phone-inquiries-table tbody tr { cursor: pointer; }
.phone-inquiries-table tbody tr:hover { background: var(--bg-hover); }
.phone-inquiries-customer-cell small { display: block; color: var(--text-tertiary); }
.phone-thread-link, .phone-thread-empty { display: inline-block; border-radius: var(--radius-sm); padding: var(--space-1); font-size: var(--font-size-sm); }
.phone-thread-link { background: var(--color-primary-bg); }
.phone-thread-empty { color: var(--text-tertiary); }
.phone-thread-picker { position: relative; display: inline-block; }
.phone-thread-picker summary { color: var(--color-warning-text); cursor: pointer; }
.phone-thread-popover { position: absolute; z-index: var(--z-dropdown); background: var(--bg-surface); box-shadow: var(--shadow-lg); padding: var(--space-3); min-width: 220px; text-align: left; }
.phone-thread-popover strong, .phone-thread-popover a { display: block; }
.phone-goal { display: inline-block; border-radius: var(--radius-full); padding: var(--space-1) var(--space-2); font-size: var(--font-size-sm); margin: var(--space-1); }
.phone-goal-mail, .phone-goal-sms { background: var(--color-primary-subtle); color: var(--color-primary); }
.phone-goal-callback { background: var(--color-success-subtle); color: var(--color-success-text); }
.phone-goal-connected { background: var(--color-info-subtle); color: var(--color-info); }
.phone-stage-bars { display: flex; gap: 2px; margin-bottom: var(--space-1); }
.phone-stage-bars i { flex: 1; height: 5px; background: var(--border-default); border-radius: var(--radius-sm); }
.phone-stage-bars i.reached { background: var(--color-primary); }
.phone-stage-timeline { margin: 0; padding-left: var(--space-5); }
.phone-stage-timeline li { padding: var(--space-2) 0; }
.phone-stage-timeline span { display: block; color: var(--text-tertiary); }
.phone-route-layout { display: flex; gap: var(--space-3); }
.phone-route-selection { flex: 0 0 230px; }
.phone-route-diagram { flex: 1; }
.phone-route-viewport { height: auto; }
.phone-route-viewport svg { width: 100%; min-width: 1100px; }
.phone-route-label { font-size: var(--font-size-md); }
.phone-route-node-goal { fill: var(--color-success-bg); stroke: var(--color-success); }
.phone-route-delivery-arc { fill: none; stroke: var(--color-warning); }
.phone-route-exit, .phone-route-ending { text-anchor: middle; font-size: var(--font-size-sm); }
.phone-route-ending { fill: var(--text-tertiary); }
.phone-route-dot .phone-route-finish { fill: currentColor; font-size: var(--font-size-3xl); }
.phone-route-seek { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; }
.phone-route-seek input { flex: 1; }
.phone-route-bars { display: flex; gap: var(--space-3); }
.phone-route-bars > section { flex: 1; min-width: 0; }
.phone-route-bar-row { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) 0; }
.phone-route-bar-row > span:first-child { width: 110px; }
.phone-route-bar-row meter { flex: 1; min-width: 0; }
.phone-inquiries-root { --phone-violet: #7c3aed; --phone-violet-bg: #f5f3ff; --phone-sms: #4338ca; --phone-sms-bg: #e0e7ff; }
.phone-callback-row { display: grid; grid-template-columns: 155px 110px 70px 155px minmax(140px, 1fr) 125px 90px 35px 15px; gap: var(--space-2); }
.phone-callback-columns { color: var(--text-tertiary); background: var(--bg-muted); padding: var(--space-3); font-size: var(--font-size-sm); }
.phone-callback-request { border-left-color: var(--border-medium); }
.phone-callback-late { border-left-color: var(--color-danger); }
.phone-callback-today { border-left-color: var(--color-warning); }
.phone-callback-deadline { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); margin: 0; }
.phone-callback-deadline .phone-inquiries-muted { display: none; }
.phone-callback-expand { padding: 0; white-space: normal; }
.phone-callback-row-recordings { display: flex; gap: var(--space-1); }
.phone-callbacks { overflow-x: auto; }
.phone-kind { display: inline-block; border-radius: var(--radius-full); font-size: var(--font-size-sm); padding: var(--space-1) var(--space-2); background: var(--bg-subtle); }
.phone-kind-customer { color: var(--color-primary); background: var(--color-primary-bg); }
.phone-kind-delivery { color: var(--color-info); background: var(--color-info-bg); }
.phone-kind-sales { color: var(--phone-violet); background: var(--phone-violet-bg); }
.phone-summary-customer { border-top-color: var(--color-primary-light); }
.phone-summary-delivery { border-top-color: var(--color-info); }
.phone-summary-other { border-top-color: var(--phone-violet); }
.phone-summary-warning { border-top-color: var(--color-danger); background: var(--bg-surface); }
.phone-summary-warning strong, .phone-summary-danger strong { color: var(--color-danger-text); }
.phone-summary-success { background: var(--color-success-bg); }
.phone-summary-mail { border-top-color: var(--color-info); }
.phone-summary-sms { border-top-color: var(--phone-sms); }
.phone-goal-mail { color: var(--color-info); background: var(--color-info-subtle); }
.phone-goal-sms { color: var(--phone-sms); background: var(--phone-sms-bg); }
.phone-goal-failed { color: var(--color-danger-text); background: var(--color-danger-bg); }
.phone-thread-link, .phone-thread-empty, .phone-thread-picker summary { border: 1px solid var(--border-default); border-radius: var(--radius-full); background: var(--bg-surface); }
.phone-thread-link::before, .phone-thread-empty::before { content: '●'; margin-right: var(--space-1); color: var(--color-success-dark); }
.phone-thread-empty::before { color: var(--text-muted); }
.phone-call-selected { background: var(--color-primary-bg); }
.phone-route-edge { stroke: var(--color-primary-subtle); stroke-linecap: round; }
.phone-route-delivery-arc { stroke: var(--color-info); }
.phone-route-delivery-node { fill: var(--color-info-bg); stroke: var(--color-info); }
.phone-inquiries-toolbar #phoneInquiriesForwardPanel { flex: 1; margin: 0; padding: var(--space-2); border: 0; }
.phone-inquiries-toolbar .phone-inquiries-forward-content { gap: var(--space-3); }
.phone-inquiries-toolbar .phone-inquiries-forward-copy strong { color: var(--color-success-text); }
.phone-stage-bars i.failed { background: var(--color-danger); }
.phone-stage-bars i.goal { background: var(--color-success); }
.phone-flow-heading { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); background: var(--bg-surface); border: 1px solid var(--border-default); }
.phone-flow-heading span { color: var(--text-tertiary); font-size: var(--font-size-sm); }
.phone-terminal { margin: 0; color: var(--text-secondary); }

/* 電話: 共通ヘッダー、ゴールカード、段階タイムライン */
.phone-inquiries-root { background: var(--bg-muted); }
.toolbar.phone-inquiries-toolbar { gap: var(--space-3); padding: var(--space-4) var(--space-5); background: var(--bg-surface); }
.phone-page-title { margin: 0; font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); }
.phone-header-number { color: var(--text-tertiary); font-size: var(--font-size-sm); }
.phone-inquiries-toolbar #phoneInquiriesForwardPanel { flex: 0 1 auto; padding: 0; background: transparent; }
.phone-inquiries-forward-copy { font-size: var(--font-size-sm); }
.phone-response-pill { display: inline-flex; align-items: center; gap: var(--space-2); border-radius: var(--radius-full); padding: var(--space-1) var(--space-3); color: var(--color-success-text); background: var(--color-success-bg); font-size: var(--font-size-sm); }
.phone-response-pill::before { content: ''; width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--color-success); }
.phone-response-forward { background: var(--color-warning-bg); }
.phone-response-forward::before { background: var(--color-warning); }
.phone-subtabs { padding: 0 var(--space-5); gap: var(--space-5); background: var(--bg-surface); margin-bottom: 0; }
.phone-subtabs .btn { border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: var(--space-3) var(--space-1); color: var(--text-secondary); background: transparent; }
.phone-subtabs .btn.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.phone-work-count { border-radius: var(--radius-full); background: var(--color-danger); color: var(--text-inverse); font-size: var(--font-size-xs); padding: 0 var(--space-2); margin-left: var(--space-2); }
.phone-inquiries-summary { padding: var(--space-5); margin: 0; border: 0; gap: var(--space-3); }
.phone-inquiries-summary-card { padding: var(--space-4); border-radius: var(--radius-lg); gap: var(--space-2); }
.phone-inquiries-summary-label { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); }
.phone-inquiries-summary-value { font-size: var(--font-size-3xl); line-height: 1.1; }
.phone-inquiries-summary-card small { line-height: 1.6; }
.phone-summary-total { border-top-color: var(--color-primary); }
.phone-summary-band { display: block; width: 100%; height: 4px; margin-top: var(--space-2); border-radius: var(--radius-full); overflow: hidden; }
.phone-band-customer { fill: var(--color-primary-light); }
.phone-band-delivery { fill: var(--color-info); }
.phone-band-sales { fill: var(--phone-violet); }
.phone-band-other { fill: var(--text-muted); }
.phone-band-none { fill: var(--border-default); }
#phoneHistorySummary .phone-inquiries-summary-card { border-top: 1px solid var(--border-default); }
.phone-goal-icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex-shrink: 0; border-radius: var(--radius-md); background: var(--color-primary-bg); color: var(--color-primary); font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); }
.phone-summary-success { background: linear-gradient(120deg, var(--color-success-bg), var(--bg-surface)); }
.phone-summary-success .phone-goal-icon, .phone-summary-callback .phone-goal-icon { color: var(--color-success-text); background: var(--color-success-subtle); }
.phone-summary-mail .phone-goal-icon, .phone-summary-connected .phone-goal-icon { color: var(--color-info); background: var(--color-info-subtle); }
.phone-summary-sms .phone-goal-icon { color: var(--phone-sms); background: var(--phone-sms-bg); }
.phone-summary-danger .phone-goal-icon { color: var(--color-danger-text); background: var(--color-danger-bg); }
.phone-callbacks { margin: 0 var(--space-5) var(--space-5); padding: var(--space-4); border-radius: var(--radius-lg); }
.phone-callback-columns, .phone-callback-row { min-width: 1060px; font-size: var(--font-size-sm); }
.phone-callback-request { border-top-color: var(--border-light); border-left-width: 3px; }
.phone-callback-preview { white-space: nowrap; }
.phone-callback-row-recordings .btn { width: 24px; min-width: 24px; height: 24px; padding: 0; border-radius: var(--radius-full); color: var(--color-primary); background: var(--color-primary-bg); border-color: var(--color-primary-subtle); }
.phone-history-filters { flex-wrap: wrap; height: auto; gap: var(--space-4); margin: 0 var(--space-5); padding: var(--space-3) 0; background: transparent; border: 0; }
.phone-filter { display: flex; align-items: center; gap: var(--space-2); color: var(--text-tertiary); font-size: var(--font-size-sm); }
.phone-segments { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); background: var(--bg-subtle); padding: var(--space-1); border: 1px solid var(--border-default); border-radius: var(--radius-md); }
.phone-segments .btn { color: var(--text-secondary); border: 0; }
.phone-segments .btn[aria-pressed="true"] { color: var(--color-primary); background: var(--bg-surface); box-shadow: var(--shadow-sm); }
#phoneInquiriesCount { margin-left: auto; color: var(--text-tertiary); font-size: var(--font-size-sm); }
.phone-history-layout { padding: 0 var(--space-5) var(--space-5); gap: var(--space-4); }
.phone-history-list .table-container { border-radius: var(--radius-lg); background: var(--bg-surface); }
.phone-inquiries-table td { padding: var(--space-3); font-size: var(--font-size-sm); }
.phone-inquiries-table td.phone-inquiries-customer-cell { text-align: left; }
.phone-inquiries-customer-cell > strong { display: block; font-size: var(--font-size-base); }
.phone-inquiries-customer-cell > .phone-inquiries-muted { display: inline; }
.phone-inquiries-customer-cell > small { display: inline; margin-left: var(--space-2); white-space: nowrap; }
.phone-customer-thread { margin-top: var(--space-1); }
.phone-thread-link { color: var(--text-secondary); text-decoration: none; }
.phone-thread-link:hover { color: var(--color-primary); }
.phone-thread-link, .phone-thread-empty, .phone-thread-picker summary { padding: var(--space-1) var(--space-2); font-size: var(--font-size-xs); }
.phone-call-detail { flex-basis: 300px; padding: var(--space-4); border-radius: var(--radius-lg); gap: var(--space-3); }
.phone-detail-goals { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.phone-detail-goals .phone-goal { margin: 0; }
.phone-detail-threads { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.phone-stage-timeline { padding: var(--space-2) 0; margin: 0; list-style: none; }
.phone-stage-timeline li { position: relative; display: grid; grid-template-columns: 34px 12px minmax(0, 1fr) auto; column-gap: var(--space-2); padding: var(--space-3) 0; align-items: start; }
.phone-stage-timeline li:not(:last-child)::after { content: ''; position: absolute; left: 47px; top: 22px; bottom: -14px; width: 2px; background: var(--border-default); }
.phone-stage-timeline time { color: var(--text-tertiary); font-size: var(--font-size-xs); font-variant-numeric: tabular-nums; }
.phone-timeline-dot { width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--color-primary); margin-top: var(--space-1); z-index: 1; }
.phone-timeline-stage { font-size: var(--font-size-sm); }
.phone-dwell-bar { display: block; width: 100%; height: 4px; margin-top: var(--space-2); border-radius: var(--radius-full); background: var(--bg-muted); }
.phone-dwell-bar rect { fill: var(--color-primary-subtle); }
.phone-stage-timeline .phone-dwell-pill { display: inline-block; color: var(--text-tertiary); font-size: var(--font-size-xs); background: var(--bg-muted); border-radius: var(--radius-full); padding: 0 var(--space-2); }
.phone-stage-timeline .phone-terminal { font-size: var(--font-size-sm); color: var(--text-tertiary); }
.phone-terminal .phone-timeline-dot { background: var(--text-muted); }
.phone-stage-timeline .phone-terminal-failed { color: var(--color-danger-text); }
.phone-terminal-failed .phone-timeline-dot { background: var(--color-danger); }
.phone-terminal strong { grid-column: 3 / -1; }
.phone-route { padding: var(--space-5); }
.phone-route-toolbar { height: auto; padding: 0 0 var(--space-3); background: transparent; border: 0; color: var(--text-tertiary); font-size: var(--font-size-sm); }
#phoneRouteStatus:empty { display: none; }
#phoneRouteStatus { padding-bottom: var(--space-3); color: var(--text-secondary); font-size: var(--font-size-sm); }
.phone-route-layout { gap: var(--space-4); }
.phone-route-selection { flex-basis: 280px; padding: var(--space-3); border-radius: var(--radius-lg); }
.phone-route-call { padding: var(--space-3) var(--space-1); gap: var(--space-2); font-size: var(--font-size-sm); }
.phone-route-call:has(input:checked) { background: var(--color-primary-bg); border-radius: var(--radius-md); }
.phone-route-call input { margin-top: var(--space-1); }
.phone-call-color { width: 8px; height: 8px; flex-shrink: 0; border-radius: var(--radius-full); background: currentColor; margin-top: var(--space-1); }
.phone-route-call-title { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.phone-route-call small { margin-top: var(--space-1); font-size: var(--font-size-xs); }
.phone-flow-heading { justify-content: space-between; border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: var(--space-4); }
.phone-flow-legend { display: flex; align-items: center; gap: var(--space-3); }
.phone-flow-legend span { display: inline-flex; align-items: center; gap: var(--space-1); white-space: nowrap; }
.phone-flow-legend span::before { content: ''; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--color-primary); }
.phone-flow-legend .phone-legend-exit::before { background: var(--color-danger); }
.phone-flow-legend .phone-legend-goal::before { background: var(--color-success); }
.phone-route-viewport { border-top: 0; background: var(--bg-surface); }
.phone-route-label { font-weight: var(--font-weight-bold); }
.phone-route-node { rx: 10px; }
.phone-route-player { background: var(--bg-surface); padding: var(--space-3) var(--space-4); border: 1px solid var(--border-default); border-top: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.phone-route-controls { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
#phoneRouteTime { margin-left: auto; font-size: var(--font-size-sm); font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.phone-route-seek { padding: var(--space-3) 0 0; font-size: var(--font-size-xs); color: var(--text-tertiary); }
.phone-route-seek input { accent-color: var(--color-primary); }
.phone-route-legends { font-size: var(--font-size-xs); }
.phone-route-bars { display: block; }
.phone-route-bars > .card { padding: var(--space-4); border-radius: var(--radius-lg); }
.phone-stage-table-heading { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.phone-stage-table-heading > span { color: var(--text-tertiary); font-size: var(--font-size-xs); }
.phone-stage-table { width: 100%; table-layout: fixed; }
.phone-stage-table th:first-child { width: 18%; }
.phone-stage-table th:nth-child(2) { width: 56%; }
.phone-stage-table td, .phone-stage-table th { padding: var(--space-2); font-size: var(--font-size-sm); text-align: left; }
.phone-stage-table td:nth-child(n+3) { text-align: right; }
.phone-stage-stack { width: 100%; height: 8px; display: block; border-radius: var(--radius-full); overflow: hidden; background: var(--bg-muted); }
.phone-stack-reached { fill: var(--color-primary-light); }
.phone-stack-ended { fill: var(--color-danger); }
@media (max-width: 1100px) {
  .phone-inquiries-summary-card { flex-basis: 25%; }
  .phone-history-layout, .phone-route-layout { flex-direction: column; }
  .phone-call-detail, .phone-route-selection { flex-basis: auto; width: 100%; }
  .phone-history-list, .phone-route-diagram { width: 100%; }
  .phone-history-filters { align-items: flex-start; }
  .phone-filter { flex-wrap: wrap; }
}
.phone-callback-caret { color: var(--text-muted); }
.phone-route-legend { display: inline-flex; align-items: center; gap: var(--space-1); }
.phone-inquiries-period-buttons .btn.active { color: var(--color-primary); border-color: var(--color-primary); background: var(--color-primary-bg); }

.phone-callback-completed { opacity: .65; }

/* Shared purchase cards: CS, LINE and Instagram DM. */
.order-card { border-top: 1px solid var(--border-light); font-size: var(--font-size-sm); }
.order-card > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; }
.order-card > summary::-webkit-details-marker { display: none; }
.order-card-arrow { display: inline-block; font-size: var(--font-size-xs); }
.order-card[open] > summary .order-card-arrow { transform: rotate(90deg); }
.order-card-date { color: var(--text-muted); white-space: nowrap; }
.order-card-number { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-card-amount { font-weight: var(--font-weight-bold); white-space: nowrap; }
.order-card-badge { background: var(--bg-muted); color: var(--text-secondary); border-radius: var(--radius-sm); padding: 0 var(--space-1); font-size: var(--font-size-xs); white-space: nowrap; }
.order-card-detail { background: var(--bg-subtle); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); margin: var(--space-1) 0 var(--space-2); }
.order-card-item { padding: var(--space-1) 0; border-bottom: 1px dashed var(--border-light); }
.order-card-item-heading { display: flex; justify-content: space-between; gap: var(--space-2); }
.order-card-sku, .order-card-meta, .order-card-status { color: var(--text-muted); font-size: var(--font-size-xs); line-height: 1.7; overflow-wrap: anywhere; }
.order-card-sku { margin-top: var(--space-1); }
.order-card-tracking { overflow-wrap: anywhere; }
.order-card-link, .order-card-tracking a { color: var(--color-primary); text-decoration: none; }
.order-card-link:hover, .order-card-link:focus-visible, .order-card-tracking a:hover, .order-card-tracking a:focus-visible { text-decoration: underline; }
.order-card-extras { display: grid; gap: var(--space-2); margin-top: var(--space-2); justify-items: start; }
.order-card-heading { color: var(--text-muted); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); margin: var(--space-2) 0 var(--space-1); }
.lc-panel-ch-badge.ch-am { background: var(--color-warning-bg); color: var(--color-warning-text); }

/* 楽天クーポン自動配布 — rca */
#workRakutenCouponAutoPanel { --rca-dur-fast:120ms; --rca-dur:180ms; --rca-dur-slow:420ms; --rca-ease:cubic-bezier(.2,.8,.2,1); }
#workRakutenCouponAutoPanel [hidden] { display:none!important; }
#workRakutenCouponAutoPanel .rca-shell { display:flex; flex-direction:column; gap:var(--space-3); padding:var(--space-4); color:var(--text-primary); }
#workRakutenCouponAutoPanel .rca-heading { margin:0; font-size:var(--font-size-2xl); }
#workRakutenCouponAutoPanel .rca-subtitle { margin:0; color:var(--text-tertiary); font-size:var(--font-size-sm); }
#workRakutenCouponAutoPanel .rca-header { display:flex; align-items:center; gap:var(--space-3); }
#workRakutenCouponAutoPanel .rca-updated { display:flex; flex-direction:column; align-items:flex-end; gap:var(--space-1); color:var(--text-tertiary); font-size:var(--font-size-xs); }
#workRakutenCouponAutoPanel .rca-message { position:fixed; z-index:var(--z-toast); top:var(--space-4); right:var(--space-4); max-width:calc(var(--sidebar-width) * 3); display:flex; align-items:flex-start; gap:var(--space-2); box-shadow:var(--shadow-xl); animation:rca-toast-in var(--rca-dur) var(--rca-ease); }
#workRakutenCouponAutoPanel .rca-message-text { flex:1; }
#workRakutenCouponAutoPanel .rca-mode { border:1px solid var(--border-default); border-radius:var(--radius-xl); padding:var(--space-3); background:var(--bg-muted); animation:rca-fade-up var(--rca-dur-slow) var(--rca-ease); }
#workRakutenCouponAutoPanel .rca-mode--shadow { border-color:var(--color-info); background:var(--color-info-bg); }
#workRakutenCouponAutoPanel .rca-mode--canary { border-color:var(--color-warning); background:var(--color-warning-bg); }
#workRakutenCouponAutoPanel .rca-mode--live { border-color:var(--color-danger); background:var(--color-danger-bg); }
#workRakutenCouponAutoPanel .rca-mode-title { margin:0 0 var(--space-1); font-size:var(--font-size-xl); font-weight:var(--font-weight-bold); }
#workRakutenCouponAutoPanel .rca-mode-copy { margin:0; font-size:var(--font-size-md); line-height:var(--line-height-relaxed); }
#workRakutenCouponAutoPanel .rca-mode-caution { margin:var(--space-2) 0 0; color:var(--text-secondary); font-size:var(--font-size-sm); }
#workRakutenCouponAutoPanel .rca-mode-actions { display:flex; justify-content:flex-end; margin-top:var(--space-2); }
#workRakutenCouponAutoPanel .rca-band--compact { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-2) var(--space-3); }
#workRakutenCouponAutoPanel .rca-band--compact .rca-mode-title { margin:0; font-size:var(--font-size-base); white-space:nowrap; }
#workRakutenCouponAutoPanel .rca-band--compact .rca-mode-copy, #workRakutenCouponAutoPanel .rca-band--compact .rca-mode-caution { display:none; }
#workRakutenCouponAutoPanel .rca-band--compact .rca-mode-actions { margin:0 0 0 auto; }
#workRakutenCouponAutoPanel .rca-today-chip { display:inline-flex; align-items:center; padding:var(--space-1) var(--space-2); border:1px solid var(--border-default); border-radius:var(--radius-full); background:var(--bg-surface); font-size:var(--font-size-sm); font-variant-numeric:tabular-nums; white-space:nowrap; }
#workRakutenCouponAutoPanel .rca-next { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:var(--space-3); padding:var(--space-3); border:1px solid var(--border-default); border-radius:var(--radius-lg); background:var(--bg-surface); }
#workRakutenCouponAutoPanel .rca-next-label { font-weight:var(--font-weight-semibold); }
#workRakutenCouponAutoPanel .rca-next-copy { color:var(--text-secondary); }
#workRakutenCouponAutoPanel .rca-next--calm { border-style:dashed; background:var(--bg-muted); }
#workRakutenCouponAutoPanel .rca-tabs { display:flex; gap:var(--space-1); border-bottom:1px solid var(--border-default); overflow-x:auto; }
#workRakutenCouponAutoPanel .rca-tab { display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-1); min-width:calc(var(--sidebar-width) - var(--space-4)); padding:var(--space-2) var(--space-3); border:0; border-bottom:var(--space-1) solid transparent; background:transparent; color:var(--text-secondary); cursor:pointer; }
#workRakutenCouponAutoPanel .rca-tab[aria-selected='true'] { color:var(--color-primary); border-bottom-color:var(--color-primary); background:var(--bg-subtle); }
#workRakutenCouponAutoPanel .rca-tab-name { font-size:var(--font-size-base); font-weight:var(--font-weight-semibold); }
#workRakutenCouponAutoPanel .rca-tab-subtitle { font-size:var(--font-size-xs); color:var(--text-tertiary); white-space:normal; text-align:left; }
#workRakutenCouponAutoPanel .rca-panel { display:flex; flex-direction:column; gap:var(--space-3); animation:rca-tab-in var(--rca-dur) var(--rca-ease); }
#workRakutenCouponAutoPanel .rca-section-title { margin:0; font-size:var(--font-size-lg); }
#workRakutenCouponAutoPanel .rca-section-copy { margin:var(--space-1) 0 0; color:var(--text-tertiary); font-size:var(--font-size-sm); }
#workRakutenCouponAutoPanel .rca-railwrap { border:1px solid var(--border-default); border-radius:var(--radius-lg); background:var(--bg-muted); overflow:hidden; }
#workRakutenCouponAutoPanel .rca-railwrap--startup { border:0; border-radius:0; background:transparent; overflow:visible; }
#workRakutenCouponAutoPanel .rca-rail-summary { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); padding:var(--space-2) var(--space-3); color:var(--text-secondary); font-size:var(--font-size-sm); font-weight:var(--font-weight-semibold); cursor:pointer; list-style:none; }
#workRakutenCouponAutoPanel .rca-rail-summary::-webkit-details-marker { display:none; }
#workRakutenCouponAutoPanel .rca-rail-summary:focus-visible { outline:var(--space-1) solid var(--border-focus); outline-offset:calc(var(--space-1) * -1); }
#workRakutenCouponAutoPanel .rca-railmark { color:var(--text-tertiary); transition:transform var(--rca-dur) var(--rca-ease); }
#workRakutenCouponAutoPanel .rca-railwrap[open] .rca-railmark { transform:rotate(90deg); }
#workRakutenCouponAutoPanel .rca-railbody { display:flex; flex-direction:column; gap:var(--space-3); padding:0 var(--space-3) var(--space-3); }
#workRakutenCouponAutoPanel .rca-railwrap--startup .rca-rail-summary { display:none; }
#workRakutenCouponAutoPanel .rca-railwrap--startup .rca-railbody { padding:0; }
#workRakutenCouponAutoPanel .rca-railwrap[open]:not(.rca-railwrap--startup) .rca-railbody { animation:rca-details-in var(--rca-dur) var(--rca-ease); }
#workRakutenCouponAutoPanel .rca-gates { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--space-2); }
#workRakutenCouponAutoPanel .rca-gate { display:flex; flex-direction:column; align-items:stretch; min-height:calc(var(--space-8) * 3); padding:var(--space-2); border:1px solid var(--border-default); border-radius:var(--radius-lg); background:var(--bg-surface); color:var(--text-primary); animation:rca-fade-up var(--rca-dur-slow) var(--rca-ease) backwards; }
#workRakutenCouponAutoPanel .rca-gate-main { display:flex; flex:1; flex-direction:column; align-items:flex-start; gap:var(--space-1); width:100%; padding:0; border:0; background:transparent; color:inherit; text-align:left; cursor:pointer; }
#workRakutenCouponAutoPanel .rca-gate-promote { align-self:flex-end; margin-top:var(--space-1); }
#workRakutenCouponAutoPanel .rca-gate:nth-child(2) { animation-delay:60ms; }
#workRakutenCouponAutoPanel .rca-gate:nth-child(3) { animation-delay:120ms; }
#workRakutenCouponAutoPanel .rca-gate:nth-child(4) { animation-delay:180ms; }
#workRakutenCouponAutoPanel .rca-gate:nth-child(5) { animation-delay:240ms; }
#workRakutenCouponAutoPanel .rca-gate--current { border-color:var(--color-primary); background:var(--color-primary-bg); box-shadow:var(--shadow-sm); }
#workRakutenCouponAutoPanel .rca-gate--done { border-color:var(--color-success); background:var(--color-success-bg); }
#workRakutenCouponAutoPanel .rca-gate--unknown { border-color:var(--color-warning); background:var(--color-warning-bg); }
#workRakutenCouponAutoPanel .rca-gate-number { display:inline-flex; align-items:center; justify-content:center; min-width:var(--space-6); min-height:var(--space-6); border-radius:var(--radius-full); background:var(--bg-subtle); font-weight:var(--font-weight-bold); }
#workRakutenCouponAutoPanel .rca-gate-title { font-weight:var(--font-weight-semibold); }
#workRakutenCouponAutoPanel .rca-gate-detail { color:var(--text-tertiary); font-size:var(--font-size-xs); line-height:var(--line-height-relaxed); }
#workRakutenCouponAutoPanel .rca-status-strip { display:grid; grid-template-columns:minmax(0,1fr) minmax(calc(var(--sidebar-width) * 2),auto); gap:var(--space-4); align-items:center; padding:var(--space-3); }
#workRakutenCouponAutoPanel .rca-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:var(--space-2); }
#workRakutenCouponAutoPanel .rca-card { display:flex; flex-direction:column; gap:var(--space-2); animation:rca-fade-up var(--rca-dur-slow) var(--rca-ease); }
#workRakutenCouponAutoPanel .rca-metric { display:flex; flex-direction:column; align-items:flex-start; min-width:0; padding-right:var(--space-2); border-right:1px solid var(--border-light); }
#workRakutenCouponAutoPanel .rca-metric:last-child { border-right:0; }
#workRakutenCouponAutoPanel .rca-card-label { color:var(--text-tertiary); font-size:var(--font-size-sm); }
#workRakutenCouponAutoPanel .rca-card-value { font-size:var(--font-size-2xl); font-weight:var(--font-weight-semibold); font-variant-numeric:tabular-nums; }
#workRakutenCouponAutoPanel .rca-metric-link { min-height:var(--space-5); padding:0; }
#workRakutenCouponAutoPanel .rca-attention { animation:rca-attention var(--rca-dur-slow) var(--rca-ease); }
#workRakutenCouponAutoPanel .rca-quota { display:flex; flex-direction:column; gap:var(--space-1); min-width:0; }
#workRakutenCouponAutoPanel .rca-quota-head { display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); }
#workRakutenCouponAutoPanel .rca-quota-title { font-size:var(--font-size-sm); font-weight:var(--font-weight-semibold); }
#workRakutenCouponAutoPanel .rca-quota-track { display:flex; width:100%; height:var(--space-2); overflow:hidden; border-radius:var(--radius-full); background:var(--bg-subtle); }
#workRakutenCouponAutoPanel .rca-quota-sent { width:0; background:var(--color-success); transition:width var(--rca-dur-slow) var(--rca-ease); }
#workRakutenCouponAutoPanel .rca-quota-processing { width:0; background:var(--color-warning); transition:width var(--rca-dur-slow) var(--rca-ease); }
#workRakutenCouponAutoPanel .rca-quota-legend { display:flex; flex-wrap:wrap; gap:var(--space-3); font-size:var(--font-size-xs); color:var(--text-secondary); }
#workRakutenCouponAutoPanel .rca-runs-line { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-2); color:var(--text-secondary); font-size:var(--font-size-sm); }
#workRakutenCouponAutoPanel .rca-runs { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-2); }
#workRakutenCouponAutoPanel .rca-run { white-space:nowrap; }
#workRakutenCouponAutoPanel .rca-run + .rca-run::before { content:'・'; margin-right:var(--space-2); color:var(--text-muted); }
#workRakutenCouponAutoPanel .rca-run strong { margin-right:var(--space-1); color:var(--text-primary); }
#workRakutenCouponAutoPanel .rca-actions { display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:center; }
#workRakutenCouponAutoPanel .rca-actions-note { color:var(--text-tertiary); font-size:var(--font-size-xs); }
#workRakutenCouponAutoPanel .rca-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-3); }
#workRakutenCouponAutoPanel .rca-wide { grid-column:1/-1; }
#workRakutenCouponAutoPanel .rca-field { display:flex; flex-direction:column; align-items:stretch; gap:var(--space-1); min-width:0; }
#workRakutenCouponAutoPanel .rca-field-label { color:var(--text-primary); font-size:var(--font-size-base); font-weight:var(--font-weight-semibold); }
#workRakutenCouponAutoPanel .rca-field-hint, #workRakutenCouponAutoPanel .rca-form-note { color:var(--text-tertiary); font-size:var(--font-size-xs); font-weight:var(--font-weight-normal); line-height:var(--line-height-normal); }
#workRakutenCouponAutoPanel .rca-field > .input, #workRakutenCouponAutoPanel .rca-field > .select, #workRakutenCouponAutoPanel .rca-field > .textarea { width:100%; }
#workRakutenCouponAutoPanel .rca-number { max-width:calc(var(--space-8) * 4 + var(--space-3)); }
#workRakutenCouponAutoPanel .rca-order-list { min-height:calc(var(--space-8) * 3); }
#workRakutenCouponAutoPanel .rca-settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-3); }
#workRakutenCouponAutoPanel .rca-settings-card { display:flex; flex-direction:column; gap:var(--space-3); }
#workRakutenCouponAutoPanel .rca-settings-card--wide { grid-column:1/-1; }
#workRakutenCouponAutoPanel .rca-safety-card { border-color:var(--color-warning); }
#workRakutenCouponAutoPanel .rca-switch-list { display:flex; flex-direction:column; gap:var(--space-3); }
#workRakutenCouponAutoPanel .rca-switch { position:relative; display:flex; align-items:center; gap:var(--space-3); cursor:pointer; }
#workRakutenCouponAutoPanel .rca-switch input { position:absolute; z-index:1; left:0; width:calc(var(--space-8) + var(--space-1)); height:var(--space-5); margin:0; opacity:0; cursor:pointer; }
#workRakutenCouponAutoPanel .rca-switch-track { position:relative; flex:0 0 auto; width:calc(var(--space-8) + var(--space-1)); height:var(--space-5); border-radius:var(--radius-full); background:var(--border-medium); transition:background var(--rca-dur) var(--rca-ease); }
#workRakutenCouponAutoPanel .rca-switch-knob { position:absolute; top:calc(var(--space-1) / 2); left:calc(var(--space-1) / 2); width:var(--space-4); height:var(--space-4); border-radius:var(--radius-full); background:var(--bg-surface); box-shadow:var(--shadow-sm); transition:transform var(--rca-dur) var(--rca-ease); }
#workRakutenCouponAutoPanel .rca-switch input:checked + .rca-switch-track { background:var(--color-primary); }
#workRakutenCouponAutoPanel .rca-switch input:checked + .rca-switch-track .rca-switch-knob { transform:translateX(var(--space-4)); }
#workRakutenCouponAutoPanel .rca-switch input:focus-visible + .rca-switch-track { box-shadow:var(--shadow-focus); }
#workRakutenCouponAutoPanel .rca-switch-copy { display:flex; flex-direction:column; gap:var(--space-1); }
#workRakutenCouponAutoPanel .rca-safety-warning { margin:0; color:var(--color-danger); font-size:var(--font-size-sm); line-height:var(--line-height-relaxed); }
#workRakutenCouponAutoPanel .rca-template-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-3); }
#workRakutenCouponAutoPanel .rca-template-editor { display:flex; flex-direction:column; gap:var(--space-3); }
#workRakutenCouponAutoPanel .rca-template-editor-card { display:flex; flex-direction:column; gap:var(--space-3); width:100%; }
#workRakutenCouponAutoPanel .rca-template-body { min-height:calc(var(--space-8) * 10); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; line-height:var(--line-height-relaxed); }
#workRakutenCouponAutoPanel .rca-template-actions { justify-content:flex-end; }
#workRakutenCouponAutoPanel .rca-placeholder-list { display:flex; flex-wrap:wrap; gap:var(--space-2); }
#workRakutenCouponAutoPanel .rca-placeholder { border:1px solid var(--color-info-border); border-radius:var(--radius-full); padding:var(--space-1) var(--space-2); background:var(--color-info-bg); color:var(--color-info); cursor:pointer; }
#workRakutenCouponAutoPanel .rca-preview { white-space:pre-wrap; overflow-wrap:anywhere; font-family:var(--font-family); font-size:var(--font-size-base); color:var(--text-primary); }
#workRakutenCouponAutoPanel .rca-two-column { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-3); }
#workRakutenCouponAutoPanel .rca-table-wrap { overflow:auto; }
#workRakutenCouponAutoPanel .rca-history-row { cursor:pointer; }
#workRakutenCouponAutoPanel .rca-history-row:focus-visible { outline:var(--space-1) solid var(--border-focus); outline-offset:calc(var(--space-1) * -1); }
#workRakutenCouponAutoPanel .rca-pagination { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); padding:var(--space-2) var(--space-3); border-top:1px solid var(--border-default); }
#workRakutenCouponAutoPanel .rca-pagination-controls { display:flex; align-items:center; gap:var(--space-2); }
#workRakutenCouponAutoPanel .rca-modal-backdrop { animation:rca-backdrop-in var(--rca-dur) var(--rca-ease); }
#workRakutenCouponAutoPanel .rca-modal { animation:rca-modal-in var(--rca-dur) var(--rca-ease); }
#workRakutenCouponAutoPanel .rca-modal-title { margin:0; font-size:var(--font-size-xl); }
#workRakutenCouponAutoPanel .rca-dialog-check { display:flex; align-items:flex-start; gap:var(--space-2); margin-top:var(--space-3); color:var(--text-primary); font-size:var(--font-size-sm); }
#workRakutenCouponAutoPanel .rca-detail-grid { display:grid; grid-template-columns:auto 1fr; gap:var(--space-2) var(--space-3); }
#workRakutenCouponAutoPanel .rca-detail-key { font-weight:var(--font-weight-semibold); }
#workRakutenCouponAutoPanel .rca-detail-value { overflow-wrap:anywhere; white-space:pre-wrap; }
#workRakutenCouponAutoPanel .rca-skeleton { display:grid; gap:var(--space-3); }
#workRakutenCouponAutoPanel .rca-skeleton-line { height:var(--space-6); border-radius:var(--radius-lg); background:linear-gradient(90deg,var(--bg-subtle),var(--bg-muted),var(--bg-subtle)); background-size:200% 100%; animation:rca-skeleton var(--rca-dur-slow) linear infinite; }
#workRakutenCouponAutoPanel .rca-visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
#workRakutenCouponAutoPanel .rca-busy::before { content:''; display:inline-block; width:var(--space-3); height:var(--space-3); margin-right:var(--space-1); border:1px solid currentColor; border-top-color:transparent; border-radius:var(--radius-full); animation:rca-spin var(--rca-dur-slow) linear infinite; vertical-align:middle; }
#workRakutenCouponAutoPanel .rca-actions .btn:active, #workRakutenCouponAutoPanel .rca-tab:active, #workRakutenCouponAutoPanel .rca-gate:active { transform:scale(.98); }
@keyframes rca-fade-up { from { opacity:0; transform:translateY(var(--space-2)); } to { opacity:1; transform:none; } }
@keyframes rca-tab-in { from { opacity:0; transform:translateX(var(--space-2)); } to { opacity:1; transform:none; } }
@keyframes rca-backdrop-in { from { opacity:0; } to { opacity:1; } }
@keyframes rca-modal-in { from { opacity:0; transform:scale(.96); } to { opacity:1; transform:none; } }
@keyframes rca-toast-in { from { opacity:0; transform:translateX(var(--space-4)); } to { opacity:1; transform:none; } }
@keyframes rca-skeleton { from { background-position:100% 0; } to { background-position:-100% 0; } }
@keyframes rca-spin { to { transform:rotate(1turn); } }
@keyframes rca-attention { 0%,100% { box-shadow:none; } 50% { box-shadow:var(--shadow-lg); } }
@keyframes rca-details-in { from { opacity:0; transform:translateY(calc(var(--space-1) * -1)); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) { #workRakutenCouponAutoPanel .rca-mode, #workRakutenCouponAutoPanel .rca-gate, #workRakutenCouponAutoPanel .rca-card, #workRakutenCouponAutoPanel .rca-panel, #workRakutenCouponAutoPanel .rca-modal-backdrop, #workRakutenCouponAutoPanel .rca-modal, #workRakutenCouponAutoPanel .rca-message, #workRakutenCouponAutoPanel .rca-quota-sent, #workRakutenCouponAutoPanel .rca-quota-processing, #workRakutenCouponAutoPanel .rca-actions .btn, #workRakutenCouponAutoPanel .rca-railbody, #workRakutenCouponAutoPanel .rca-railmark { transition-duration:.01ms!important; animation-duration:.01ms!important; } #workRakutenCouponAutoPanel .rca-skeleton-line, #workRakutenCouponAutoPanel .rca-busy::before { animation:none!important; } }
/* 楽天クーポン自動配布 v3 — トップ、8節の設定、承認パネル */
#workRakutenCouponAutoPanel .rca-shell { max-width:1180px; margin:auto; padding:var(--space-4) var(--space-6) var(--space-8); }
#workRakutenCouponAutoPanel .rca-card, #workRakutenCouponAutoPanel .card { min-width:0; }
#workRakutenCouponAutoPanel h1 { font-size:var(--font-size-xl); margin:0; }
#workRakutenCouponAutoPanel h2 { font-size:var(--font-size-base); margin:0 0 var(--space-2); }
#workRakutenCouponAutoPanel .rca-heading { font-size:var(--font-size-lg); }
#workRakutenCouponAutoPanel .rca-v3-status { display:flex; align-items:center; gap:var(--space-4); margin:var(--space-3) 0; }
#workRakutenCouponAutoPanel .rca-v3-status p { margin:var(--space-1) 0 0; color:var(--text-tertiary); font-size:var(--font-size-sm); }
#workRakutenCouponAutoPanel #rcaOpenSettings { margin-left:auto; }
#workRakutenCouponAutoPanel .rca-lamp { width:14px; height:14px; flex:none; border-radius:var(--radius-full); background:currentColor; position:relative; }
#workRakutenCouponAutoPanel .rca-lamp::after { content:""; position:absolute; inset:-6px; border-radius:var(--radius-full); border:2px solid currentColor; animation:rca-ring 2.4s ease-out infinite; }
#workRakutenCouponAutoPanel .rca-lamp-ok { color:var(--color-success); }
#workRakutenCouponAutoPanel .rca-lamp-wait { color:var(--color-warning); }
#workRakutenCouponAutoPanel .rca-lamp-bad { color:var(--color-danger); }
#workRakutenCouponAutoPanel .rca-flow { padding:var(--space-5) var(--space-6); border-radius:var(--radius-xl); box-shadow:var(--shadow-sm); }
#workRakutenCouponAutoPanel .rca-flow-head, #workRakutenCouponAutoPanel .rca-period { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-2); }
#workRakutenCouponAutoPanel .rca-flow-head h2 { margin-right:auto; }
#workRakutenCouponAutoPanel .rca-period .input { width:auto; }
#workRakutenCouponAutoPanel .rca-chip { border-radius:var(--radius-full); }
#workRakutenCouponAutoPanel .rca-chip[aria-pressed=true] { background:var(--color-primary-bg); border-color:var(--color-primary); color:var(--color-primary); }
#workRakutenCouponAutoPanel .rca-track { display:grid; grid-template-columns:1fr 50px 1fr 50px 1fr 50px 1fr 50px 1fr; align-items:start; margin-top:var(--space-4); }
#workRakutenCouponAutoPanel .rca-stage { text-align:center; padding:var(--space-2) var(--space-1); border-radius:var(--radius-lg); min-width:0; }
#workRakutenCouponAutoPanel .rca-stage:hover { background:var(--bg-muted); }
#workRakutenCouponAutoPanel .rca-dot { width:64px; height:64px; border:3px solid var(--color-primary); border-radius:var(--radius-full); display:grid; place-items:center; margin:auto; background:var(--bg-surface); color:var(--color-primary); }
#workRakutenCouponAutoPanel .rca-dot svg { width:28px; height:28px; }
#workRakutenCouponAutoPanel .rca-locked .rca-dot { border-color:var(--color-warning); border-style:dashed; color:var(--color-warning); background:var(--color-warning-bg); }
#workRakutenCouponAutoPanel .rca-stage h3 { font-size:var(--font-size-sm); margin:var(--space-2) 0 0; }
#workRakutenCouponAutoPanel .rca-stage .rca-section-copy { font-size:var(--font-size-xs); }
#workRakutenCouponAutoPanel .rca-number-count { font-size:var(--font-size-2xl); font-weight:var(--font-weight-bold); font-variant-numeric:tabular-nums; }
#workRakutenCouponAutoPanel .rca-number-count small { font-size:var(--font-size-xs); color:var(--text-tertiary); margin-left:var(--space-1); }
#workRakutenCouponAutoPanel .rca-flow-link { position:relative; height:64px; margin-top:var(--space-2); display:flex; align-items:center; justify-content:center; }
#workRakutenCouponAutoPanel .rca-pipe { position:absolute; left:-6px; right:-6px; top:30px; height:6px; border-radius:var(--radius-sm); background:var(--bg-subtle); overflow:hidden; }
#workRakutenCouponAutoPanel .rca-pipe i, #workRakutenCouponAutoPanel .rca-pipe b { position:absolute; inset:0; background:var(--color-primary); opacity:.25; }
#workRakutenCouponAutoPanel .rca-pipe b { opacity:0; background:repeating-linear-gradient(90deg,var(--color-primary) 0 10px,transparent 10px 20px); }
#workRakutenCouponAutoPanel .rca-flowing .rca-pipe b { opacity:.9; animation:rca-stream 1.1s linear infinite; }
#workRakutenCouponAutoPanel .rca-flow-stop .rca-pipe i { background:var(--color-warning); }
#workRakutenCouponAutoPanel .rca-pct { position:relative; top:-18px; font-size:var(--font-size-xs); font-weight:var(--font-weight-bold); color:var(--color-primary); padding:0 var(--space-1); background:var(--bg-surface); }
#workRakutenCouponAutoPanel .rca-legend { margin-top:var(--space-3); padding-top:var(--space-2); border-top:1px dashed var(--border-default); font-size:var(--font-size-xs); color:var(--text-tertiary); }
#workRakutenCouponAutoPanel #rcaFlowTip { min-height:var(--space-4); }
#workRakutenCouponAutoPanel .rca-cols { display:grid; grid-template-columns:1.25fr 1fr; gap:var(--space-4); }
#workRakutenCouponAutoPanel .rca-todo { list-style:none; margin:var(--space-3) 0 0; padding:0; display:grid; gap:var(--space-2); }
#workRakutenCouponAutoPanel .rca-todo li { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3); border:1px solid var(--border-default); border-radius:var(--radius-lg); }
#workRakutenCouponAutoPanel .rca-todo li .btn { margin-left:auto; flex:none; }
#workRakutenCouponAutoPanel .rca-todo-icon { flex:none; border-radius:var(--radius-full); background:var(--color-warning-subtle); color:var(--color-warning-text); width:28px; height:28px; display:grid; place-items:center; }
#workRakutenCouponAutoPanel .rca-todo .rca-todo-empty { color:var(--text-tertiary); border-style:dashed; }
#workRakutenCouponAutoPanel .rca-calendar { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:var(--space-1); margin:var(--space-2) 0 var(--space-3); }
#workRakutenCouponAutoPanel .rca-day { border:1px solid var(--border-default); background:var(--bg-muted); border-radius:var(--radius-md); padding:var(--space-2) var(--space-1); text-align:center; font-size:var(--font-size-xs); color:var(--text-tertiary); }
#workRakutenCouponAutoPanel .rca-day b, #workRakutenCouponAutoPanel .rca-day span { display:block; }
#workRakutenCouponAutoPanel .rca-day b { color:var(--text-primary); }
#workRakutenCouponAutoPanel .rca-day-today { border-color:var(--color-primary); background:var(--color-primary-bg); }
#workRakutenCouponAutoPanel .rca-day-ok { color:var(--color-success-text); }
#workRakutenCouponAutoPanel .rca-day-bad { color:var(--color-danger-text); }
#workRakutenCouponAutoPanel .rca-day-wait { color:var(--color-warning-text); }
#workRakutenCouponAutoPanel .rca-kv { display:grid; grid-template-columns:auto 1fr; gap:var(--space-2) var(--space-3); font-size:var(--font-size-xs); }
#workRakutenCouponAutoPanel .rca-kv dt { color:var(--text-tertiary); }
#workRakutenCouponAutoPanel .rca-kv dd { margin:0; font-weight:var(--font-weight-semibold); overflow-wrap:anywhere; }
#workRakutenCouponAutoPanel .rca-get-bar { height:8px; border-radius:var(--radius-sm); background:var(--bg-subtle); overflow:hidden; margin:var(--space-2) 0; }
#workRakutenCouponAutoPanel .rca-get-bar i { display:block; height:100%; background:var(--color-primary); }
#workRakutenCouponAutoPanel .rca-rule { padding:var(--space-3); background:var(--color-success-bg); border:1px solid var(--color-success-subtle); border-radius:var(--radius-lg); white-space:pre-wrap; font:inherit; font-size:var(--font-size-xs); }
#workRakutenCouponAutoPanel .rca-settings-layout { display:grid; grid-template-columns:220px minmax(0,1fr); gap:var(--space-5); margin-top:var(--space-4); }
#workRakutenCouponAutoPanel .rca-toc { position:sticky; top:var(--space-4); align-self:start; display:grid; gap:var(--space-1); }
#workRakutenCouponAutoPanel .rca-toc a { padding:var(--space-2) var(--space-3); border-radius:var(--radius-md); color:var(--text-secondary); font-size:var(--font-size-sm); font-weight:var(--font-weight-semibold); text-decoration:none; }
#workRakutenCouponAutoPanel .rca-toc a:hover, #workRakutenCouponAutoPanel .rca-toc a[aria-current] { background:var(--color-primary-bg); color:var(--color-primary); }
#workRakutenCouponAutoPanel .rca-setting-section { margin-bottom:var(--space-4); scroll-margin-top:var(--space-4); }
#workRakutenCouponAutoPanel .rca-setting-section .rca-settings-card { border:0; padding:0; box-shadow:none; }
#workRakutenCouponAutoPanel .rca-setting-section .rca-two-column { grid-template-columns:1fr; }
#workRakutenCouponAutoPanel .rca-sentence { display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; }
#workRakutenCouponAutoPanel .rca-sentence input { width:64px; }
#workRakutenCouponAutoPanel .rca-fixed { padding:var(--space-2); border:1px solid var(--border-default); border-radius:var(--radius-md); background:var(--bg-muted); font-size:var(--font-size-sm); }
#workRakutenCouponAutoPanel summary { cursor:pointer; padding:var(--space-2) 0; color:var(--text-secondary); }
#workRakutenCouponAutoPanel .rca-savebar { position:sticky; bottom:0; z-index:2; display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3) var(--space-4); background:var(--bg-nav); color:var(--text-inverse); border-radius:var(--radius-lg); opacity:0; transform:translateY(120%); visibility:hidden; transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .3s,visibility .3s; }
#workRakutenCouponAutoPanel .rca-savebar-show { opacity:1; transform:none; visibility:visible; }
#workRakutenCouponAutoPanel .rca-savebar span { margin-right:auto; }
#workRakutenCouponAutoPanel .rca-sheet-backdrop { justify-content:flex-end; padding:0; }
#workRakutenCouponAutoPanel .rca-sheet-backdrop .rca-modal { width:min(760px,100%); max-width:760px; height:100%; max-height:100%; margin:0; border-radius:0; display:flex; flex-direction:column; animation:rca-sheet-in .35s cubic-bezier(.2,.8,.2,1); }
#workRakutenCouponAutoPanel .rca-sheet-backdrop .modal-body { flex:1; overflow:auto; }
#workRakutenCouponAutoPanel .rca-sheet-backdrop .rca-template-editor { display:block; }
#workRakutenCouponAutoPanel .rca-mail-steps { display:flex; gap:var(--space-2); margin-bottom:var(--space-4); }
#workRakutenCouponAutoPanel .rca-mail-steps button { flex:1; white-space:normal; text-align:left; }
#workRakutenCouponAutoPanel .rca-mail-steps [aria-pressed=true] { border-color:var(--color-primary); background:var(--color-primary-bg); }
#workRakutenCouponAutoPanel .rca-envelope { position:relative; border:1px solid var(--border-default); border-radius:var(--radius-lg); overflow:hidden; }
#workRakutenCouponAutoPanel #rcaMailMeta, #workRakutenCouponAutoPanel #rcaMailSubject { padding:var(--space-3) var(--space-4); margin:0; background:var(--bg-muted); }
#workRakutenCouponAutoPanel #rcaMailMeta { color:var(--text-tertiary); font-size:var(--font-size-xs); }
#workRakutenCouponAutoPanel #rcaMailSubject { border-bottom:1px solid var(--border-default); font-size:var(--font-size-base); }
#workRakutenCouponAutoPanel #rcaMailBody { padding:var(--space-4); margin:0; line-height:var(--line-height-relaxed); }
#workRakutenCouponAutoPanel .rca-stamp { position:absolute; right:var(--space-6); top:var(--space-4); border:3px solid var(--color-success-dark); color:var(--color-success-dark); font-weight:var(--font-weight-bold); font-size:var(--font-size-2xl); padding:var(--space-2) var(--space-4); border-radius:var(--radius-md); transform:rotate(-8deg); animation:rca-stamp .5s cubic-bezier(.2,1.4,.4,1); pointer-events:none; }
#workRakutenCouponAutoPanel :focus-visible { outline:2px solid var(--color-primary); outline-offset:2px; }
@keyframes rca-ring { from { transform:scale(.6); opacity:.6; } to { transform:scale(1.6); opacity:0; } }
@keyframes rca-stream { from { transform:translateX(-20px); } to { transform:translateX(0); } }
@keyframes rca-stamp { from { transform:rotate(-8deg) scale(1.6); opacity:0; } to { transform:rotate(-8deg) scale(1); opacity:.9; } }
@keyframes rca-sheet-in { from { transform:translateX(100%); } to { transform:none; } }
@media (max-width:900px) {
  #workRakutenCouponAutoPanel .rca-cols, #workRakutenCouponAutoPanel .rca-settings-layout { grid-template-columns:1fr; }
  #workRakutenCouponAutoPanel .rca-toc { position:static; grid-template-columns:repeat(2,1fr); }
  #workRakutenCouponAutoPanel .rca-v3-status, #workRakutenCouponAutoPanel .rca-todo li { flex-wrap:wrap; }
  #workRakutenCouponAutoPanel .rca-track { grid-template-columns:repeat(5,minmax(120px,1fr)); overflow:auto; }
  #workRakutenCouponAutoPanel .rca-flow-link { display:none; }
  #workRakutenCouponAutoPanel .rca-shell { padding:var(--space-3); }
}
@media (prefers-reduced-motion:reduce) {
  #workRakutenCouponAutoPanel *, #workRakutenCouponAutoPanel *::before, #workRakutenCouponAutoPanel *::after { animation:none!important; transition:none!important; }
  #workRakutenCouponAutoPanel .rca-lamp::after { opacity:0; }
}
#workRakutenCouponAutoPanel .rca-day-pip { display:block; width:8px; height:8px; border-radius:var(--radius-full); margin:var(--space-1) auto; background:var(--border-medium); }
#workRakutenCouponAutoPanel .rca-day-ok .rca-day-pip { background:var(--color-success); }
#workRakutenCouponAutoPanel .rca-day-bad .rca-day-pip { background:var(--color-danger); }
#workRakutenCouponAutoPanel .rca-day-wait .rca-day-pip { background:var(--color-warning); }
#workRakutenCouponAutoPanel .rca-switch input:checked + .rca-switch-track { background:var(--color-success-dark); }
#workRakutenCouponAutoPanel .rca-setting-section .rca-switch { flex-direction:row-reverse; padding:var(--space-3) 0; border-bottom:1px solid var(--bg-subtle); }
#workRakutenCouponAutoPanel .rca-setting-section .rca-switch-copy { margin-right:auto; }
#workRakutenCouponAutoPanel .rca-mail-placeholder { background:var(--color-primary-subtle); color:var(--color-primary-hover); border-radius:var(--radius-sm); padding:0 var(--space-1); font-weight:var(--font-weight-semibold); }

/* オーナーのToDo（スタッフ › 小室勝洋 › ToDo）。土台はタイムカードの .stc2-* を流用する */
.otd-cal-cell { position: relative; }
.otd-badge {
  position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: var(--radius-full); font-size: 10px; line-height: 16px; font-weight: var(--font-weight-bold);
  color: var(--text-inverse); background: var(--color-primary);
}
.stc2-cal-cell.otd-cal-cell.is-over { background: var(--color-danger-bg); color: var(--color-danger-text); border-color: var(--color-danger-subtle); }
.otd-cal-cell.is-over .otd-badge { background: var(--color-danger); }
.otd-cal-cell.is-selected { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.stc2-cal-legend i.otd-legend-over { margin-left: var(--space-3); background: var(--color-danger-bg); border: 1px solid var(--color-danger-subtle); }

.otd-filters { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.otd-chip {
  border: 1px solid var(--border-medium); background: var(--bg-surface); color: var(--text-secondary);
  border-radius: var(--radius-full); padding: 5px 12px; font-size: var(--font-size-sm); cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.otd-chip:hover { background: var(--bg-subtle); }
.otd-chip.is-on { background: var(--color-primary); border-color: var(--color-primary); color: var(--text-inverse); }
.otd-chip-n { margin-left: var(--space-1); font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; }
.otd-filters-spacer { flex: 1; }
.otd-sel { font-size: var(--font-size-sm); color: var(--text-tertiary); }

.stc2-listhead.otd-listhead, .stc2-row.otd-row { grid-template-columns: 128px minmax(0, 1fr) 210px 150px 230px; }
.stc2-row.otd-row { align-items: center; }
.otd-group { margin: var(--space-3) var(--space-1) 0; font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); color: var(--text-tertiary); letter-spacing: .04em; }
.otd-group.is-over { color: var(--color-danger-text); }
.otd-main { min-width: 0; }
.otd-title { font-weight: var(--font-weight-semibold); color: var(--text-primary); font-size: var(--font-size-base); line-height: var(--line-height-normal); overflow-wrap: anywhere; }
.otd-sub { margin-top: 3px; font-size: var(--font-size-xs); color: var(--text-tertiary); line-height: var(--line-height-normal); overflow-wrap: anywhere; }
.otd-toggle {
  margin-top: var(--space-1); padding: 0; border: none; background: none; cursor: pointer;
  font-size: var(--font-size-xs); color: var(--color-primary);
}
.otd-toggle:hover { text-decoration: underline; }
.otd-steps {
  display: none; margin-top: 6px; padding: 6px 10px; border-radius: var(--radius-md);
  background: var(--bg-subtle); color: var(--text-secondary); font-size: var(--font-size-xs);
  line-height: var(--line-height-relaxed); white-space: pre-wrap; overflow-wrap: anywhere;
}
.otd-row.is-steps-open .otd-steps { display: block; }
.otd-why, .otd-src { font-size: var(--font-size-xs); color: var(--text-secondary); line-height: var(--line-height-normal); overflow-wrap: anywhere; }
.otd-why-label {
  display: inline-block; margin-bottom: 3px; padding: 1px 7px; border-radius: var(--radius-sm);
  background: var(--color-primary-bg); color: var(--color-primary); font-size: 11px; font-weight: var(--font-weight-bold);
}
.otd-muted { color: var(--text-muted); }
.otd-src-kind { display: inline-block; margin-bottom: 3px; padding: 1px 6px; border-radius: var(--radius-sm); font-size: 10.5px; font-weight: var(--font-weight-bold); }
.otd-src-kind.is-ai { background: var(--color-success-bg); color: var(--color-success-text); }
.otd-src-kind.is-owner { background: var(--bg-subtle); color: var(--text-secondary); }
.otd-ops { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.otd-done {
  height: 30px; padding: 0 12px; border-radius: var(--radius-md); cursor: pointer;
  border: 1px solid var(--color-success); background: var(--color-success-bg); color: var(--color-success-text);
  font-size: var(--font-size-sm); font-weight: var(--font-weight-bold);
  transition: filter var(--transition-fast);
}
.otd-done:hover { filter: brightness(.97); }
.otd-ops .stc2-iconbtn { height: 30px; }
.otd-ops button:disabled { opacity: .5; cursor: not-allowed; }
.otd-due-over { color: var(--color-danger-text); }
.otd-time { font-size: 11px; color: var(--text-tertiary); }
.otd-due-left { font-size: 11px; font-weight: var(--font-weight-bold); padding: 1px 6px; border-radius: var(--radius-sm); width: fit-content; }
.otd-due-left.is-over { background: var(--color-danger-bg); color: var(--color-danger-text); }
.otd-due-left.is-today { background: var(--color-warning-bg); color: var(--color-warning-text); }
.otd-due-left.is-soon { background: var(--color-primary-bg); color: var(--color-primary); }
/* 着手中（2026-10-06 対話セッションでの対応計画をToDoへ統合）。期限切れの赤ではなく「進めている」印にする */
.otd-due-left.is-doing { background: var(--color-success-bg); color: var(--color-success-text); }
.otd-row.is-doing .otd-title { color: var(--text-secondary); }
/* 引き継ぎmd（相談しながら進める仕事の再開資料）。パスは折り返して全文を見せ、コピーは右に置く */
.otd-handoff { display: flex; align-items: flex-start; gap: var(--space-2); margin-top: var(--space-1); font-size: var(--font-size-xs); color: var(--text-tertiary); }
.otd-handoff-path { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: var(--font-size-xs); }
.otd-handoff .btn { flex-shrink: 0; }
.otd-row.is-done { opacity: .55; }
.otd-row.is-done .otd-title { text-decoration: line-through; }

/* 冴香さんのToDoタブ: 「AIからの依頼」（owner_todos）と「会話から拾ったToDo」（staff_todos）の区分切替 */
.otd-kinds {
  display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-lg);
  background: var(--bg-subtle); border: 1px solid var(--border-default); width: fit-content;
}
.otd-kind {
  border: none; background: none; cursor: pointer; padding: 6px 14px; border-radius: var(--radius-md);
  font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--text-secondary);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.otd-kind:hover { color: var(--text-primary); }
.otd-kind.is-on { background: var(--bg-surface); color: var(--text-primary); box-shadow: var(--shadow-sm); }
.otd-kind-n {
  display: inline-block; min-width: 18px; margin-left: 6px; padding: 0 5px; border-radius: var(--radius-full);
  background: var(--border-medium); color: var(--text-inverse); font-size: 11px; line-height: 18px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.otd-kind.is-on .otd-kind-n { background: var(--color-primary); }
.otd-kind-note { font-size: var(--font-size-xs); color: var(--text-tertiary); }
.otd-src-kind.is-conv { background: var(--color-primary-bg); color: var(--color-primary); }
.otd-src-kind.is-waiting { background: var(--color-warning-bg); color: var(--color-warning-text); }
.otd-conv-link { display: inline-block; margin-top: var(--space-1); font-size: var(--font-size-xs); color: var(--color-primary); text-decoration: none; }
.otd-conv-link:hover { text-decoration: underline; }
.otd-nodue { font-size: var(--font-size-sm); color: var(--text-muted); }
.otd-badge.is-conv { background: var(--color-warning); }

.otd-form-host:empty { display: none; }
.otd-form {
  display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4) var(--space-5);
  background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm);
}
.otd-form-title { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--text-secondary); }
.otd-form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.otd-field { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--font-size-xs); color: var(--text-secondary); }
.otd-field-wide { grid-column: span 2; }
.otd-field-full { grid-column: 1 / -1; }
.otd-form-actions { display: flex; gap: var(--space-2); }
@media (max-width: 900px) {
  .stc2-row.otd-row { grid-template-columns: 1fr; }
  .otd-ops { justify-content: flex-start; }
  .otd-form-grid { grid-template-columns: 1fr; }
  .otd-field-wide { grid-column: auto; }
}

/* 販路で返金した内容の記録 */
.mrr-sub{font-size:var(--font-size-xs);color:var(--text-secondary);margin-top:2px}
.mrr-step{margin:0 0 20px}
.mrr-step:last-child{margin-bottom:0}
.mrr-step-head{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);color:var(--text-primary)}
.mrr-num{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--color-primary);color:var(--text-inverse);font-size:var(--font-size-xs)}
.mrr-mall{border:1px solid var(--border-default);border-radius:var(--radius-lg);padding:12px;background:var(--bg-muted)}
.mrr-mall-status{display:flex;align-items:center;gap:8px;font-size:var(--font-size-sm);margin-bottom:8px}
.mrr-mall table{width:100%;border-collapse:collapse;font-size:var(--font-size-sm)}
.mrr-mall th{font-size:var(--font-size-xs);color:var(--text-secondary);text-align:left;font-weight:var(--font-weight-normal);padding:4px 6px;border-bottom:1px solid var(--border-default)}
.mrr-mall td{padding:6px;border-bottom:1px solid var(--border-default)}
.mrr-mall td.num,.mrr-mall th.num{text-align:right;font-variant-numeric:tabular-nums}
.mrr-mall tfoot td,.mrr-mall .mrr-payment-total td{border-bottom:none;font-weight:var(--font-weight-bold)}
.mrr-mall-foot{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:var(--font-size-xs);color:var(--text-secondary)}
.mrr-amounts{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:8px;align-items:end}
.mrr-op{padding-bottom:9px;color:var(--text-secondary);font-size:var(--font-size-lg)}
.mrr-total{font-size:var(--font-size-xs);color:var(--text-secondary)}
.mrr-total strong{display:block;font-size:var(--font-size-2xl);color:var(--text-primary);font-variant-numeric:tabular-nums;line-height:1.2;padding:4px 0}
.mrr-yen{position:relative}
.mrr-yen .input{width:100%;box-sizing:border-box;padding-right:28px;text-align:right;font-variant-numeric:tabular-nums}
.mrr-yen span{position:absolute;right:10px;bottom:9px;font-size:var(--font-size-sm);color:var(--text-secondary)}
.mrr-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.mrr-filled{font-size:var(--font-size-xs);color:var(--color-success-text);margin-top:6px}
.mrr-choice{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mrr-choice label{display:block;border:1px solid var(--border-default);border-radius:var(--radius-lg);padding:10px 12px;cursor:pointer;font-size:var(--font-size-sm);background:var(--bg-surface)}
.mrr-choice label.is-on{border-color:var(--color-primary);background:var(--color-primary-bg);color:var(--text-primary);box-shadow:0 0 0 1px var(--color-primary)}
.mrr-choice b{display:block;margin-bottom:2px}
.mrr-choice small{color:var(--text-secondary);font-size:var(--font-size-xs)}
.mrr-summary{flex:1;font-size:var(--font-size-sm);color:var(--text-secondary)}
.mrr-summary b{color:var(--text-primary)}
.mrr-foot{display:flex;align-items:center;gap:8px}
.mrr-details summary{cursor:pointer;font-size:var(--font-size-xs);color:var(--text-secondary);margin-top:12px}

.mrr-modal { max-width:640px; }
.mrr-title { margin:0; font-size:var(--font-size-xl); }
.mrr-fields { border:0; padding:0; margin:0; min-width:0; }
.mrr-error { color:var(--color-danger-text); }
.mrr-sub { overflow-wrap:anywhere; }
.mrr-mall { overflow-x:auto; }
.mrr-mall-foot { gap:8px; flex-wrap:wrap; }
.mrr-foot { flex-wrap:wrap; }
.mrr-summary { min-width:180px; }
.mrr-modal [hidden] { display:none; }

/* 電話設定 */
.phone-inquiries-period-buttons[hidden] { display: none; }
.phone-settings-card { margin: var(--space-5); padding: var(--space-5); }
.phone-settings-card h3 { margin-bottom: var(--space-3); }
.phone-settings-card .phone-inquiries-forward-copy { gap: var(--space-3); }
/* 承認待ち: モックv4の固定幅7ステップ */
#ownerApprovalsNav[hidden] { display: none; }
#ownerApprovalsSubPanel { --oa-step-w: 118px; --oa-steps-visible: 7; --oa-act-w: 210px; }
.oa-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4); padding: var(--space-4) var(--space-5) var(--space-2); }
.oa-head h1 { margin: 0; font-size: var(--font-size-3xl); }
.oa-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.oa-chip { border: 1px solid var(--border-default); background: var(--bg-surface); color: var(--text-secondary); border-radius: var(--radius-full); padding: var(--space-1) var(--space-3); cursor: pointer; }
.oa-chip.is-active { background: var(--text-primary); color: var(--text-inverse); }
.oa-legend { padding: 0 var(--space-5) var(--space-3); color: var(--text-tertiary); font-size: var(--font-size-sm); }
.oa-list { display: flex; flex-direction: column; gap: var(--space-3); padding: 0 var(--space-5) var(--space-6); }
.oa-item { position: relative; display: grid; grid-template-columns: minmax(0, calc(var(--oa-step-w) * var(--oa-steps-visible))) var(--oa-act-w); grid-template-areas: "title act" "desc act" "flow act"; gap: var(--space-2) var(--space-6); width: max-content; max-width: 100%; padding: var(--space-4) var(--space-5) var(--space-4) var(--space-6); border: 1px solid var(--border-default); border-radius: var(--radius-xl); background: var(--bg-surface); }
.oa-item::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--space-1); border-radius: var(--radius-xl) 0 0 var(--radius-xl); background: var(--color-primary); }
.oa-k-nora::before { background: repeating-linear-gradient(180deg, var(--text-muted) 0 var(--space-2), transparent var(--space-2) var(--space-3)); }
.oa-title { grid-area: title; display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.oa-title h2 { margin: 0; font-size: var(--font-size-2xl); font-weight: 800; }
.oa-badge { border-radius: var(--radius-full); padding: 0 var(--space-2); font-size: var(--font-size-sm); background: var(--color-primary); color: var(--text-inverse); }
.oa-k-nora .oa-badge { background: var(--bg-muted); color: var(--text-secondary); border: 1px dashed var(--text-muted); }
.oa-badge.oa-digest { background: var(--color-info-subtle); color: var(--color-info); }
.oa-desc { grid-area: desc; line-height: 1.75; color: var(--text-secondary); overflow-wrap: anywhere; white-space: pre-wrap; }
.oa-desc b { color: var(--text-primary); }
.oa-flow-wrap { grid-area: flow; overflow-x: auto; min-width: 0; width: 100%; scrollbar-width: thin; padding-bottom: var(--space-1); }
.oa-flow-wrap.has-left { mask-image: linear-gradient(90deg, transparent, var(--text-primary) calc(var(--space-6) * 2)); }
.oa-flow-wrap.has-right { mask-image: linear-gradient(90deg, var(--text-primary) calc(100% - calc(var(--space-6) * 2)), transparent); }
.oa-flow-wrap.has-left.has-right { mask-image: linear-gradient(90deg, transparent, var(--text-primary) calc(var(--space-6) * 2), var(--text-primary) calc(100% - calc(var(--space-6) * 2)), transparent); }
.oa-flow { display: flex; position: relative; width: max-content; padding-top: var(--space-6); }
.oa-rail { position: absolute; left: calc(var(--oa-step-w) / 2); top: calc(var(--space-6) + var(--space-4)); height: 2px; background: var(--text-secondary); }
.oa-step { position: relative; width: var(--oa-step-w); flex: 0 0 var(--oa-step-w); display: flex; align-items: center; flex-direction: column; text-align: center; }
.oa-who { position: absolute; top: calc(0px - var(--space-6)); }
.oa-mark { height: var(--space-8); display: flex; align-items: center; z-index: 1; }
.oa-mark i { width: var(--space-3); height: var(--space-3); background: var(--text-secondary); border: 3px solid var(--bg-surface); border-radius: 50%; box-sizing: content-box; }
.oa-s-approved i, .oa-s-rejected i, .oa-s-now i { transform: rotate(45deg); border-radius: var(--radius-sm); }
.oa-s-approved i { background: var(--color-success-dark); }
.oa-s-rejected i { background: var(--color-danger); }
.oa-s-now i { width: var(--space-4); height: var(--space-4); background: var(--color-warning); animation: oa-pulse 1.6s infinite; }
.oa-s-planned i { background: var(--bg-surface); border: 2px dashed var(--text-muted); }
.oa-label { font-size: var(--font-size-md); font-weight: 700; max-width: calc(var(--oa-step-w) - var(--space-2)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: var(--space-1); }
.oa-s-approved .oa-label, .oa-approved { color: var(--color-success-text); }
.oa-s-rejected .oa-label, .oa-rejected { color: var(--color-danger-text); }
.oa-s-now .oa-label { color: var(--color-warning-text); }
.oa-time, .oa-muted { color: var(--text-muted); font-size: var(--font-size-sm); }
.oa-act { grid-area: act; display: flex; flex-direction: column; justify-content: center; gap: var(--space-2); }
.oa-next { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--font-size-sm); color: var(--text-tertiary); }
.oa-actor { background: var(--color-primary-bg); color: var(--color-primary-active); border: 1px solid var(--color-primary-subtle); border-radius: var(--radius-lg); padding: var(--space-1) var(--space-2); text-align: center; font-weight: 800; }
.oa-open { border-radius: var(--radius-xl); background: var(--color-primary); color: var(--text-inverse); padding: var(--space-3) var(--space-2); font-weight: 800; text-align: center; text-decoration: none; }
.oa-recommend { font-size: var(--font-size-sm); color: var(--color-success-text); }
@keyframes oa-pulse { 0%,100% { box-shadow: 0 0 0 var(--space-1) var(--color-warning-subtle); } 50% { box-shadow: 0 0 0 var(--space-2) var(--color-warning-subtle); } }
@media (max-width: 900px) { .oa-item { width: 100%; grid-template-columns: minmax(0,1fr); grid-template-areas: "title" "desc" "flow" "act"; } }
@media (prefers-reduced-motion: reduce) { .oa-s-now i { animation: none; } }

.oa-badge.oa-badge-irreversible { background: var(--color-danger-subtle); color: var(--color-danger-text); border: none; }
.oa-clock { color: var(--text-muted); font-size: var(--font-size-sm); font-weight: 700; }
.oa-clock.oa-clock-hot { color: var(--color-danger-text); background: var(--color-danger-subtle); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); }
.oa-s-start::after { content: "START"; position: absolute; top: calc(0px - var(--space-6)); left: 0; font-size: var(--font-size-xs); font-weight: 800; color: var(--text-muted); }

/* 承認待ち: Web判定が許可されたカードの操作 */
.oa-reject-label { display: flex; flex-direction: column; gap: var(--space-2); color: var(--color-danger-text); font-weight: 700; }
.oa-reason { min-height: 84px; resize: vertical; border-color: var(--color-danger); }
.oa-decision-row { display: flex; gap: var(--space-2); }
.oa-act .btn { white-space: normal; }

/* 承認待ち: 承認依頼ごとのURL（/approvals?item=…）で1件だけ表示しているとき */
.oa-focus-bar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin: 0 var(--space-5) var(--space-3); padding: var(--space-2) var(--space-4); border-radius: var(--radius-lg); background: var(--color-info-subtle); color: var(--color-info); font-weight: 700; }
.oa-focus-bar a { color: var(--color-primary); font-weight: 700; }
.oa-missing { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4) var(--space-5); border: 1px dashed var(--border-default); border-radius: var(--radius-xl); background: var(--bg-surface); max-width: 720px; }
.oa-missing p { margin: 0; }
.oa-item-link { font-size: var(--font-size-sm); color: var(--text-tertiary); text-align: center; }

/* ===== 発注書の台帳（版付き保存・取消・送信結果の解除・数量の単位）第1弾B 段2 ===== */
.alert-success {
  border-color: var(--color-success);
  background: var(--color-success-bg);
  color: var(--color-success-text);
}
.badge-neutral { background: var(--bg-subtle); color: var(--text-tertiary); }
.po-lg-banner { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.po-lg-banner-text { flex: 1; }
.po-lg-banner-title { font-weight: var(--font-weight-bold); }
.po-lg-unit { display: inline-block; min-width: 3em; margin-left: var(--space-1); font-size: var(--font-size-xs); color: var(--text-tertiary); text-align: left; cursor: help; }
.po-lg-unit-pack { color: var(--color-primary); font-weight: var(--font-weight-semibold); }
.po-lg-unit-chip { margin-left: var(--space-1); }
.po-lg-row-unit-change > td { background: var(--color-warning-bg); }
.po-lg-list-badges { display: inline-flex; gap: var(--space-1); margin-left: var(--space-2); vertical-align: middle; }
.po-lg-badge-btn { cursor: pointer; border: none; }
.po-lg-op-cell { text-align: center; white-space: nowrap; }
.po-lg-op-menu {
  position: fixed;
  z-index: var(--z-dropdown);
  min-width: 240px;
  max-width: 300px;
  padding: var(--space-1) 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.po-lg-op-item {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: none;
  border: none;
  text-align: left;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  cursor: pointer;
}
.po-lg-op-item:hover:not(:disabled) { background: var(--bg-hover); }
.po-lg-op-item:disabled { color: var(--text-muted); cursor: not-allowed; }
.po-lg-op-reason { display: block; margin-top: 2px; font-size: var(--font-size-xs); color: var(--text-muted); white-space: normal; }
.po-lg-modal-title { margin: 0; font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); }
.po-lg-modal-wide { max-width: 720px; }
.po-lg-field { display: block; margin-top: var(--space-3); }
.po-lg-field-label { display: block; margin-bottom: var(--space-1); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--text-secondary); }
.po-lg-field .input, .po-lg-field .textarea { width: 100%; box-sizing: border-box; }
.po-lg-field-error { margin-top: var(--space-1); font-size: var(--font-size-xs); color: var(--color-danger-text); }
.po-lg-steps { margin-top: var(--space-3); }
.po-lg-steps ol { margin: var(--space-2) 0 0; padding-left: var(--space-5); }
.po-lg-note { margin-top: var(--space-2); font-size: var(--font-size-sm); color: var(--text-tertiary); }
.po-lg-lead { margin: 0 0 var(--space-2); font-size: var(--font-size-md); color: var(--text-secondary); }
.po-lg-mt { margin-top: var(--space-3); }
.po-lg-details { margin-top: var(--space-3); font-size: var(--font-size-sm); color: var(--text-tertiary); }
.po-lg-details summary { cursor: pointer; }
.po-lg-details dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-3); margin: var(--space-2) 0 0; }
.po-lg-details dt { color: var(--text-tertiary); }
.po-lg-details dd { margin: 0; color: var(--text-secondary); word-break: break-all; }
.po-lg-units-figure { display: flex; gap: var(--space-4); align-items: flex-start; margin: var(--space-1) 0 var(--space-3); padding: var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-md); }
.po-lg-units-col { flex: 1; text-align: center; }
.po-lg-units-col-text { font-size: var(--font-size-sm); text-align: left; color: var(--text-secondary); }
.po-lg-svg-item { fill: var(--color-primary-subtle); stroke: var(--color-primary); stroke-width: 2; }
.po-lg-svg-bag { fill: var(--color-primary-bg); stroke: var(--color-primary-active); stroke-width: 2; stroke-dasharray: 5 3; }
.po-lg-svg-text { fill: var(--text-secondary); font-size: 12px; }
.po-lg-table-center th, .po-lg-table-center td { text-align: center; }
.po-lg-sheet-radio { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--font-size-sm); }
.po-lg-followup-section { padding: var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-md); margin-top: var(--space-3); }
.po-lg-followup-section h4 { margin: 0 0 var(--space-2); font-size: var(--font-size-md); }
.po-lg-done { color: var(--color-success-text); font-weight: var(--font-weight-semibold); }

.admin-connections-col-staff { width: 15%; }
.admin-connections-staff-picker { min-width: 100px; font-size: var(--font-size-base); }
.admin-connections-staff-picker summary { cursor: pointer; }
.admin-connections-staff-option {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-2);
  color: var(--text-secondary);
}
.admin-connections-ledger-targets {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-2);
  font-size: var(--font-size-base);
}

/* 顧客対応 › 欠品保留のご案内（modules/oos-hold-consultation.js） */
.ohc-lead {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}
.ohc-list-table col:nth-child(1) { width: 10%; }
.ohc-list-table col:nth-child(2) { width: 16%; }
.ohc-list-table col:nth-child(3) { width: 11%; }
.ohc-list-table col:nth-child(4) { width: 28%; }
.ohc-list-table col:nth-child(5) { width: 11%; }
.ohc-list-table col:nth-child(6) { width: 13%; }
.ohc-list-table col:nth-child(7) { width: 11%; }
.ohc-items-cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ohc-order-cell { overflow-wrap: anywhere; }
.ohc-summary {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-1) var(--space-3);
  margin: 0;
  font-size: var(--font-size-sm);
}
.ohc-summary dt {
  color: var(--text-secondary);
  font-weight: var(--font-weight-semibold);
}
.ohc-summary dd {
  margin: 0;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
.ohc-route-text {
  margin: 0 0 var(--space-2);
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
}
.ohc-route-sub {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}
.ohc-thread-select-label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}
.ohc-alt-list {
  margin: 0;
  padding-left: var(--space-5);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
}
.ohc-draft-input {
  width: 100%;
  font-family: var(--font-family);
  line-height: var(--line-height-relaxed);
}
.ohc-modal-footer { gap: var(--space-2); }

/* Order column menus */
.ocm-heading { display: inline-flex; align-items: center; gap: var(--space-1); border: none; background: transparent; color: inherit; font: inherit; cursor: pointer; padding: var(--space-1); white-space: nowrap; }
.ocm-heading:hover, .ocm-heading[aria-expanded="true"] { color: var(--color-primary); background: var(--color-primary-bg); }
.ocm-heading:focus-visible, .ocm-menu button:focus-visible { outline: var(--space-1) solid var(--border-focus); outline-offset: var(--space-1); }
.ocm-indicator { color: var(--text-muted); font-size: var(--font-size-xs); }
.ocm-dot { color: var(--color-primary); font-size: var(--font-size-xs); }
.ocm-chips { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; min-height: var(--space-6); margin-bottom: var(--space-2); font-size: var(--font-size-base); color: var(--text-tertiary); }
.ocm-chip { display: inline-flex; align-items: center; gap: var(--space-1); background: var(--color-primary-bg); color: var(--color-primary-hover); border: 1px solid var(--color-primary-subtle); border-radius: var(--radius-full); padding: var(--space-1) var(--space-2); }
.ocm-remove, .ocm-link { border: none; background: transparent; color: var(--color-primary); cursor: pointer; font-size: var(--font-size-base); }
.ocm-remove:hover { background: var(--color-primary-subtle); }
.ocm-sort-summary { margin-left: auto; }
.ocm-menu { position: fixed; z-index: var(--z-column-menu); background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); width: calc(var(--space-8) * 9); max-height: calc(100vh - var(--space-4)); overflow-y: auto; padding: var(--space-2); font-size: var(--font-size-base); }
.ocm-section { border-bottom: 1px solid var(--border-default); padding: var(--space-1) 0 var(--space-2); margin-bottom: var(--space-1); }
.ocm-section:last-child { border: none; margin: 0; }
.ocm-title { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--text-tertiary); margin: var(--space-1); }
.ocm-action { display: flex; align-items: center; width: 100%; text-align: left; border: none; background: transparent; padding: var(--space-2); border-radius: var(--radius-sm); cursor: pointer; font-size: var(--font-size-base); color: var(--text-primary); }
.ocm-action:hover, .ocm-selected { background: var(--color-primary-bg); color: var(--color-primary-hover); }
.ocm-values { max-height: calc(var(--space-8) * 6); overflow: auto; border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-1); background: var(--bg-muted); margin-top: var(--space-2); }
.ocm-value { display: flex; align-items: center; gap: var(--space-1); padding: var(--space-1); cursor: pointer; color: var(--text-secondary); overflow-wrap: anywhere; }
.ocm-count { margin-left: auto; color: var(--text-tertiary); font-size: var(--font-size-sm); }
.ocm-row { display: flex; gap: var(--space-1); align-items: center; margin-top: var(--space-1); }
.ocm-menu .input { width: 100%; min-width: 0; box-sizing: border-box; }
.ocm-footer { display: flex; justify-content: space-between; align-items: center; margin-top: var(--space-2); gap: var(--space-1); }
.ocm-note { font-size: var(--font-size-sm); color: var(--text-tertiary); margin: var(--space-1); line-height: var(--line-height-normal); }
.ocm-error { color: var(--color-danger-text); font-size: var(--font-size-sm); }
.ocm-quick { display: flex; gap: var(--space-1); flex-wrap: wrap; margin-top: var(--space-2); }
.ocm-quick-button { border: 1px solid var(--border-default); background: var(--bg-surface); border-radius: var(--radius-full); padding: var(--space-1) var(--space-2); font-size: var(--font-size-sm); cursor: pointer; }
.ocm-quick-button:hover { border-color: var(--color-primary); color: var(--color-primary); }
.ocm-order-link { border: none; background: transparent; font: inherit; padding: 0; }
.ocm-followup { white-space: nowrap; line-height: var(--line-height-relaxed); }
.boss-order-table .ocm-money { text-align: right; }
.boss-order-table .ocm-timestamp { font-size: var(--font-size-xs); color: var(--text-tertiary); }
.boss-order-table .ocm-empty { padding: var(--space-3); color: var(--text-tertiary); text-align: center; }
.ocm-phase { background: var(--color-warning-subtle); color: var(--color-warning-text); }
.ocm-phase-active { background: var(--color-warning); color: var(--text-inverse); }

.ocm-detail-summary {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-1, 4px) var(--space-4, 16px);
}

.cs-hub-review-recovery-card { padding: var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-md); }
.cs-hub-review-recovery-badge { white-space: nowrap; }

/* 承認対象の原文は折りたたみ内で保持し、長い節もカード幅に収める。 */
.oa-detail { margin: var(--space-3) 0; border: 1px solid var(--border-default); border-radius: var(--radius-md); color: var(--text-primary); }
.oa-detail summary { padding: var(--space-2); cursor: pointer; font-size: var(--font-size-sm); }
.oa-detail-body { white-space: pre-wrap; overflow-wrap: anywhere; max-height: calc(var(--space-8) * 12); overflow: auto; padding: var(--space-3); margin: 0; font-size: var(--font-size-sm); background: var(--bg-surface); color: var(--text-secondary); }

/* Yahooトップページ: 原文の差分と公式バナーをパネル内で確認する。 */
#workYahooStoretopPanel pre { white-space: pre-wrap; overflow-wrap: anywhere; }
#workYahooStoretopPanel img { max-width: 100%; height: auto; }
#workYahooStoretopPanel .card { margin-block: var(--space-3); }
#workYahooStoretopPanel p { overflow-wrap: anywhere; }

/* 顧客対応「対応中」: 一覧の札・行の左端の線・サイドナビの丸（未対応の赤の右に並ぶ） */
.badge.badge-progress { background: var(--color-progress-subtle); color: var(--color-progress-text); }
.sidebar-item-badge.badge-progress { background: var(--color-progress); color: var(--text-inverse); border-color: var(--color-progress); }
.cs-hub-thread-row.is-in-progress::before { background: var(--color-progress); }

/* クーポン発行 */
.cpi-shell { padding:var(--space-6); max-width:1480px; margin:auto; color:var(--text-primary); }
.cpi h1 { font-size:var(--font-size-3xl); margin:0; }
.cpi h2 { font-size:var(--font-size-2xl); margin:0 0 var(--space-3); }
.cpi h3 { font-size:var(--font-size-xl); margin:0; }
.cpi p { color:var(--text-tertiary); line-height:var(--line-height-relaxed); }
.cpi-titlebar,.cpi-mall,.cpi-status,.cpi-status-actions,.cpi-sec-head,.cpi-proposal-footer { display:flex; align-items:center; gap:var(--space-3); }
.cpi-titlebar,.cpi-sec-head,.cpi-proposal-footer { justify-content:space-between; }
.cpi-titlebar { margin-bottom:var(--space-5); }
.cpi-mall [aria-pressed=true] { color:var(--color-primary); background:var(--color-primary-bg); border-color:var(--color-primary); }
.cpi-status-actions { margin-left:auto; flex-shrink:0; }
.cpi-lamp { width:12px; height:12px; flex-shrink:0; border-radius:var(--radius-full); background:var(--text-muted); }
.cpi-lamp-on { background:var(--color-success); }
.cpi-midnight-warning { margin:0; padding:var(--space-2) var(--space-3); font-size:var(--font-size-sm); color:var(--color-warning-text); background:var(--color-warning-bg); border-radius:var(--radius-md); }
.cpi-section,.cpi-cols,.cpi-settings-layout { margin-top:var(--space-5); }
.cpi-policy-guide { margin-top:var(--space-5); background:var(--color-primary-bg); }
.cpi-policy-guide p { margin:0 0 var(--space-3); color:var(--text-primary); }
.cpi-proposal { position:relative; margin-top:var(--space-4); }
.cpi-sec-head { margin-bottom:var(--space-4); }
.cpi-proposal-footer { border-top:1px solid var(--border-default); padding-top:var(--space-3); }
.cpi-proposal-footer p { max-width:65%; }
.cpi-cols { display:grid; grid-template-columns:1fr 1.6fr; gap:var(--space-5); }
.cpi-meter { display:grid; grid-template-columns:1fr auto; gap:var(--space-2); margin-top:var(--space-5); }
.cpi-meter progress { width:100%; grid-column:1/-1; accent-color:var(--color-primary); }
.cpi-meter p { grid-column:1/-1; }
.cpi-results { list-style:none; padding:0; }
.cpi-results li { display:flex; align-items:flex-start; gap:var(--space-3); padding:var(--space-4) 0; border-bottom:1px solid var(--border-default); flex-wrap:wrap; }
.cpi-results li>div { flex:1; min-width:180px; }
.cpi-stamp { position:absolute; right:var(--space-8); top:var(--space-4); border:3px solid var(--color-danger); color:var(--color-danger); border-radius:var(--radius-lg); padding:var(--space-3); font-size:var(--font-size-3xl); transform:rotate(-10deg); background:var(--bg-surface); animation:cpi-stamp-in .25s ease; }
.cpi-settings-layout { display:grid; grid-template-columns:210px 1fr; gap:var(--space-5); }
.cpi-toc { display:flex; flex-direction:column; gap:var(--space-4); padding:var(--space-4); }
.cpi-setting { margin-bottom:var(--space-4); }
.cpi-cap { display:grid; grid-template-columns:240px 1fr; gap:var(--space-4); align-items:center; padding:var(--space-4) 0; border-bottom:1px solid var(--border-default); }
.cpi-cap .input { width:130px; }
.cpi-savebar { position:sticky; bottom:0; display:flex; gap:var(--space-3); align-items:center; flex-wrap:wrap; padding:var(--space-4); background:var(--bg-surface); border:1px solid var(--border-default); box-shadow:var(--shadow-md); }
.cpi .cpi-error { color:var(--color-danger-text); }
.cpi-notice { color:var(--color-info); }
@keyframes cpi-stamp-in { from {opacity:0; transform:rotate(-10deg) scale(1.5);} to {opacity:1; transform:rotate(-10deg) scale(1);} }
@media(max-width:900px) { .cpi-cols,.cpi-settings-layout,.cpi-cap { grid-template-columns:1fr; } .cpi-status,.cpi-proposal-footer,.cpi-titlebar { flex-wrap:wrap; } }
@media(prefers-reduced-motion:reduce) { .cpi-stamp { animation:none; } }

/* Coupon hub: full Rakuten disclosure and explicit interrupted-batch recovery. */
.cpi-rakuten-table { min-width: 1050px; }
.cpi-rakuten-table td { vertical-align: top; overflow-wrap: anywhere; }
.cpi-rakuten-table td:nth-child(3) { max-width: 260px; }
.cpi-stalled, .cpi-issued { margin-top: var(--space-4, 16px); }
.cpi-stalled button + button { margin-left: var(--space-2, 8px); }

/* v3一覧だけに適用し、従来の単体・v2カードを保つ。 */
.cs-hub-action-proposal[data-bundle-version="3"] > [data-bundle-ordinal] {
  border-top: 1px solid var(--border-default);
  padding-top: var(--space-2);
  margin-top: var(--space-2);
  overflow-wrap: anywhere;
}
/* 心当たりのない返送品の確認カード */
.cs-hub-unidentified-body { color: var(--text-primary); font-size: var(--font-size-base); }
.cs-hub-unidentified-steps { display: flex; margin: var(--space-2) 0 var(--space-3); overflow: hidden; border-radius: var(--radius-lg); }
.cs-hub-unidentified-step { flex: 1; padding: var(--space-2); background: var(--bg-subtle); color: var(--text-tertiary); text-align: center; font-size: var(--font-size-sm); }
.cs-hub-unidentified-step-current { background: var(--color-primary); color: var(--text-inverse); font-weight: var(--font-weight-bold); }
.cs-hub-unidentified-section { padding: var(--space-3) 0; border-top: 1px solid var(--border-default); }
.cs-hub-unidentified-heading { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); font-size: var(--font-size-md); }
.cs-hub-unidentified-number { display: inline-grid; place-items: center; width: 20px; height: 20px; flex-shrink: 0; border-radius: var(--radius-full); background: var(--color-primary); color: var(--text-inverse); font-size: var(--font-size-sm); }
.cs-hub-unidentified-comparison { width: 100%; border-collapse: collapse; font-size: var(--font-size-base); }
.cs-hub-unidentified-comparison th, .cs-hub-unidentified-comparison td { padding: var(--space-2); border-bottom: 1px solid var(--border-default); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.cs-hub-unidentified-comparison th { color: var(--text-tertiary); font-weight: var(--font-weight-medium); }
.cs-hub-unidentified-comparison thead th { background: var(--bg-muted); color: var(--text-secondary); font-weight: var(--font-weight-semibold); }
.cs-hub-unidentified-match { color: var(--color-success-text); font-weight: var(--font-weight-bold); white-space: nowrap; }
.cs-hub-unidentified-muted, .cs-hub-unidentified-help { color: var(--text-tertiary); font-size: var(--font-size-sm); }
.cs-hub-unidentified-help { margin-top: var(--space-2); }
.cs-hub-unidentified-verdict, .cs-hub-unidentified-notice, .cs-hub-unidentified-alert { margin-top: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-xl); }
.cs-hub-unidentified-verdict { color: var(--color-success-text); background: var(--color-success-bg); }
.cs-hub-unidentified-notice { color: var(--color-warning-text); background: var(--color-warning-bg); }
.cs-hub-unidentified-alert { color: var(--color-danger-text); background: var(--color-danger-bg); font-weight: var(--font-weight-semibold); }
.cs-hub-unidentified-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.cs-hub-unidentified-box { padding: var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-xl); }
.cs-hub-unidentified-box-warning { border-color: var(--color-danger); background: var(--color-danger-bg); }
.cs-hub-unidentified-value { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); }
.cs-hub-unidentified-photos { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.cs-hub-unidentified-photo-slot { max-width: 100%; }
.cs-hub-unidentified-photo { width: 120px; height: 90px; object-fit: cover; border-radius: var(--radius-lg); border: 1px solid var(--border-default); cursor: zoom-in; }
.cs-hub-unidentified-photo-expanded { width: auto; height: auto; max-width: 100%; cursor: zoom-out; }
.cs-hub-unidentified-choice { display: block; padding: var(--space-3); border: 2px solid var(--border-default); border-radius: var(--radius-xl); cursor: pointer; }
.cs-hub-unidentified-choice:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-bg); }
.cs-hub-unidentified-choice input { margin-right: var(--space-2); }
.cs-hub-unidentified-choice-title { font-size: var(--font-size-md); font-weight: var(--font-weight-bold); }
.cs-hub-unidentified-details { margin-top: var(--space-2); }
.cs-hub-unidentified-details summary { cursor: pointer; color: var(--color-primary); font-size: var(--font-size-base); }
.cs-hub-unidentified-preview, .cs-hub-unidentified-record { white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit; background: var(--bg-muted); padding: var(--space-3); border-radius: var(--radius-xl); margin: var(--space-2) 0 0; }
.cs-hub-unidentified-preview { border: 1px solid var(--border-default); }
.cs-hub-unidentified-record { color: var(--text-tertiary); font-size: var(--font-size-sm); }
.cs-hub-unidentified-records { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-2); color: var(--text-tertiary); font-size: var(--font-size-sm); }
.cs-hub-unidentified-records dd { margin: 0; }
.cs-hub-unidentified-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-3); background: var(--bg-muted); border-top: 1px solid var(--border-default); }
@media (max-width: 600px) {
  .cs-hub-unidentified-columns { grid-template-columns: 1fr; }
  .cs-hub-unidentified-footer { flex-wrap: wrap; }
}
.cs-hub-unidentified-card { padding: 0; gap: 0; border: 1px solid var(--border-default); border-radius: var(--radius-xl); overflow: hidden; }
.cs-hub-unidentified-card .cs-hub-draft-header { padding: var(--space-3) var(--space-4); }
.cs-hub-unidentified-card .cs-hub-draft-title { color: var(--text-primary); font-size: var(--font-size-xl); }
.cs-hub-unidentified-card .cs-hub-unidentified-steps { margin: 0 var(--space-4) var(--space-3); }
.cs-hub-unidentified-card .cs-hub-unidentified-section { padding: var(--space-3) var(--space-4); }
.cs-hub-unidentified-reject { color: var(--color-danger-text); border-color: var(--color-danger-subtle); background: var(--bg-surface); }

.cs-hub-unidentified-legacy-photo { max-width: 100%; }

/* Cc badge editor (reply / new composer)
   見た目は宛先・差出人の .input-sm と同じ1行（高さ24px・12px文字）。確定したアドレスだけ控えめな札にする。 */
.gmail-cc-chips {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px var(--space-1);
  min-width: 0;
  min-height: 24px;
  padding: 1px 8px;
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  background: var(--bg-input);
  font-size: var(--font-size-base);
  cursor: text;
}
.gmail-cc-chips:focus-within { border-color: var(--color-primary); box-shadow: var(--shadow-focus); }
.gmail-cc-chips-input {
  flex: 1 1 20ch;
  min-width: 12ch;
  width: 100%;
  height: 20px;
  border: 0;
  outline: 0;
  padding: 0;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: var(--font-size-base);
}
.gmail-cc-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  height: 18px;
  padding: 0 0 0 6px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
  color: var(--text-primary);
  font-size: var(--font-size-base);
  line-height: 1;
}
.gmail-cc-chip-avatar { display: none; }
.gmail-cc-chip-edit, .gmail-cc-chip-remove {
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 16px;
  cursor: pointer;
}
.gmail-cc-chip-edit { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gmail-cc-chip-remove { flex-shrink: 0; width: 16px; margin-left: 2px; color: var(--text-tertiary); border-radius: var(--radius-sm); }
.gmail-cc-chip-remove:hover { background: var(--bg-active); color: var(--text-primary); }
.gmail-cc-chip button:focus-visible { outline: 2px solid var(--color-primary); }
.gmail-cc-chip.is-selected { background: var(--color-primary-subtle); border-color: var(--color-primary); }
.gmail-cc-chip.is-added { background: var(--color-success-bg); border-color: var(--color-success); }
.gmail-cc-chip.is-invalid { background: var(--color-danger-bg); border-color: var(--color-danger); color: var(--color-danger-text); }
.gmail-compose-hint.is-error { color: var(--color-danger-text); }
.gmail-cc-chips.is-disabled { background: var(--bg-muted); opacity: .65; cursor: not-allowed; }
.gmail-cc-chips.is-disabled button, .gmail-cc-chips.is-disabled input { cursor: not-allowed; }
.gmail-cc-chip.is-new { animation: gmail-cc-pop .18s ease-out; }
.gmail-cc-chip.is-flash { animation: gmail-cc-flash .9s ease-out; }
@keyframes gmail-cc-pop { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes gmail-cc-flash { 0%, 40% { background: var(--color-warning-subtle); } }
@media (prefers-reduced-motion: reduce) {
  .gmail-cc-chip.is-new, .gmail-cc-chip.is-flash { animation: none; }
}
/* Coupon issue hub: issued coupons and safe mutation forms. */
.cpi-dialog { width: min(900px, 90vw); max-height: 90vh; padding: var(--space-6); border: 1px solid var(--border-default); border-radius: var(--radius-lg); color: var(--text-primary); background: var(--bg-surface); }
.cpi-dialog::backdrop { background: rgba(0,0,0,.4); }
.cpi-dialog-body, .cpi-edit-form { display: grid; gap: var(--space-4); }
.cpi-edit-form label { display: grid; gap: var(--space-2); }
.cpi-issued-search { display: flex; align-items: end; gap: var(--space-3); margin-bottom: var(--space-4); }
.cpi-issued td { vertical-align: top; }
.cpi-issued td:last-child { white-space: normal; overflow: visible; text-overflow: clip; max-width: none; min-width: 220px; }
.cpi-issued td:last-child .btn { margin: 2px 4px 2px 0; }
.cpi-issued code { user-select: all; }

/* Amazon商品編集（作業 › Amazon商品編集）: タブ「一覧／承認待ち／事前チェックエラー」・1行＝1商品（判断記録 #2389） */
.ale-root { padding: 0; overflow: auto; background: var(--bg-body); }
.ale-switch { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-2) var(--space-6); background: var(--bg-surface); border-bottom: 1px solid var(--border-default); font-size: var(--font-size-base); }
.ale-switch-label { font-weight: var(--font-weight-semibold); }
.ale-tabs { display: flex; gap: 2px; padding: 0 var(--space-4); background: var(--bg-surface); border-bottom: 1px solid var(--border-default); overflow-x: auto; }
.ale-tab { padding: 10px 16px; border: none; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--text-tertiary); font-size: var(--font-size-md); white-space: nowrap; }
.ale-tab:hover { color: var(--text-primary); background: none; }
.ale-tab.is-active { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: var(--font-weight-semibold); }
.ale-tab-count { display: inline-block; margin-left: var(--space-1); padding: 0 6px; border-radius: var(--radius-full); background: var(--color-primary-subtle); color: var(--color-primary); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); }
.ale-tab-count.is-ng { background: var(--color-danger-subtle); color: var(--color-danger-text); }
.ale-page { padding: var(--space-5) var(--space-6); max-width: 1560px; margin: 0 auto; }
.ale-h1 { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-1); font-size: var(--font-size-3xl); }
.ale-xs { font-size: var(--font-size-sm); color: var(--text-tertiary); overflow-wrap: anywhere; }
.ale-t1 { font-weight: var(--font-weight-semibold); }
.ale-excl-note { margin-top: 2px; }
.ale-notice { margin: 0 0 var(--space-3); padding: 8px 12px; border-left: 3px solid var(--color-success); border-radius: var(--radius-md); background: var(--color-success-bg); color: var(--color-success-text); }
.ale-error { margin: 0 0 var(--space-3); padding: 8px 12px; border-left: 3px solid var(--color-danger); border-radius: var(--radius-md); background: var(--color-danger-bg); color: var(--color-danger-text); overflow-wrap: anywhere; }
.ale-warning { margin: 0 0 var(--space-3); padding: 8px 12px; border-left: 3px solid var(--color-warning); border-radius: var(--radius-md); background: var(--color-warning-bg); color: var(--color-warning-text); }
.ale-switch .ale-error { margin: 0; padding: 2px 8px; }
.ale-table-wrap { margin-top: var(--space-4); padding: 0; overflow-x: auto; }
.ale-tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--font-size-md); }
.ale-tbl th { position: sticky; top: 0; z-index: 3; padding: 8px 12px; text-align: left; white-space: nowrap; font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--text-tertiary); background: var(--bg-muted); border-bottom: 1px solid var(--border-default); }
.ale-tbl td { padding: 10px 12px; vertical-align: middle; background: var(--bg-surface); border-bottom: 1px solid var(--border-light); }
.ale-tbl th[data-w="no"] { width: 60px; } .ale-tbl th[data-w="tgt"] { width: 200px; } .ale-tbl th[data-w="chk"] { width: 130px; } .ale-tbl th[data-w="status"] { width: 430px; }
.ale-tbl th[data-w="made"] { width: 130px; } .ale-tbl th[data-w="ops"] { width: 200px; } .ale-tbl th[data-w="prod"] { width: 250px; } .ale-tbl th[data-w="what"] { width: 170px; }
.ale-tbl th[data-w="plan"] { width: 150px; } .ale-tbl th[data-w="change"] { width: 520px; } .ale-tbl th.ale-cb, .ale-tbl td.ale-cb { width: 40px; text-align: center; padding-left: 8px; padding-right: 4px; }
.ale-tbl input[type="checkbox"] { width: 15px; height: 15px; cursor: pointer; accent-color: var(--color-primary); vertical-align: middle; }
.ale-tbl tr.is-sel td { background: var(--color-primary-bg); }
.ale-tbl tr.is-approved td { background: var(--color-success-bg); }
.ale-tbl tr.is-skipped td, .ale-tbl tr.is-excluded td { background: var(--bg-muted); }
.ale-tbl tr.is-skipped .ale-dim, .ale-tbl tr.is-excluded .ale-dim { opacity: .45; }
.ale-empty td { padding: var(--space-6); text-align: center; color: var(--text-muted); }
.ale-tgt { display: flex; align-items: center; gap: var(--space-2); line-height: 1.3; }
.ale-mini { flex: none; width: 36px; height: 36px; object-fit: contain; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--bg-surface); }
.ale-stepper { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }
.ale-st { display: flex; align-items: center; gap: var(--space-1); white-space: nowrap; font-size: var(--font-size-sm); color: var(--text-muted); }
.ale-st.is-done { color: var(--color-success-text); }
.ale-st.is-now { color: var(--color-warning-text); font-weight: var(--font-weight-bold); }
.ale-st.is-ng { color: var(--color-danger-text); font-weight: var(--font-weight-bold); }
.ale-ar { color: var(--border-medium); font-size: var(--font-size-sm); }
.ale-sd { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-right: 3px; border: 1.5px solid var(--border-medium); border-radius: 50%; background: var(--bg-surface); color: var(--text-inverse); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); vertical-align: -3px; }
.ale-sd.is-done { background: var(--color-success); border-color: var(--color-success); }
.ale-sd.is-now { border: 2px solid var(--color-warning); box-shadow: 0 0 0 3px var(--color-warning-subtle); }
.ale-sd.is-ng { background: var(--color-danger); border-color: var(--color-danger); }
.ale-step-note { margin-top: var(--space-1); font-size: var(--font-size-sm); color: var(--color-warning-text); }
.ale-step-note.is-ng { color: var(--color-danger-text); }
.ale-step-note.is-done { color: var(--color-success-text); }
.ale-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-3); font-size: var(--font-size-base); color: var(--text-tertiary); }
.ale-key::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: var(--space-1); border-radius: var(--radius-sm); vertical-align: -2px; }
.ale-key-rm::before { border: 2.5px solid var(--color-danger); }
.ale-key-gone::before { border: 2px dashed var(--color-danger); background: var(--color-danger-bg); }
.ale-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: var(--space-4) 0 var(--space-2); }
.ale-spacer { flex: 1; }
.ale-q { width: 220px; padding: 5px 10px; border: 1px solid var(--border-medium); border-radius: var(--radius-md); background: var(--bg-surface); color: var(--text-primary); font-size: var(--font-size-base); font-family: inherit; }
.ale-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ale-chip { padding: 3px 10px; border: 1px solid var(--border-medium); border-radius: var(--radius-full); background: var(--bg-surface); color: var(--text-secondary); font-size: var(--font-size-base); max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.ale-chip.is-active { background: var(--color-primary); border-color: var(--color-primary); color: var(--text-inverse); }
.ale-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); background: var(--bg-surface); border: 1px solid var(--border-default); border-bottom: none; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.ale-selall { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--font-weight-semibold); cursor: pointer; user-select: none; }
.ale-cnt { min-width: 90px; font-size: var(--font-size-base); color: var(--text-tertiary); }
.ale-cnt b { color: var(--color-primary); }
.ale-why { font-size: var(--font-size-base); color: var(--color-warning-text); }
.ale-scroll { max-height: calc(100vh - 290px); min-height: 320px; overflow: auto; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.ale-scroll .ale-tbl { min-width: 1400px; table-layout: fixed; }
.ale-prod { display: flex; align-items: center; gap: var(--space-2); min-width: 0; line-height: 1.35; }
.ale-prod-text { min-width: 0; }
.ale-prod-img { flex: none; width: 44px; height: 44px; object-fit: contain; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--bg-surface); }
.ale-sn { font-weight: var(--font-weight-semibold); }
.ale-pt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--font-size-sm); color: var(--text-tertiary); }
.ale-edit-what { font-weight: var(--font-weight-semibold); line-height: 1.4; margin-bottom: var(--space-1); }
.ale-strips { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.ale-strip { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ale-strip.is-faded .ale-ims { opacity: .5; }
.ale-lab { flex: none; width: 58px; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); line-height: 1.2; color: var(--text-tertiary); }
.ale-ims { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.ale-cell { position: relative; flex: none; width: 48px; height: 48px; overflow: hidden; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--bg-surface); }
.ale-cell img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ale-cell.is-rm { overflow: visible; border: 2.5px solid var(--color-danger); }
.ale-cell.is-rm::after { content: "×"; position: absolute; top: -6px; right: -6px; display: flex; align-items: center; justify-content: center; width: 15px; height: 15px; border: 1.5px solid var(--bg-surface); border-radius: 50%; background: var(--color-danger); color: var(--text-inverse); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); }
.ale-cell.is-gone { display: flex; align-items: center; justify-content: center; border: 2px dashed var(--color-danger); background: var(--color-danger-bg); color: var(--color-danger-text); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); text-align: center; line-height: 1.2; }
.ale-img-fallback { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 2px; background: var(--bg-subtle); color: var(--text-muted); font-size: var(--font-size-xs); text-align: center; }
.ale-img-fallback.ale-prod-img { flex: none; width: 44px; height: 44px; }
.ale-img-fallback.ale-mini { flex: none; width: 36px; height: 36px; }
.ale-ops { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ale-state-line { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.ale-lock-note { font-size: var(--font-size-sm); color: var(--color-warning-text); }
.ale-badge-progress { background: var(--color-progress-subtle); color: var(--color-progress-text); }
.ale-btn-danger-outline { background: var(--bg-surface); color: var(--color-danger-text); border: 1px solid var(--color-danger); }
.ale-btn-danger-outline:hover { background: var(--color-danger-bg); }
.ale-plan { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.ale-why-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; line-height: 1.45; }
.ale-sev { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: var(--radius-full); background: var(--color-danger); color: var(--text-inverse); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); white-space: nowrap; }
.ale-why-text { font-weight: var(--font-weight-semibold); color: var(--color-danger-text); }
.ale-tag-err { display: inline-flex; align-items: center; padding: 1px 7px; border: 1px solid var(--color-danger); border-radius: var(--radius-sm); background: var(--color-danger-bg); color: var(--color-danger-text); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); white-space: nowrap; }
.ale-warn-dot { display: inline-flex; align-items: center; padding: 0 6px; border: 1px solid var(--color-warning); border-radius: var(--radius-full); background: var(--color-warning-bg); color: var(--color-warning-text); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); cursor: help; }
.ale-raw { margin-top: 6px; font-size: var(--font-size-base); }
.ale-raw summary { cursor: pointer; color: var(--text-tertiary); user-select: none; }
.ale-iss { max-width: 520px; margin-top: 6px; padding: 6px 8px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-muted); font-size: var(--font-size-sm); line-height: 1.5; overflow-wrap: anywhere; }
.ale-code { margin-left: var(--space-1); padding: 0 4px; border-radius: var(--radius-sm); background: var(--bg-active); font-family: ui-monospace, Menlo, monospace; }
.ale-diff { white-space: pre-wrap; overflow-wrap: anywhere; padding: var(--space-2); line-height: var(--line-height-relaxed); background: var(--bg-muted); border-radius: var(--radius-md); }
.ale-delete { background: var(--color-danger-subtle); color: var(--color-danger-text); }
.ale-insert { background: var(--color-success-subtle); color: var(--color-success-text); }
@media (max-width: 760px) { .ale-page { padding: var(--space-4); } .ale-switch { padding: var(--space-2) var(--space-4); } .ale-q { width: 100%; } }
.ale-row td { transition: background var(--transition-normal); }
.ale-ops-cell { white-space: normal; }

/* ===== 集計 › Amazon（modules/amazon-analytics-shell.js / amazon-rank-views.js） ===== */
.amz-panel {
  --amz-s1: #2a78d6; --amz-s2: #eb6834; --amz-s3: #1baf7a; --amz-s4: #eda100;
  --amz-s5: #e87ba4; --amz-s6: #008300; --amz-s7: #4a3aa7; --amz-s8: #e34948;
  --amz-heat-1: #2a78d6; --amz-heat-2: #9ec5f4; --amz-heat-3: #cde2fb; --amz-heat-4: #ecebe7;
  --amz-ad-1: #eb6834; --amz-ad-2: #f6b99b; --amz-ad-3: #fbe0d2;
  min-width: 0;
}
.amz-head { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-2); }
.amz-title { margin: 0; font-size: var(--font-size-xl); color: var(--text-primary); }
.amz-crumb { font-size: var(--font-size-xs); color: var(--text-tertiary); }
.amz-bar { flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.amz-bar-label { font-size: var(--font-size-xs); color: var(--text-tertiary); }
.amz-bar-info { font-size: var(--font-size-xs); color: var(--text-tertiary); }
.amz-seg { display: inline-flex; border: 1px solid var(--border-medium); border-radius: var(--radius-md); overflow: hidden; }
.amz-seg-btn {
  border: none; border-right: 1px solid var(--border-medium); background: var(--bg-surface);
  color: var(--text-secondary); font-size: var(--font-size-xs); padding: 3px 10px; cursor: pointer;
}
.amz-seg-btn:last-child { border-right: none; }
.amz-seg-btn:hover { background: var(--bg-hover); }
.amz-seg-btn.active { background: var(--color-primary); color: var(--text-inverse); }
.amz-view { display: flex; flex-direction: column; gap: var(--space-3); }
.amz-tip {
  position: fixed; display: none; z-index: var(--z-tooltip); max-width: 320px;
  background: var(--text-primary); color: var(--text-inverse); font-size: var(--font-size-xs);
  line-height: var(--line-height-normal); padding: 6px 8px; border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); pointer-events: none;
}
.amz-sub { font-size: var(--font-size-xs); color: var(--text-tertiary); margin: 2px 0 var(--space-2); }
.amz-card-title { margin: 0 0 var(--space-1); font-size: var(--font-size-md); color: var(--text-primary); }
.amz-picker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.amz-picker-label { font-size: var(--font-size-xs); color: var(--text-secondary); font-weight: var(--font-weight-semibold); }
.amz-chart { width: 100%; }
.amz-chart-svg { width: 100%; height: auto; display: block; }
.amz-grid { stroke: var(--border-light); }
.amz-baseline { stroke: var(--border-medium); }
.amz-axis { font-size: 11px; fill: var(--text-tertiary); }
.amz-page1-band { fill: var(--color-primary); opacity: 0.05; }
.amz-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.amz-dot { stroke: var(--bg-surface); stroke-width: 2; }
.amz-direct-label { font-size: 11px; font-weight: var(--font-weight-semibold); fill: var(--text-secondary); }
.amz-crosshair { stroke: var(--text-primary); stroke-dasharray: 3 3; opacity: 0; }
.amz-crosshair.on { opacity: 0.5; }
.amz-overlay { fill: transparent; }
.amz-marker { stroke: var(--text-tertiary); stroke-dasharray: 2 4; }
.amz-marker-label { font-size: 10px; fill: var(--text-tertiary); }
.amz-line.amz-s1 { stroke: var(--amz-s1); } .amz-dot.amz-s1, .amz-key.amz-s1 { fill: var(--amz-s1); background: var(--amz-s1); }
.amz-line.amz-s2 { stroke: var(--amz-s2); } .amz-dot.amz-s2, .amz-key.amz-s2 { fill: var(--amz-s2); background: var(--amz-s2); }
.amz-line.amz-s3 { stroke: var(--amz-s3); } .amz-dot.amz-s3, .amz-key.amz-s3 { fill: var(--amz-s3); background: var(--amz-s3); }
.amz-line.amz-s4 { stroke: var(--amz-s4); } .amz-dot.amz-s4, .amz-key.amz-s4 { fill: var(--amz-s4); background: var(--amz-s4); }
.amz-line.amz-s5 { stroke: var(--amz-s5); } .amz-dot.amz-s5, .amz-key.amz-s5 { fill: var(--amz-s5); background: var(--amz-s5); }
.amz-line.amz-s6 { stroke: var(--amz-s6); } .amz-dot.amz-s6, .amz-key.amz-s6 { fill: var(--amz-s6); background: var(--amz-s6); }
.amz-line.amz-s7 { stroke: var(--amz-s7); } .amz-dot.amz-s7, .amz-key.amz-s7 { fill: var(--amz-s7); background: var(--amz-s7); }
.amz-line.amz-s8 { stroke: var(--amz-s8); } .amz-dot.amz-s8, .amz-key.amz-s8 { fill: var(--amz-s8); background: var(--amz-s8); }
.amz-legend { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: var(--font-size-xs); color: var(--text-secondary); margin-top: var(--space-1); }
.amz-legend-item { display: inline-flex; align-items: center; gap: 4px; }
.amz-key { display: inline-block; width: 12px; height: 4px; border-radius: 2px; vertical-align: middle; margin-right: 4px; }
.amz-key.amz-heat-1 { background: var(--amz-heat-1); height: 10px; }
.amz-key.amz-heat-2 { background: var(--amz-heat-2); height: 10px; }
.amz-key.amz-heat-3 { background: var(--amz-heat-3); height: 10px; }
.amz-key.amz-heat-4 { background: var(--amz-heat-4); height: 10px; }
.amz-key.amz-ad-1 { background: var(--amz-ad-1); height: 10px; }
.amz-key.amz-ad-2 { background: var(--amz-ad-2); height: 10px; }
.amz-key.amz-ad-3 { background: var(--amz-ad-3); height: 10px; }
.amz-key.amz-none { background: var(--bg-muted); border: 1px solid var(--border-default); height: 10px; }
.amz-table-scroll { overflow-x: auto; max-height: 520px; overflow-y: auto; }
.amz-table td, .amz-table th { white-space: nowrap; font-size: var(--font-size-xs); }
.amz-table th.amz-c, .amz-table td.amz-c { text-align: center; }
.amz-table th.amz-r, .amz-table td.amz-r { text-align: right; }
.amz-table th.amz-sortable { cursor: pointer; }
.amz-row { cursor: pointer; }
.amz-row:hover td { background: var(--bg-hover); }
.amz-row.selected td { background: var(--color-primary-bg); }
.amz-code { font-weight: var(--font-weight-bold); color: var(--text-primary); }
.amz-muted { color: var(--text-tertiary); font-size: var(--font-size-xs); }
.amz-cell {
  display: inline-block; min-width: 38px; padding: 1px 4px; border-radius: var(--radius-sm);
  text-align: center; font-variant-numeric: tabular-nums; color: var(--text-primary);
}
.amz-cell.amz-h0 { color: var(--text-muted); }
.amz-cell.amz-h1 { background: var(--amz-heat-1); color: var(--text-inverse); }
.amz-cell.amz-h2 { background: var(--amz-heat-2); }
.amz-cell.amz-h3 { background: var(--amz-heat-3); }
.amz-cell.amz-h4 { background: var(--amz-heat-4); }
.amz-cell.amz-a0 { background: var(--bg-muted); color: var(--text-muted); }
.amz-cell.amz-a1 { background: var(--amz-ad-1); color: var(--text-inverse); }
.amz-cell.amz-a2 { background: var(--amz-ad-2); }
.amz-cell.amz-a3 { background: var(--amz-ad-3); }
/* スポンサー枠の帯（SVG・グラフと同じ横の割り付け） */
.amz-band-label { font-size: 11px; fill: var(--text-secondary); }
.amz-bandcell { fill: var(--bg-muted); }
.amz-bandcell.amz-a0 { fill: var(--bg-muted); }
.amz-bandcell.amz-a1 { fill: var(--amz-ad-1); }
.amz-bandcell.amz-a2 { fill: var(--amz-ad-2); }
.amz-bandcell.amz-a3 { fill: var(--amz-ad-3); }
.amz-bandtext { font-size: 10px; fill: var(--text-primary); pointer-events: none; }
.amz-bandtext.amz-a1 { fill: var(--text-inverse); }
.amz-bandtext.amz-a0 { fill: var(--text-muted); }
.amz-up { color: var(--color-success-text); }
.amz-down { color: var(--color-danger-text); }
.amz-flat { color: var(--text-muted); }
.amz-tiles { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.amz-tile { min-width: 150px; }
.amz-tile-k { font-size: var(--font-size-xs); color: var(--text-tertiary); }
.amz-tile-v { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); color: var(--text-primary); }
.amz-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
/* ── Amazon 管理画面（朝の一覧・広告・商品カルテ・レビュー依頼）設計 docs/amazon-admin-screens-DESIGN.md ──
   共通の部品（.amz-head/.amz-title/.amz-sub/.amz-muted/.amz-tiles/.amz-tile*/.amz-legend/.amz-table/.amz-r/.amz-row/.amz-up/.amz-down/.amz-chart）は
   上の「集計 › Amazon」節の定義を使う。ここはこの4画面だけの追加分。 */
.amz-page { color: var(--text-primary); font-size: var(--font-size-base); }
.amz-page.amz-standalone { padding: var(--space-4) var(--space-6) var(--space-8); max-width: 1540px; }
.amz-sp { flex: 1; }
.amz-tile-s { font-size: var(--font-size-xs); color: var(--text-tertiary); }
.amz-grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); }
.amz-alerts { list-style: none; margin: 0; padding: 0; }
.amz-alerts li { font-size: var(--font-size-base); display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-2); border-bottom: 1px solid var(--border-light); cursor: pointer; }
.amz-alerts li:hover { background: var(--bg-hover); }
.amz-alerts li.amz-alert-none { cursor: default; color: var(--color-success-text); }
.amz-alert-ic { flex: 0 0 18px; text-align: center; font-weight: var(--font-weight-bold); }
.amz-alert-ic.warn { color: var(--color-warning-text); }
.amz-alert-ic.info { color: var(--color-info); }
.amz-alert-title { font-weight: var(--font-weight-semibold); font-size: var(--font-size-base); }
.amz-alert-detail { color: var(--text-secondary); font-size: var(--font-size-sm); }
.amz-chart-tip { position: fixed; z-index: var(--z-tooltip); background: var(--text-primary); color: var(--text-inverse); font-size: var(--font-size-xs); padding: var(--space-1) var(--space-2); border-radius: var(--radius-md); pointer-events: none; display: none; max-width: 320px; white-space: nowrap; box-shadow: var(--shadow-md); }
.amz-sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: var(--space-1); vertical-align: middle; }
.amz-sw.ln { height: 3px; }
.amz-sw-blue { background: var(--color-primary); }
.amz-sw-orange { background: var(--color-warning); }
.amz-sw-gray { background: var(--text-muted); }
.amz-sw-cyan { background: var(--color-info); }
.amz-sw-teal { background: var(--color-success); }
.amz-tabs { display: flex; gap: var(--space-1); border-bottom: 2px solid var(--border-default); flex-wrap: wrap; }
.amz-tab { border: none; background: none; padding: var(--space-2) var(--space-3); font-size: var(--font-size-base); color: var(--text-tertiary); cursor: pointer; margin-bottom: -2px; border-bottom: 2px solid transparent; }
.amz-tab.on { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: var(--font-weight-semibold); }
.amz-banner { background: var(--color-info-bg); border-left: 3px solid var(--color-info); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); font-size: var(--font-size-sm); }
.amz-banner.warn { background: var(--color-warning-bg); border-left-color: var(--color-warning); }
.amz-banner.ok { background: var(--color-success-bg); border-left-color: var(--color-success); }
.amz-banner.danger { background: var(--color-danger-bg); border-left-color: var(--color-danger); }
.amz-table td.amz-wrap { white-space: normal; }
.amz-row.sel td { background: var(--color-primary-bg); }
.amz-code-link { font-weight: var(--font-weight-bold); color: var(--color-primary); cursor: pointer; text-decoration: none; }
.amz-code-link:hover { text-decoration: underline; }
.amz-est { font-size: var(--font-size-xs); color: var(--color-warning-text); background: var(--color-warning-subtle); border-radius: var(--radius-full); padding: 0 var(--space-1); margin-left: var(--space-1); }
.amz-adtag { font-size: var(--font-size-xs); background: var(--color-warning-subtle); color: var(--color-warning-text); border-radius: var(--radius-sm); padding: 0 var(--space-1); white-space: nowrap; }
.amz-adtag.off { background: var(--bg-subtle); color: var(--text-muted); }
.amz-placeholder { border: 1px dashed var(--border-medium); border-radius: var(--radius-lg); padding: var(--space-3); color: var(--text-tertiary); font-size: var(--font-size-sm); }
.amz-steps { margin: 0; padding-left: var(--space-5); font-size: var(--font-size-sm); color: var(--text-secondary); }
.amz-steps li { margin-bottom: var(--space-1); }
.amz-steps li.done { color: var(--text-muted); text-decoration: line-through; }
.amz-steps li.now { color: var(--color-primary); font-weight: var(--font-weight-semibold); }
.amz-switch-box { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.amz-switch-state { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); }
.amz-switch-state.on { color: var(--color-success-text); }
.amz-switch-state.off { color: var(--text-secondary); }
.amz-confirm-input { width: 100%; }
.amz-field-label { font-size: var(--font-size-sm); color: var(--text-secondary); margin: var(--space-2) 0 var(--space-1); display: block; }
.amz-stack { display: flex; flex-direction: column; gap: var(--space-3); }
.amz-svg-grid { stroke: var(--border-light); stroke-width: 1; }
.amz-svg-axis { stroke: var(--border-medium); stroke-width: 1; }
.amz-svg-label { fill: var(--text-tertiary); font-size: 11px; }
.amz-svg-band { fill: var(--color-primary); opacity: 0.05; }
.amz-svg-cross { stroke: var(--text-primary); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; }
.amz-svg-series { fill: none; stroke-width: 2; stroke-linejoin: round; }
.amz-svg-dot { stroke: var(--bg-surface); stroke-width: 1.5; }
.amz-c-blue { stroke: var(--color-primary); fill: var(--color-primary); }
.amz-c-orange { stroke: var(--color-warning); fill: var(--color-warning); }
.amz-c-gray { stroke: var(--text-muted); fill: var(--text-muted); }
.amz-c-cyan { stroke: var(--color-info); fill: var(--color-info); }
.amz-c-teal { stroke: var(--color-success); fill: var(--color-success); }
.amz-svg-series.amz-c-blue, .amz-svg-series.amz-c-orange, .amz-svg-series.amz-c-gray, .amz-svg-series.amz-c-cyan, .amz-svg-series.amz-c-teal { fill: none; }
.amz-svg-endlabel { font-size: 11px; font-weight: var(--font-weight-semibold); fill: var(--text-secondary); }
@media (max-width: 1100px) { .amz-grid2 { grid-template-columns: minmax(0, 1fr); } }
.amz-ref { margin-top: var(--space-3); }
.amz-svg-hit { fill: transparent; }

/* ===== 楽天バナー（2026-10-06 作り直し・正本 docs/mockups/rakuten-banner-simple-mock.html） ===== */
.rb2-page {
  height: 100%;
  overflow-y: auto;
  background: var(--bg-body);
  color: var(--text-primary);
  font-size: var(--font-size-lg);
  line-height: 1.5;
}
.rb2-main { max-width: 1180px; margin: 0 auto; padding: var(--space-6) var(--space-5) 60px; }
.rb2-btn { font-size: var(--font-size-lg); padding: 8px 14px; border-radius: var(--radius-xl); }
.rb2-btn.btn-primary, .rb2-btn.btn-danger { font-weight: var(--font-weight-semibold); }
.rb2-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.rb2-header h1 { font-size: var(--font-size-3xl); margin: 0; }
.rb2-alert { display: flex; align-items: center; gap: 14px; border-radius: 12px; padding: 14px 18px; margin-bottom: var(--space-4); font-weight: var(--font-weight-semibold); border: 1px solid; }
.rb2-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.rb2-msg { flex: 1; }
.rb2-alert-approve { background: var(--color-primary-bg); border-color: var(--color-primary-subtle); color: var(--color-primary-active); }
.rb2-alert-approve .rb2-dot { background: var(--color-primary); }
.rb2-alert-hold { background: var(--color-danger-bg); border-color: var(--color-danger-subtle); color: var(--color-danger-text); }
.rb2-alert-hold .rb2-dot { background: var(--color-danger); }
.rb2-alert-login { background: var(--color-warning-bg); border-color: var(--color-warning-subtle); color: var(--color-warning-text); }
.rb2-alert-login .rb2-dot { background: var(--color-warning); }
.rb2-note { background: var(--color-info-bg); border: 1px solid var(--color-info-border); color: var(--color-info); border-radius: var(--radius-xl); padding: 8px 12px; margin-bottom: var(--space-3); font-size: var(--font-size-md); }
.rb2-note-error { background: var(--color-danger-bg); border-color: var(--color-danger-subtle); color: var(--color-danger-text); }
.rb2-note-warn { background: var(--color-warning-bg); border-color: var(--color-warning-subtle); color: var(--color-warning-text); margin-top: var(--space-2); }
.rb2-tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--border-default); margin-bottom: var(--space-4); }
.rb2-tab { padding: 10px 16px; border: none; background: none; font-size: 15px; color: var(--text-tertiary); cursor: pointer; border-bottom: 2px solid transparent; }
.rb2-tab-on { color: var(--text-primary); font-weight: var(--font-weight-bold); border-bottom-color: var(--color-primary); }
.rb2-tab-right { margin-left: auto; }
.rb2-badge { display: inline-block; min-width: 18px; padding: 0 6px; margin-left: 6px; border-radius: var(--radius-full); background: var(--color-danger); color: var(--text-inverse); font-size: var(--font-size-sm); line-height: 18px; text-align: center; }
.rb2-meta { display: flex; justify-content: space-between; align-items: center; color: var(--text-tertiary); font-size: var(--font-size-md); margin-bottom: 10px; }
.rb2-usage { display: flex; gap: var(--space-2); align-items: center; }
.rb2-slots { display: flex; gap: 3px; }
.rb2-slots i { width: 14px; height: 8px; border-radius: 2px; background: var(--border-default); }
.rb2-slots i.rb2-slot-used { background: var(--color-primary); }
.rb2-list, .rb2-log, .rb2-set, .rb2-gantt { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: 12px; overflow: hidden; }
.rb2-row { display: grid; grid-template-columns: 28px 240px 1fr 150px 32px; align-items: center; gap: var(--space-4); padding: 12px 16px; border-top: 1px solid var(--border-default); }
.rb2-row:first-child { border-top: none; }
.rb2-row:hover { background: var(--bg-muted); }
.rb2-dim { opacity: .45; }
.rb2-n { color: var(--text-tertiary); font-weight: var(--font-weight-semibold); text-align: center; }
.rb2-thumb { width: 240px; height: 47px; object-fit: cover; border-radius: var(--radius-lg); background: var(--bg-active); display: block; }
.rb2-noimg { display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: var(--font-size-sm); background: var(--bg-subtle); }
.rb2-noimg[hidden] { display: none; }
.rb2-cell { min-width: 0; }
.rb2-name { font-weight: var(--font-weight-semibold); overflow-wrap: anywhere; }
.rb2-sub { font-size: var(--font-size-base); color: var(--text-tertiary); }
.rb2-when { font-size: var(--font-size-md); text-align: right; }
.rb2-chip { display: inline-block; font-size: var(--font-size-sm); padding: 2px 8px; border-radius: var(--radius-full); margin-left: 6px; vertical-align: middle; font-weight: var(--font-weight-medium); }
.rb2-chip-ai { background: var(--ucnb-purple-subtle); color: var(--ucnb-purple-text); }
.rb2-chip-end { background: var(--color-warning-bg); color: var(--color-warning-text); }
.rb2-chip-off { background: var(--bg-subtle); color: var(--text-tertiary); }
.rb2-more { border: none; background: none; font-size: 18px; color: var(--text-tertiary); cursor: pointer; border-radius: var(--radius-md); }
.rb2-more:hover { background: var(--bg-subtle); }
.rb2-empty, .rb2-empty-row { background: var(--bg-surface); border: 1px dashed var(--border-default); border-radius: 12px; padding: 22px; text-align: center; color: var(--text-tertiary); }
.rb2-empty-row { border: none; border-radius: 0; }
/* 予定 */
.rb2-gantt { padding: 12px 16px; overflow-x: auto; }
.rb2-g { display: grid; grid-template-columns: 290px repeat(35, minmax(0, 1fr)); align-items: center; min-width: 1030px; row-gap: 4px; }
.rb2-lbl { display: flex; align-items: center; gap: 10px; font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); padding: 4px 12px 4px 0; white-space: nowrap; overflow: hidden; }
.rb2-lbl-img { width: 120px; height: 23px; object-fit: cover; border-radius: var(--radius-sm); flex: none; }
.rb2-lbl span { overflow: hidden; text-overflow: ellipsis; }
.rb2-d { font-size: var(--font-size-xs); color: var(--text-tertiary); text-align: center; padding-bottom: 6px; }
.rb2-d.rb2-today { color: var(--color-danger-text); font-weight: var(--font-weight-bold); }
.rb2-bar { height: 23px; border-radius: var(--radius-sm); background: var(--color-success-subtle); margin: 6px 0; }
.rb2-bar.rb2-bar-dated { background: var(--color-success-hover); }
.rb2-bar.rb2-bar-pd { background: var(--ucnb-purple-text); opacity: .6; width: 18px; justify-self: center; }
.rb2-bar.rb2-pd-next { background: none; border: 2px dashed var(--ucnb-purple-text); }
.rb2-bar.rb2-pd-done { opacity: .25; }
.rb2-legend { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-2); font-size: var(--font-size-base); color: var(--text-tertiary); }
.rb2-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rb2-legend i { display: inline-block; width: 18px; height: 10px; border-radius: 2px; background: var(--color-success-subtle); }
.rb2-legend i.rb2-bar-dated { background: var(--color-success-hover); }
.rb2-legend i.rb2-bar-pd { background: var(--ucnb-purple-text); opacity: .6; width: 10px; }
.rb2-legend i.rb2-pd-next { background: none; border: 2px dashed var(--ucnb-purple-text); opacity: 1; }
/* 承認・記録 */
.rb2-subhead { font-size: var(--font-size-md); color: var(--text-tertiary); margin-bottom: var(--space-2); }
.rb2-subhead-gap { margin-top: 26px; }
.rb2-apcard { display: grid; grid-template-columns: 420px 1fr auto; gap: var(--space-5); align-items: center; background: var(--bg-surface); border: 1px solid var(--color-primary-subtle); border-radius: 12px; padding: var(--space-4); }
.rb2-apact { display: flex; gap: var(--space-2); }
.rb2-cmp { display: grid; grid-template-columns: 1fr 24px 1fr; gap: 10px; align-items: center; margin-bottom: 18px; }
.rb2-cmp-small { margin: 0; }
.rb2-cmp-img { width: 100%; aspect-ratio: 1080 / 210; object-fit: cover; border-radius: var(--radius-lg); display: block; }
.rb2-arrow { text-align: center; color: var(--text-tertiary); font-size: 18px; }
.rb2-cap { font-size: var(--font-size-base); color: var(--text-tertiary); margin-top: var(--space-1); }
.rb2-log-row { display: grid; grid-template-columns: 130px 1fr 110px; gap: 14px; padding: 11px 16px; border-top: 1px solid var(--border-default); font-size: var(--font-size-md); }
.rb2-log-row:first-child { border-top: none; }
.rb2-log-row4 { grid-template-columns: 110px 1fr 90px 90px; }
.rb2-log-empty { display: block; color: var(--text-tertiary); text-align: center; }
.rb2-t, .rb2-who { color: var(--text-tertiary); }
.rb2-who { text-align: right; }
.rb2-st { font-size: var(--font-size-base); padding: 2px 8px; border-radius: var(--radius-full); justify-self: start; align-self: center; white-space: nowrap; }
.rb2-st-ok { background: var(--color-success-bg); color: var(--color-success-text); }
.rb2-st-off { background: var(--bg-subtle); color: var(--text-tertiary); }
.rb2-st-ng { background: var(--color-danger-bg); color: var(--color-danger-text); }
.rb2-st-info { background: var(--color-primary-bg); color: var(--color-primary-active); }
.rb2-panel { display: block; }
.rb2-panel[hidden] { display: none; }
.rb2-drop-text { display: block; line-height: 1.6; }
.rb2-si-wrap { align-items: flex-start; }
.rb2-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }
/* 設定 */
.rb2-si { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: 14px 18px; border-top: 1px solid var(--border-default); }
.rb2-si:first-child { border-top: none; }
.rb2-help { margin: 6px 0 0; padding-left: 18px; font-size: var(--font-size-base); color: var(--color-warning-text); }
.rb2-switch { position: relative; width: 44px; height: 24px; margin: 0; flex: none; }
.rb2-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.rb2-switch i { position: absolute; inset: 0; background: var(--border-medium); border-radius: var(--radius-full); transition: background var(--transition-normal); }
.rb2-switch i::after { content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: var(--bg-surface); border-radius: 50%; transition: left var(--transition-normal); }
.rb2-switch input:checked + i { background: var(--color-success-hover); }
.rb2-switch input:checked + i::after { left: 23px; }
.rb2-switch input:focus-visible + i { box-shadow: var(--shadow-focus); }
/* ⋯メニュー */
.rb2-menu { position: fixed; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); min-width: 150px; z-index: var(--z-dropdown); padding: var(--space-1) 0; }
.rb2-menu[hidden] { display: none; }
.rb2-menu button { display: block; width: 100%; text-align: left; border: none; background: none; padding: 9px 14px; font-size: var(--font-size-md); cursor: pointer; color: var(--text-primary); }
.rb2-menu button:hover:not(:disabled) { background: var(--bg-subtle); }
.rb2-menu button:disabled { color: var(--text-muted); cursor: not-allowed; }
.rb2-menu .rb2-menu-del { color: var(--color-danger-text); }
/* 横パネル */
.rb2-overlay { display: none; }
.rb2-overlay-on { display: block; }
.rb2-shade { position: fixed; inset: 0; background: rgba(17, 24, 39, .35); z-index: var(--z-modal-backdrop); }
.rb2-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 520px; max-width: 100%; background: var(--bg-surface); box-shadow: var(--shadow-xl); display: flex; flex-direction: column; z-index: var(--z-modal); font-size: var(--font-size-lg); }
.rb2-dh { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--border-default); }
.rb2-dh h2 { font-size: 17px; margin: 0; }
.rb2-db { padding: 22px; overflow: auto; flex: 1; }
.rb2-df { padding: var(--space-4) 22px; border-top: 1px solid var(--border-default); display: flex; justify-content: flex-end; align-items: center; gap: var(--space-2); }
.rb2-df-msg { flex: 1; font-size: var(--font-size-md); color: var(--color-danger-text); }
.rb2-df-msg.rb2-df-msg-ok { color: var(--color-success-text); }
.rb2-apblock + .rb2-apblock { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--border-default); }
.rb2-kv { display: grid; grid-template-columns: 90px 1fr; gap: 6px 12px; font-size: var(--font-size-md); }
.rb2-kv b { color: var(--text-tertiary); font-weight: var(--font-weight-medium); }
.rb2-same { margin-top: 18px; font-size: var(--font-size-md); color: var(--color-success-text); }
.rb2-label { display: block; font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); margin: 14px 0 6px; }
.rb2-input { width: 100%; font-size: var(--font-size-lg); padding: 9px 11px; border-radius: var(--radius-xl); box-sizing: border-box; }
.rb2-mini { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--font-size-base); color: var(--text-tertiary); }
.rb2-drop { border: 2px dashed var(--border-default); border-radius: 10px; padding: 22px; text-align: center; color: var(--text-tertiary); cursor: pointer; }
.rb2-drop:focus-visible, .rb2-drop.rb2-drop-over { border-color: var(--color-primary); background: var(--color-primary-bg); outline: none; }
.rb2-drop-preview { display: block; width: 100%; aspect-ratio: 1080 / 210; object-fit: cover; border-radius: var(--radius-lg); margin-bottom: var(--space-2); }
.rb2-drop-preview[hidden] { display: none; }
.rb2-upload { min-height: 18px; margin-top: 6px; font-size: var(--font-size-base); color: var(--color-success-text); }
.rb2-upload.rb2-upload-ng { color: var(--color-danger-text); }
.rb2-paste { margin-top: 6px; font-size: var(--font-size-base); color: var(--text-tertiary); }
.rb2-paste summary { cursor: pointer; }
.rb2-paste .rb2-input { margin-top: 6px; font-size: var(--font-size-md); }
.rb2-seg { display: flex; gap: 6px; }
.rb2-seg .rb2-btn { flex: 1; }
.rb2-seg .rb2-seg-on { border-color: var(--color-primary); color: var(--color-primary); font-weight: var(--font-weight-semibold); background: var(--color-primary-bg); }
.rb2-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: var(--space-2); }
.rb2-two[hidden] { display: none; }
@media (max-width: 900px) {
  .rb2-row { grid-template-columns: 24px 120px 1fr 90px 28px; gap: var(--space-2); }
  .rb2-thumb { width: 120px; height: 24px; }
  .rb2-apcard { grid-template-columns: 1fr; }
}
/* ─── 粗利分析 › 商品別: 拠点の段（2026-10-06・A案） ─── */
#gpSkuContainer .gp-sku-loc-row { background: var(--bg-muted); cursor: pointer; font-weight: var(--font-weight-medium); }
#gpSkuContainer .gp-sku-loc-row > td { padding: 5px 8px; }
#gpSkuContainer .gp-sku-loc-row > td.gp-sku-loc-name { padding-left: var(--space-6); }
#gpSkuContainer .gp-sku-loc-arrow { display: inline-block; width: 10px; margin-right: 3px; font-size: 9px; color: var(--text-tertiary); }
#gpSkuContainer .gp-sku-loc-child { background: var(--bg-subtle); font-weight: 400; }
#gpSkuContainer .gp-sku-loc-child > td { padding: 3px 8px; }
#gpSkuContainer .gp-sku-loc-child > td.gp-sku-loc-sku { padding-left: calc(var(--space-6) * 2); font-family: monospace; font-size: 10px; }
#gpSkuContainer .gp-sku-num { text-align: right; }
/* 既存の商品行・SKU行（インライン指定）と同じ列色にそろえる。共通変数に無い色だけここで定義 */
#gpSkuContainer .gp-sku-loc-row, #gpSkuContainer .gp-sku-loc-child { --gp-col-sfee: #ea580c; --gp-col-mfee: #8b5cf6; --gp-col-hfee: #d97706; --gp-col-ship: #0891b2; }
#gpSkuContainer .gp-col-muted { color: var(--text-tertiary); }
#gpSkuContainer .gp-col-empty { color: var(--text-muted); }
#gpSkuContainer .gp-col-pct { font-size: 80%; color: var(--text-muted); }
#gpSkuContainer .gp-col-ship { color: var(--gp-col-ship, var(--color-info)); }
#gpSkuContainer .gp-col-refund, #gpSkuContainer .gp-col-cost, #gpSkuContainer .gp-col-neg { color: var(--color-danger-text); }
#gpSkuContainer .gp-col-sfee { color: var(--gp-col-sfee, var(--color-warning-text)); }
#gpSkuContainer .gp-col-mfee { color: var(--gp-col-mfee, var(--color-primary)); }
#gpSkuContainer .gp-col-hfee { color: var(--gp-col-hfee, var(--color-warning)); }
#gpSkuContainer .gp-col-pos { color: var(--color-success-dark); }
#gpSkuContainer .badge.gp-loc-badge { margin-left: var(--space-2); font-size: 10px; padding: 1px 6px; background: var(--bg-subtle); color: var(--text-tertiary); }
#gpSkuContainer .badge.gp-loc-badge-shimosaka { background: var(--color-primary-subtle); color: var(--color-primary); }
#gpSkuContainer .badge.gp-loc-badge-rsl { background: var(--color-danger-subtle); color: var(--color-danger-text); }
#gpSkuContainer .badge.gp-loc-badge-fba_jp,
#gpSkuContainer .badge.gp-loc-badge-fba_us { background: var(--color-warning-subtle); color: var(--color-warning-text); }
#gpSkuContainer .badge.gp-loc-badge-honsha { background: var(--color-info-subtle); color: var(--color-info); }

/* Amazon A+ edit: approved mock, scoped to avoid other editing screens. */
.aape-root { padding:0; background:var(--bg-body); font-size:var(--font-size-md); line-height:var(--line-height-normal); color:var(--text-primary); }
.aape-root > .ale-page { width:100%; max-width:1560px; margin:0 auto; box-sizing:border-box; }
.aape-valve { flex-shrink:0; }
.aape-toolbar { display:flex; gap:var(--space-3); align-items:center; flex-wrap:wrap; margin:var(--space-3) 0; }
.aape-card { padding:var(--space-4); margin:var(--space-3) 0; border:1px solid var(--border-default); border-radius:var(--radius-lg); background:var(--bg-surface); }
.aape-table-wrap { overflow:auto; margin:var(--space-4) 0; }
.aape-table { width:100%; border-collapse:collapse; font-size:var(--font-size-md); }
.aape-table th { background:var(--bg-muted); color:var(--text-tertiary); text-align:left; white-space:nowrap; }
.aape-table td,.aape-table th { padding:var(--space-3); border-bottom:1px solid var(--border-default); vertical-align:middle; }
.aape-table tbody tr:hover { background:var(--bg-hover); }
.aape-muted { color:var(--text-tertiary); font-size:var(--font-size-base); }
.aape-compare-head,.aape-module { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--space-4); margin:var(--space-3) 0; }
.aape-compare-head { position:sticky; top:0; background:var(--bg-body); z-index:2; padding:var(--space-2) 0; font-weight:var(--font-weight-bold); }
.aape-side { padding:var(--space-3); border:1px solid var(--border-default); border-radius:var(--radius-lg); background:var(--bg-surface); min-width:0; }
.aape-side.is-changed { box-shadow:inset 4px 0 var(--color-info); }
.aape-module.is-same > .aape-side > strong { color:var(--text-tertiary); }
.aape-module-body { display:grid; grid-template-columns:210px minmax(0,1fr); gap:var(--space-3); margin-top:var(--space-2); }
.aape-module-body.is-table { display:block; }
.aape-module-body p { white-space:pre-wrap; overflow-wrap:anywhere; margin:0 0 var(--space-2); }
.aape-big { width:100%; height:210px; object-fit:contain; background:var(--bg-muted); }
.aape-thumbs { display:flex; flex-wrap:wrap; gap:var(--space-1); margin-top:var(--space-2); }
.aape-thumb { width:52px; height:52px; object-fit:contain; border:1px solid var(--border-default); }
.aape-thumb.is-old { border:2px solid var(--color-danger); }
.aape-thumb.is-new { border:2px solid var(--color-success); }
.aape-delete { background:var(--color-danger-subtle); color:var(--color-danger-text); }
.aape-insert { background:var(--color-success-subtle); color:var(--color-success-text); text-decoration:none; }
.aape-actions { position:sticky; bottom:0; padding:var(--space-3); background:var(--bg-surface); border-top:1px solid var(--border-default); display:flex; gap:var(--space-2); align-items:center; flex-wrap:wrap; }
.aape-modal { font-size:var(--font-size-md); color:var(--text-primary); }
.aape-modal .modal-header h3 { margin:0; font-size:var(--font-size-xl); }
.aape-modal .modal-body p { margin:0 0 var(--space-3); }
.aape-approval-changes { list-style:none; padding:0; margin:var(--space-3) 0; }
.aape-approval-changes li { padding:var(--space-3) 0; border-bottom:1px solid var(--border-default); }
.aape-change-heading { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-2); }
.aape-approval-card h2 { margin:0 0 var(--space-2); }
.aape-valve .aape-toolbar { margin-top:0; }
.aape-raw { white-space:pre-wrap; overflow-wrap:anywhere; font-size:var(--font-size-base); }
.aape-checks { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--space-3); }
@media(max-width:800px) { .aape-module-body { grid-template-columns:1fr; } }
.aape-module-body[hidden] { display:none; }

.aape-revision { flex:1 1 420px; display:flex; flex-direction:column; gap:var(--space-2); }
.aape-revision textarea { width:100%; min-height:64px; padding:var(--space-2); border:1px solid var(--border-default); border-radius:6px; background:var(--bg-surface); color:inherit; font:inherit; resize:vertical; }

/* A+ change summaries and before/after markers */
.aape-change-kind { display:inline-block; min-width:76px; text-align:center; padding:1px 6px; border-radius:var(--radius-sm); font-size:var(--font-size-sm); font-weight:var(--font-weight-bold); }
.aape-kind-text { background:var(--color-warning-subtle); color:var(--color-warning-text); }
.aape-kind-image { background:var(--color-info-subtle); color:var(--color-info); }
.aape-kind-add { background:var(--color-success-subtle); color:var(--color-success-text); }
.aape-kind-remove { background:var(--color-danger-subtle); color:var(--color-danger-text); }
.aape-thumb-button.btn { padding:0; border:0; background:transparent; line-height:0; }
.aape-thumb-wrap { position:relative; display:inline-flex; vertical-align:middle; }
.aape-thumb-wrap .aape-thumb { display:block; }
.aape-thumb-pin { position:absolute; top:-7px; right:-7px; width:16px; height:16px; border-radius:50%; color:var(--text-inverse); font-size:10px; font-weight:var(--font-weight-bold); display:flex; align-items:center; justify-content:center; border:1.5px solid var(--bg-surface); line-height:1; }
.aape-thumb-pin.is-old { background:var(--color-danger); }
.aape-thumb-pin.is-new { background:var(--color-success); }
.aape-error-diff { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-2); white-space:pre-wrap; overflow-wrap:anywhere; }
.aape-diff-arrow { color:var(--text-tertiary); }

/* A+ approval: match the NECTO mock density, including real six-product tables. */
.aape-root .ale-page { padding:var(--space-4); }
.aape-root .ale-h1 { font-size:var(--font-size-2xl); margin:var(--space-1) 0 var(--space-2); }
.aape-root h2 { font-size:var(--font-size-xl); }
.aape-root h3,.aape-root h4,.aape-side > strong { font-size:var(--font-size-lg); }
.aape-root p { margin:var(--space-2) 0; }
.aape-root .aape-card { padding:var(--space-3); }
.aape-block-text h4 { margin:0 0 var(--space-2); }
.aape-block-text ul { padding-left:var(--space-4); margin:0; }
.aape-block-text li { margin-bottom:var(--space-1); }
.aape-thumb-button[aria-pressed="true"] { outline:2px solid var(--color-primary); outline-offset:1px; }
.aape-image-placeholder { display:inline-flex; align-items:center; justify-content:center; background:var(--bg-subtle); color:var(--text-tertiary); font-size:var(--font-size-base); }
.aape-comparison-scroll { overflow:auto; }
.aape-comparison-table { width:100%; min-width:800px; table-layout:fixed; border-collapse:collapse; font-size:var(--font-size-md); line-height:var(--line-height-normal); }
.aape-comparison-table th,.aape-comparison-table td { padding:var(--space-2); border:1px solid var(--border-default); vertical-align:top; text-align:left; overflow-wrap:anywhere; white-space:pre-wrap; }
.aape-comparison-table th { background:var(--bg-muted); font-weight:var(--font-weight-medium); }
.aape-comparison-table th:first-child { width:80px; }
.aape-product-image { display:flex; width:100%; height:88px; object-fit:contain; margin-bottom:var(--space-2); }
.aape-product-title { font-size:var(--font-size-base); line-height:var(--line-height-normal); margin-bottom:var(--space-1); }
.aape-comparison-table .aape-changed-column { background:var(--color-info-bg); box-shadow:inset 0 4px var(--color-info); }
.aape-comparison-table .aape-changed-row { background:var(--color-info-bg); box-shadow:inset 4px 0 var(--color-info); }
.aape-changed-cell { background:var(--color-warning-bg); box-shadow:inset 4px 0 var(--color-warning); scroll-margin:80px; }
.aape-block-text .aape-changed-cell { padding:var(--space-2); }
.aape-module:has(.aape-changed-cell) > .aape-side { border-color:var(--color-info-border); }
.aape-actions { z-index:3; font-size:var(--font-size-md); }
.aape-actions-spacer { height:140px; flex-shrink:0; }
.aape-revision textarea { min-height:44px; box-sizing:border-box; }
@media(max-width:1100px) { .aape-module-body { grid-template-columns:minmax(0,1fr); } }

.aape-thumb-button.aape-changed-block { box-shadow:0 3px var(--color-warning); }

/* ===== 発注の2ページ化（① 発注数決定 ／ ② 工場への発注＋セット組み指示）modules/po-two-page.js ===== */
.po2-panel { padding: var(--space-3) 0; }
.po2-steps { display: flex; gap: var(--space-2); align-items: center; margin-bottom: var(--space-3); flex-wrap: wrap; }
.po2-step { padding: var(--space-1) var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-full); background: var(--bg-surface); color: var(--text-secondary); font-size: var(--font-size-md); cursor: pointer; }
.po2-step.is-active { background: var(--color-primary); border-color: var(--color-primary); color: var(--text-inverse); font-weight: var(--font-weight-semibold); }
.po2-step:disabled { cursor: not-allowed; opacity: .55; }
.po2-meta { font-size: var(--font-size-sm); color: var(--text-tertiary); }
.po2-card { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-xl); padding: var(--space-3); overflow-x: auto; }
.po2-table { border-collapse: collapse; width: 100%; font-size: var(--font-size-md); font-variant-numeric: tabular-nums; }
.po2-table th { background: var(--bg-subtle); color: var(--text-secondary); padding: var(--space-1) var(--space-2); text-align: right; white-space: nowrap; font-weight: var(--font-weight-semibold); }
.po2-table td { padding: var(--space-1) var(--space-2); text-align: right; white-space: nowrap; border-bottom: 1px solid var(--border-default); }
.po2-table th.po2-l, .po2-table td.po2-l { text-align: left; }
.po2-table tr.po2-sku td { background: var(--bg-muted); font-weight: var(--font-weight-bold); border-top: 2px solid var(--border-medium); }
.po2-table tr.po2-loc td.po2-l { padding-left: var(--space-6); }
.po2-table tr.po2-total td { font-weight: var(--font-weight-bold); }
.po2-table tr.po2-total.is-ng td { background: var(--color-danger-subtle); }
.po2-table tr.po2-total.is-ng td.po2-moq { color: var(--color-danger-text); }
.po2-ok { color: var(--color-success-dark); font-weight: var(--font-weight-bold); }
.po2-ng { color: var(--color-danger-text); font-weight: var(--font-weight-bold); }
.po2-muted { color: var(--text-tertiary); font-weight: var(--font-weight-normal); }
.po2-loc-badge { display: inline-block; margin-left: var(--space-2); padding: 0 var(--space-2); border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); }
.po2-loc-1 { background: var(--color-danger-subtle); color: var(--color-danger-text); }
.po2-loc-2 { background: var(--color-warning-subtle); color: var(--color-warning-text); }
.po2-loc-3 { background: var(--color-info-subtle); color: var(--color-info); }
.po2-loc-4 { background: var(--color-primary-subtle); color: var(--color-primary-active); }
.po2-qty { width: 76px; text-align: right; padding: 2px var(--space-2); border: 1px solid var(--border-input); border-radius: var(--radius-sm); font-size: var(--font-size-md); background: var(--bg-input); }
.po2-qty:focus { outline: none; border-color: var(--border-focus); }
.po2-qty.is-invalid { border-color: var(--color-danger); background: var(--color-danger-bg); }
.po2-summary { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; margin-top: var(--space-3); }
.po2-pill { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-xl); padding: var(--space-2) var(--space-3); font-size: var(--font-size-md); }
.po2-pill b { font-size: var(--font-size-lg); }
.po2-legend { margin-top: var(--space-3); color: var(--text-tertiary); font-size: var(--font-size-sm); line-height: var(--line-height-relaxed); }
.po2-who { display: inline-block; padding: 0 var(--space-2); border-radius: var(--radius-sm); font-size: var(--font-size-sm); }
.po2-who-alipa { background: var(--color-primary-subtle); color: var(--color-primary-active); }
.po2-who-factory { background: var(--color-success-subtle); color: var(--color-success-text); }
.po2-who-single { background: var(--bg-subtle); color: var(--text-secondary); }
.po2-who-unset { background: var(--color-danger-subtle); color: var(--color-danger-text); }
.po2-filter-btn { margin-left: var(--space-1); padding: 0 var(--space-2); border: 1px solid var(--color-primary-subtle); border-radius: var(--radius-sm); background: var(--color-primary-bg); color: var(--color-primary-active); font-size: var(--font-size-xs); cursor: pointer; }
.po2-filter-btn.is-active { background: var(--color-primary); color: var(--text-inverse); }
.po2-table td.po2-zero { color: var(--border-medium); }
.po2-table th.po2-dest { font-size: var(--font-size-sm); text-align: center; }
.po2-table th.po2-dest .po2-muted { display: block; font-size: var(--font-size-xs); }
.po2-notices { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-3) 0; }
.po2-errors { margin: 0; padding-left: var(--space-5); }
.po2-actions { display: flex; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-4); }
.po2-toolbar { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; margin-bottom: var(--space-2); }
.po2-table td.po2-total-qty { min-width: 76px; }
.po2-table td.po2-moq { text-align: left; }
.po2-alloc-status { margin-top: var(--space-1); }

/* 未到着在庫: RSL・FBAへの到着（modules/accounting-arrivals.js・ADR-0040） */
#accountingArrivalPanel { margin-bottom: var(--space-3); }
.acct-arrival-alert { margin-bottom: var(--space-2); }
.acct-arrival-list { margin: var(--space-1) 0 var(--space-1) var(--space-5); padding: 0; }
.acct-arrival-block { margin-bottom: var(--space-3); }
.acct-arrival-sub { font-size: var(--font-size-xs); color: var(--text-tertiary); }
.acct-arrival-empty { font-size: var(--font-size-sm); color: var(--text-tertiary); padding: var(--space-2) 0; }
.acct-num { text-align: right; }
.table tr.acct-arrival-total td { font-weight: var(--font-weight-bold); background: var(--bg-subtle); }
.table tr.acct-arrival-voided td { color: var(--text-tertiary); text-decoration: line-through; }
.table tr.acct-arrival-voided td:last-child { text-decoration: none; }
.acct-arrival-form { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-top: var(--space-2); padding: var(--space-2); border: 1px solid var(--border-default); border-radius: var(--radius-lg); font-size: var(--font-size-sm); }
.acct-arrival-form-title { flex-basis: 100%; font-weight: var(--font-weight-semibold); color: var(--text-secondary); }
.acct-arrival-form-result { font-size: var(--font-size-sm); color: var(--color-success-text, var(--text-secondary)); }
.acct-arrival-form-error { color: var(--color-danger-text); }

/* 返金（顧客対応 > 返金金額算出）: 中央720pxの1カラム・上から1本の流れ（2026-10-07 オーナー承認の見本） */
.rfc-wrap { max-width: 720px; margin: 0 auto; padding: var(--space-6) var(--space-4) var(--space-8); color: var(--text-primary); font-size: var(--font-size-lg); line-height: var(--line-height-relaxed); }
.rfc-title { margin: 0 0 var(--space-4); font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); }
.rfc-search { display: flex; gap: var(--space-2); margin-bottom: var(--space-5); }
.rfc-search .input { flex: 1; min-width: 0; padding: 10px 12px; font-size: var(--font-size-lg); }
.rfc-search .btn { padding: 10px 16px; font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); }
.rfc-card { padding: var(--space-5); margin-bottom: var(--space-3); border-radius: var(--radius-xl); }
.rfc-label { margin: 0 0 10px; font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--text-tertiary); letter-spacing: .04em; }
.rfc-label-gap { margin-top: var(--space-4); }
.rfc-cands { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.rfc-order { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }
.rfc-order-no { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); letter-spacing: .01em; overflow-wrap: anywhere; }
.rfc-pill { display: inline-block; padding: 2px 10px; border-radius: var(--radius-full); font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); background: var(--bg-subtle); color: var(--text-secondary); }
.rfc-pill-mall { background: var(--color-danger-subtle); color: var(--color-danger-text); }
.rfc-order-meta { width: 100%; display: flex; flex-wrap: wrap; gap: var(--space-4); color: var(--text-tertiary); font-size: var(--font-size-md); }
.rfc-order-meta b { color: var(--text-primary); font-weight: var(--font-weight-semibold); }
.rfc-line { padding: var(--space-3) 0; border-top: 1px solid var(--border-default); }
.rfc-line:first-child { border-top: none; padding-top: 0; }
.rfc-item, .rfc-comp { display: flex; align-items: center; gap: 14px; }
.rfc-comps { margin: var(--space-2) 0 0 62px; display: flex; flex-direction: column; gap: var(--space-2); }
.rfc-thumb { width: 48px; height: 48px; flex: none; border-radius: var(--radius-lg); background: var(--bg-subtle); object-fit: cover; display: block; }
.rfc-item-info { flex: 1; min-width: 0; }
.rfc-item-sku { font-weight: var(--font-weight-bold); overflow-wrap: anywhere; }
.rfc-comp-sku { font-weight: var(--font-weight-semibold); font-size: var(--font-size-md); overflow-wrap: anywhere; }
.rfc-item-name { font-size: var(--font-size-base); color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rfc-item-basis { font-size: var(--font-size-sm); color: var(--color-warning-text); }
.rfc-item-price { font-size: var(--font-size-md); color: var(--text-secondary); white-space: nowrap; }
.rfc-pn { width: 110px; flex: none; }
.rfc-tag { display: inline-block; margin-left: var(--space-1); padding: 0 var(--space-2); border-radius: var(--radius-full); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); background: var(--color-info-subtle); color: var(--color-info); vertical-align: middle; }
.rfc-tag-warn { background: var(--color-warning-subtle); color: var(--color-warning-text); }
.rfc-stepper { display: flex; align-items: center; flex: none; border: 1px solid var(--border-medium); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-surface); }
.rfc-step { width: 32px; height: 32px; border: none; background: var(--bg-surface); color: var(--text-secondary); font-size: var(--font-size-xl); cursor: pointer; }
.rfc-step:hover:not(:disabled) { background: var(--bg-subtle); }
.rfc-step:disabled { color: var(--text-muted); cursor: not-allowed; }
.rfc-ret-input { width: 34px; height: 32px; border: none; text-align: right; font-weight: var(--font-weight-bold); font-size: var(--font-size-lg); font-family: inherit; color: var(--text-primary); background: transparent; -moz-appearance: textfield; appearance: textfield; }
.rfc-ret-input::-webkit-outer-spin-button, .rfc-ret-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rfc-step-max { padding: 0 6px 0 2px; font-size: var(--font-size-base); color: var(--text-muted); white-space: nowrap; }
.rfc-line-result { margin: 6px 0 0 62px; font-size: var(--font-size-base); color: var(--text-tertiary); }
.rfc-line-result:empty { display: none; }
.rfc-line-result.is-danger, .rfc-note-warn { color: var(--color-danger-text); }
.rfc-note-warn { margin: 6px 0 0 62px; font-size: var(--font-size-base); }
.rfc-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.rfc-chip { padding: 6px 12px; border: 1px solid var(--border-medium); border-radius: var(--radius-full); background: var(--bg-surface); color: var(--text-secondary); font-size: var(--font-size-md); font-family: inherit; cursor: pointer; }
.rfc-chip.is-on { border-color: var(--color-primary); background: var(--color-primary-bg); color: var(--color-primary); font-weight: var(--font-weight-semibold); }
.rfc-total-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.rfc-total { min-width: 0; }
.rfc-amount { font-size: 36px; font-weight: 800; line-height: 1.1; letter-spacing: -.01em; }
.rfc-amount.is-danger { color: var(--color-danger-text); font-size: var(--font-size-3xl); }
.rfc-sub { margin-top: var(--space-1); font-size: var(--font-size-base); color: var(--text-tertiary); }
.rfc-sub.is-warn { color: var(--color-warning-text); }
.rfc-link { padding: 0; border: none; background: none; color: var(--color-primary); font-size: var(--font-size-base); font-family: inherit; cursor: pointer; }
.rfc-override { display: flex; align-items: center; gap: var(--space-2); margin-top: 10px; }
.rfc-override[hidden] { display: none; }
.rfc-override-input { width: 180px; }
.rfc-check { display: flex; align-items: center; gap: var(--space-2); margin-top: 14px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg); background: var(--color-success-bg); color: var(--color-success-text); font-size: var(--font-size-base); }
.rfc-check i { width: 16px; height: 16px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-success); color: var(--text-inverse); font-style: normal; font-size: var(--font-size-xs); }
.rfc-check.is-warn { background: var(--color-warning-bg); color: var(--color-warning-text); }
.rfc-check.is-warn i { background: var(--color-warning); }
.rfc-check[hidden], .rfc-reasons[hidden] { display: none; }
.rfc-reasons { margin-top: 10px; display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--font-size-base); color: var(--text-tertiary); }
.rfc-reasons .is-danger { color: var(--color-danger-text); }
.rfc-modes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-bottom: var(--space-3); }
.rfc-mode { display: flex; align-items: flex-start; gap: 10px; padding: var(--space-3); border: 1px solid var(--border-medium); border-radius: var(--radius-lg); cursor: pointer; }
.rfc-mode.is-on { border-color: var(--color-primary); background: var(--color-primary-bg); }
.rfc-mode input { margin-top: 4px; }
.rfc-mode b { display: block; font-size: var(--font-size-lg); }
.rfc-mode small { font-size: var(--font-size-base); color: var(--text-tertiary); }
.rfc-mall-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-bottom: var(--space-3); }
.rfc-mall-fields[hidden] { display: none; }
.rfc-field { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--font-size-base); color: var(--text-tertiary); }
.rfc-notify { display: flex; flex-wrap: wrap; gap: var(--space-3); padding-top: 6px; color: var(--text-primary); font-size: var(--font-size-md); }
.rfc-notify label { display: flex; align-items: center; gap: var(--space-1); cursor: pointer; }
.rfc-note { display: block; width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 12px; font-size: var(--font-size-md); font-family: inherit; resize: vertical; }
.rfc-submit { display: block; width: 100%; margin-top: var(--space-3); padding: 14px; font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); }
.rfc-record-result { margin-top: var(--space-2); font-size: var(--font-size-base); color: var(--text-tertiary); display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.rfc-record-result:empty { display: none; }
.rfc-fold { margin-top: var(--space-3); padding: var(--space-3) var(--space-5); background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-xl); }
.rfc-fold summary { cursor: pointer; font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); color: var(--text-tertiary); }
.rfc-fold-table { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: var(--font-size-md); }
.rfc-fold-table td { padding: 6px var(--space-2) 6px 0; border-top: 1px solid var(--border-default); color: var(--text-secondary); vertical-align: top; overflow-wrap: anywhere; }
.rfc-num { text-align: right; white-space: nowrap; }
.rfc-fold-empty { margin-top: 10px; font-size: var(--font-size-md); color: var(--text-muted); }
@media (max-width: 560px) {
  .rfc-modes, .rfc-mall-fields { grid-template-columns: 1fr; }
  .rfc-amount { font-size: 30px; }
  .rfc-item { flex-wrap: wrap; }
  .rfc-comps, .rfc-line-result, .rfc-note-warn { margin-left: 0; }
}

/* ─── 在庫フロー第3弾: パックで見る・色を混ぜたパックの決着（設計書 multi-warehouse-inventory-flow-DESIGN.md §9-3） ─── */
.inv-pack-legend {
  margin-bottom: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
}
.inv-pack-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}
.inv-pack-table thead { position: sticky; top: 0; z-index: 1; }
.inv-pack-th {
  padding: 4px 6px;
  text-align: left;
  background: var(--bg-muted);
  border-bottom: 2px solid var(--border-default);
  cursor: help;
  white-space: nowrap;
}
.inv-pack-th.is-num { text-align: right; }
.inv-pack-table td {
  padding: 3px 6px;
  border-bottom: 1px solid var(--border-light, var(--border-default));
  vertical-align: top;
}
.inv-pack-group-row { background: var(--bg-muted); cursor: pointer; font-weight: 700; }
.inv-pack-group-row td { padding: 4px 6px; }
.inv-pack-sub-row { background: var(--bg-subtle); cursor: pointer; }
.inv-pack-row.is-expandable { cursor: pointer; }
.inv-pack-comp-row td { background: var(--bg-subtle); font-size: var(--font-size-xs); color: var(--text-secondary); }
.inv-pack-label { white-space: nowrap; }
.inv-pack-label.is-indent1 { padding-left: 20px; }
.inv-pack-label.is-indent2 { padding-left: 36px; }
.inv-pack-label.is-indent3 { padding-left: 52px; }
.inv-pack-count { font-weight: 400; color: var(--text-tertiary); font-size: var(--font-size-xs); }
.inv-pack-arrow { display: inline-block; width: 12px; font-size: 9px; color: var(--text-tertiary); }
.inv-pack-row.is-open .inv-pack-arrow,
.inv-pack-group-row.is-open td:first-child { color: var(--color-primary); }
.inv-pack-num { text-align: right; white-space: nowrap; }
.inv-pack-num.is-strong { font-weight: 600; }
/* パックの世界の参考値（§5-5）。眺めるための数字なので斜体 */
.inv-pack-ref { font-style: italic; color: var(--text-secondary); }
.inv-pack-unit { margin-left: 2px; font-size: 9px; color: var(--text-tertiary); font-style: normal; }
.inv-pack-empty { color: var(--text-muted); }
.inv-pack-dest { white-space: nowrap; }
.inv-pack-label .badge { margin-left: 4px; }
.inv-pack-stranded {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  white-space: normal;
}
.inv-pack-stranded .badge { margin-left: 0; }
/* 決着のモーダル */
.inv-pack-modal-title { margin: 0; font-size: var(--font-size-xl); }
.inv-pack-settle-summary { margin: 0 0 var(--space-3); font-size: var(--font-size-md); line-height: 1.6; }
.inv-pack-settle-methods {
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}
.inv-pack-settle-methods legend { padding: 0 4px; font-size: var(--font-size-sm); color: var(--text-secondary); }
.inv-pack-settle-option {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  padding: var(--space-2) 0;
  font-size: var(--font-size-md);
  line-height: 1.5;
  cursor: pointer;
}
.inv-pack-settle-option input { margin-top: 3px; }
.inv-pack-settle-reason { display: flex; flex-direction: column; gap: 4px; font-size: var(--font-size-md); }
.inv-pack-settle-modal #invPackSettleError { margin-top: var(--space-3); }

/* Instagram DM: one scroll surface, matching the customer-support thread. */
.igdm-message-list {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  gap: var(--space-2);
}
#snsDmTodo {
  flex: 0 0 auto;
  padding-top: var(--space-3);
  border-top: var(--space-1) solid var(--border-default);
}
#snsDmTodo:not([hidden]) { display: grid; gap: var(--space-3); }
#snsDmTodo .cs-hub-draft-card { margin-top: 0; }
#snsDmProposals:not(.sns-hidden) { display: grid; gap: var(--space-3); }
#snsDmTodo .igdm-ai-draft-host {
  max-height: none;
  overflow: visible;
}
#snsDmAiDraft .cs-hub-draft-actions { justify-content: flex-start; }
#snsDmAiDraft .igdm-draft-action-right { margin-left: auto; }
.igdm-origin-form { display: grid; gap: var(--space-3); margin-top: var(--space-2); }
.igdm-origin-field:not([hidden]) { display: grid; gap: var(--space-1); }
.igdm-origin-field > span { font-size: var(--font-size-xs); color: var(--text-secondary); }
.igdm-origin-field > .input, .igdm-origin-field > .select { width: 100%; min-width: 0; }
.igdm-origin-actions { display: flex; gap: var(--space-2); justify-content: flex-end; }
.igdm-unknown-records { display: grid; gap: var(--space-2); }
#snsDmAiDraft .cs-hub-agt-summary .badge-draft-author { font-size: var(--font-size-xs); }

/* Replacement documents are independent, fully expanded columns. */
.aape-replacement-documents { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--space-4); }
.aape-replacement-documents .aape-side { margin-bottom:var(--space-3); }
.aape-premium-images { display:grid; grid-template-columns:minmax(0,3fr) minmax(0,1fr); gap:var(--space-3); }
.aape-premium-images figure { margin:0; min-width:0; }
.aape-premium-image { display:block; width:100%; height:auto; }
.aape-premium p { white-space:pre-wrap; overflow-wrap:anywhere; }
.aape-faq { border-bottom:1px solid var(--border-default); padding:var(--space-2) 0; }
.aape-replacement-documents .aape-comparison-table { table-layout:fixed; width:100%; }
.aape-replacement-documents .aape-comparison-table th, .aape-replacement-documents .aape-comparison-table td { overflow-wrap:anywhere; }
.aape-replacement-documents .aape-comparison-table th:first-child { width:5.5em; }