/* ════════════════════════════════════════════════
   KIZUNALOG DASHBOARD — Combined CSS
   Generated by build_dashboard.py
   ════════════════════════════════════════════════ */

/* ──────────────────────────────────────
   sideNav.html
   ────────────────────────────────────── */

:root {
  /* ── ベース背景（LP準拠ダーク） ── */
  --c-bg: #0f0f0f;
  --c-base: #0a0a0a;
  --c-surface: #1c1c1c;
  --c-surface-2: #242424;
  --c-surface2: #181818;
  --c-hover: #1c1c1c;
  --c-active: #141414;
  --c-border: #383838;

  /* ── テキスト ── */
  --c-text:        #ffffff;
  --c-text-sub:    rgba(255,255,255,0.45);
  --c-text-light:  rgba(255,255,255,0.55);
  --c-text-mute:   rgba(255,255,255,0.35);
  --c-badge-text:  rgba(255,255,255,0.88);

  /* ── プライマリアクセント（ブルー） ── */
  --c-accent:      #39BDF8;
  --c-accent-dim:  rgba(57,189,248,0.12);
  --c-accent-18:   rgba(57,189,248,0.18);
  --c-accent-72:   rgba(57,189,248,0.72);

  /* ── アイコン ── */
  --c-icon:        rgba(255,255,255,0.35);
  --c-icon-active: #39BDF8;

  /* ── カラーパレット ── */
  --c-green:   #0CC755;
  --c-orange:  #F59E0B;
  --c-blue:    #39BDF8;
  --c-danger:  #ef4444;
  --c-water:   #4fc3f7;
  --c-purple:  #A78BFA;
  --c-pink:    #F472B6;
  --c-cyan:    #22D3EE;

  /* ── バッジ用 dim値（bg: 0.18 / border: 0.72）── */
  --c-green-dim:  rgba(12,199,85,0.12);
  --c-green-18:   rgba(12,199,85,0.18);
  --c-green-72:   rgba(12,199,85,0.72);
  --c-orange-18:  rgba(245,158,11,0.18);
  --c-orange-72:  rgba(245,158,11,0.72);
  --c-blue-18:    rgba(57,189,248,0.18);
  --c-blue-72:    rgba(57,189,248,0.72);
  --c-danger-18:  rgba(239,68,68,0.18);
  --c-danger-72:  rgba(239,68,68,0.72);
  --c-water-18:   rgba(79,195,247,0.18);
  --c-water-72:   rgba(79,195,247,0.72);
  --c-purple-18:  rgba(167,139,250,0.18);
  --c-purple-72:  rgba(167,139,250,0.72);
  --c-pink-18:    rgba(244,114,182,0.18);
  --c-pink-72:    rgba(244,114,182,0.72);
  --c-cyan-18:    rgba(34,211,238,0.18);
  --c-cyan-72:    rgba(34,211,238,0.72);

  /* ── 構造・シャドウ ── */
  --c-track:  rgba(255,255,255,0.12);
  --radius:   12px;
  --r-sm:     6px;
  --r-md:     10px;
  --r-lg:     16px;
  --shadow:   0 10px 28px rgba(0,0,0,.22);
}

/* ══ ライトテーマ ══ */
body.theme-light {
  --c-bg: #f4f5f7;
  --c-base: #eaecef;
  --c-surface: #ffffff;
  --c-surface-2: #f8f9fb;
  --c-surface2: #f1f3f6;
  --c-hover: rgba(0,0,0,0.04);
  --c-active: rgba(0,0,0,0.08);
  --c-border: #dde0e6;
  --c-text: #1a202c;
  --c-text-sub: rgba(0,0,0,0.55);
  --c-text-light: rgba(0,0,0,0.62);
  --c-text-mute: rgba(0,0,0,0.42);
  --c-badge-text: rgba(0,0,0,0.82);
  --c-accent: #0284c7;
  --c-accent-dim: rgba(2,132,199,0.10);
  --c-accent-18: rgba(2,132,199,0.18);
  --c-accent-72: rgba(2,132,199,0.72);
  --c-icon: rgba(0,0,0,0.35);
  --c-icon-active: #0284c7;
  --c-track: rgba(0,0,0,0.10);
  --shadow: 0 4px 16px rgba(0,0,0,0.10);
  --c-green-dim: rgba(5,150,105,0.10);
  --c-green-18: rgba(5,150,105,0.18);
  --c-green-72: rgba(5,150,105,0.72);
  --c-orange-18: rgba(217,119,6,0.18);
  --c-orange-72: rgba(217,119,6,0.72);
  --c-danger-18: rgba(220,38,38,0.18);
  --c-danger-72: rgba(220,38,38,0.72);
}

/* ライトテーマ向け個別上書き */
body.theme-light #kz-auth-overlay { background: rgba(242,244,247,0.97); }
body.theme-light .nav-sidebar { background: #252f3d; border-color: #1c2534; }
body.theme-light .fp-sidebar { background: #252f3d !important; border-right-color: #1c2534 !important; }
body.theme-light .nav-item { color: rgba(255,255,255,0.65); }
body.theme-light .nav-item.active, body.theme-light .nav-item:hover { background: rgba(255,255,255,0.10); color: #ffffff; }
body.theme-light .fp-panel { background: #252f3d; border-color: #1c2534; }
body.theme-light .fp-logout-btn { color: rgba(255,255,255,0.55); }
body.theme-light .fp-logout-btn:hover { background: rgba(255,255,255,0.08); color: #ffffff; }
body.theme-light .state-panel { background: var(--c-bg); }
body.theme-light .panel-hd { background: #ffffff; border-color: #dde0e6; }
body.theme-light .msg-bubble { background: #ffffff; border: 1px solid #e5e7eb; color: #111827; }
body.theme-light .msg-bubble-wrap.out .msg-bubble { background: #dbeafe; border-color: #bfdbfe; }
body.theme-light #msg-search, body.theme-light #cu-search,
body.theme-light #ap-search, body.theme-light #ps-search { background: #ffffff; }
body.theme-light .global-modal-overlay { background: rgba(0,0,0,0.35); }
body.theme-light .us-app, body.theme-light .ob-modal { background: #ffffff; border-color: #dde0e6; }

/* ══ ウォームテーマ (v1.69.0 — clean & warm リデザイン) ══ */
body.theme-warm {
  --c-bg:         #F8F6F4;
  --c-base:       #F0EBE5;
  --c-surface:    #FFFFFF;
  --c-surface-2:  #FFFFFF;
  --c-surface2:   #F8F6F4;
  --c-hover:      rgba(61,53,49,0.04);
  --c-active:     rgba(61,53,49,0.08);
  --c-border:     #EFE9E5;
  --c-text:       #3D3531;
  --c-text-sub:   rgba(61,53,49,0.60);
  --c-text-light: rgba(61,53,49,0.62);
  --c-text-mute:  rgba(61,53,49,0.40);
  --c-badge-text: rgba(61,53,49,0.82);
  --c-accent:     #E07A5F;
  --c-accent-dim: rgba(224,122,95,0.10);
  --c-accent-18:  rgba(224,122,95,0.18);
  --c-accent-72:  rgba(224,122,95,0.72);
  --c-icon:       rgba(61,53,49,0.38);
  --c-icon-active:#E07A5F;
  --c-track:      rgba(61,53,49,0.12);
  --shadow:       0 8px 24px rgba(61,53,49,0.06);
  --c-green-dim:  rgba(5,130,90,0.10);
  --c-green-18:   rgba(5,130,90,0.18);
  --c-green-72:   rgba(5,130,90,0.72);
  --c-orange-18:  rgba(208,106,80,0.18);
  --c-orange-72:  rgba(208,106,80,0.72);
  --c-danger-18:  rgba(192,57,43,0.16);
  --c-danger-72:  rgba(192,57,43,0.68);
}

/* ウォームテーマ向け個別上書き */
body.theme-warm #kz-auth-overlay { background: rgba(248,246,244,0.97); }
body.theme-warm .nav-sidebar { background: #2C2826; border-color: #2C2826; }
body.theme-warm .nav-item { color: rgba(213,207,203,0.78); }
body.theme-warm .nav-item:hover { background: #3A3532; color: #ffffff; }
body.theme-warm .nav-item.active { background: rgba(224,122,95,0.15); color: #E07A5F; }
body.theme-warm .nav-item.active .nav-icon { color: #E07A5F; }
body.theme-warm .nav-item .nav-label { color: inherit; }
body.theme-warm .fp-panel { background: #2C2826; border-color: #3A3532; }
body.theme-warm .fp-logout-btn { color: rgba(255,255,255,0.55); }
body.theme-warm .fp-logout-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
body.theme-warm .state-panel { background: var(--c-bg); }
body.theme-warm .panel-hd { background: #FFFFFF; border-color: #EFE9E5; }
body.theme-warm .msg-bubble { background: #FFFFFF; border: 1px solid #EFE9E5; color: #3D3531; }
body.theme-warm .msg-bubble-wrap.out .msg-bubble { background: rgba(224,122,95,0.12); border-color: rgba(224,122,95,0.28); color: #3D3531; }
body.theme-warm #msg-search, body.theme-warm #cu-search,
body.theme-warm #ap-search, body.theme-warm #ps-search { background: #FFFFFF; }
body.theme-warm .global-modal-overlay { background: rgba(0,0,0,0.40); }
body.theme-warm .us-app, body.theme-warm .ob-modal { background: #FFFFFF; border-color: #EFE9E5; }

/* ── ライト/ウォームテーマ: ハードコード暗色を上書き (v1.68.9) ── */
body.theme-light #ap-search, body.theme-light #cu-search,
body.theme-light #sf-search, body.theme-light #os-search { background: #ffffff !important; color: #111827 !important; }
body.theme-light #ap-summary-bar, body.theme-light #cu-summary-bar,
body.theme-light #sf-summary-bar, body.theme-light #os-summary-bar { background: #f8f9fb !important; }
body.theme-light #ap-filter-bar .filter-select,
body.theme-light #cu-filter-bar .filter-select,
body.theme-light #sf-filter-role, body.theme-light #os-filter-field { background: #ffffff !important; color: rgba(0,0,0,0.52) !important; }
body.theme-light .em-field-input { color: #111827 !important; }
body.theme-light .em-tab-btn.active { color: #0284c7 !important; }
body.theme-light .em-section-title,
body.theme-light #em-edit-modal .em-section-title,
body.theme-light #em-edit-modal #em-search-section > .em-section-title { color: rgba(0,0,0,0.50) !important; }
body.theme-light .em-field-input[readonly], body.theme-light .em-field-input.calc-out,
body.theme-light #em-edit-modal .em-field-input[readonly],
body.theme-light #em-edit-modal .em-field-input.calc-out { background: rgba(0,0,0,0.04) !important; color: rgba(0,0,0,0.36) !important; }
body.theme-light .em-field-input:focus { box-shadow: 0 0 0 2.5px rgba(2,132,199,0.15) !important; }

body.theme-warm #ap-search, body.theme-warm #cu-search,
body.theme-warm #sf-search, body.theme-warm #os-search { background: #FFFFFF !important; color: #3D3531 !important; }
body.theme-warm #ap-summary-bar, body.theme-warm #cu-summary-bar,
body.theme-warm #sf-summary-bar, body.theme-warm #os-summary-bar { background: #F8F6F4 !important; }
body.theme-warm #ap-filter-bar .filter-select,
body.theme-warm #cu-filter-bar .filter-select,
body.theme-warm #sf-filter-role, body.theme-warm #os-filter-field { background: #FFFFFF !important; color: rgba(61,53,49,0.60) !important; }
body.theme-warm .em-field-input { color: #3D3531 !important; }
body.theme-warm .em-tab-btn.active { color: #E07A5F !important; }
body.theme-warm .em-section-title,
body.theme-warm #em-edit-modal .em-section-title,
body.theme-warm #em-edit-modal #em-search-section > .em-section-title { color: rgba(61,53,49,0.50) !important; }
body.theme-warm .em-field-input[readonly], body.theme-warm .em-field-input.calc-out,
body.theme-warm #em-edit-modal .em-field-input[readonly],
body.theme-warm #em-edit-modal .em-field-input.calc-out { background: rgba(61,53,49,0.06) !important; color: rgba(61,53,49,0.40) !important; }
body.theme-warm .em-field-input:focus { border-color: #E07A5F !important; box-shadow: 0 0 0 2.5px rgba(224,122,95,0.18) !important; }

/* ── ライトテーマ: 管理パネル (adm-*) ── */
body.theme-light .adm-tabs { border-bottom-color: #dde0e6; }
body.theme-light .adm-tab { color: rgba(0,0,0,0.45); }
body.theme-light .adm-tab:hover:not(.active) { color: rgba(0,0,0,0.75); }
body.theme-light .adm-chat-wrap { border-color: #dde0e6; }
body.theme-light .adm-thread-col { background: #f8f9fb; border-right-color: #dde0e6; }
body.theme-light .adm-thread-item:hover { background: rgba(0,0,0,0.04); }
body.theme-light .adm-thread-item.active { background: rgba(99,102,241,0.10); }
body.theme-light .adm-thread-name { color: #111827; }
body.theme-light .adm-thread-item.unread .adm-thread-name { color: #111827; }
body.theme-light .adm-thread-preview { color: rgba(0,0,0,0.42); }
body.theme-light .adm-thread-date { color: rgba(0,0,0,0.30); }
body.theme-light .adm-toolbar { border-bottom-color: #dde0e6; border-color: #dde0e6; }
body.theme-light .adm-loading { color: rgba(0,0,0,0.35); }
body.theme-light .adm-select { background: #ffffff; border-color: #dde0e6; color: rgba(0,0,0,0.70); }
body.theme-light .adm-btn-refresh { background: #f1f3f6; border-color: #dde0e6; color: rgba(0,0,0,0.55); }
body.theme-light .adm-btn-refresh:hover { background: #e8eaee; }
body.theme-light .adm-msg-placeholder { color: rgba(0,0,0,0.30); }
body.theme-light .adm-msg-header { color: #111827; border-bottom-color: #dde0e6; }
body.theme-light .adm-msg-reply { border-top-color: #dde0e6; }
body.theme-light .adm-bubble.user { background: #f1f3f6; color: #111827; }
body.theme-light .adm-bubble-time { color: rgba(0,0,0,0.30); }
body.theme-light .adm-bubble-sender { color: rgba(0,0,0,0.38); }
body.theme-light .adm-input { background: #ffffff; border-color: #dde0e6; color: #111827; }
body.theme-light .adm-input:focus { border-color: rgba(2,132,199,0.5); }
body.theme-light .adm-filter-select,
body.theme-light .adm-filter-input { background: #ffffff; border-color: #dde0e6; color: rgba(0,0,0,0.70); }
body.theme-light .adm-filter-select:focus,
body.theme-light .adm-filter-input:focus { border-color: rgba(2,132,199,0.5); }
body.theme-light .adm-checkbox-label { color: rgba(0,0,0,0.65); }
body.theme-light .adm-ann-modal-row label { color: rgba(0,0,0,0.45); }
body.theme-light .adm-modal-close { color: rgba(0,0,0,0.40); }
body.theme-light .adm-modal-close:hover { color: rgba(0,0,0,0.80); }
body.theme-light .adm-ann-modal-box { background: #ffffff; border-color: #dde0e6; }
body.theme-light .adm-ann-card { background: rgba(0,0,0,0.03); border-left-color: #dde0e6; }
body.theme-light .adm-ann-title { color: #111827; }
body.theme-light .adm-ann-body { color: rgba(0,0,0,0.55); }
body.theme-light .adm-ann-type { color: rgba(0,0,0,0.50); }
body.theme-light .adm-ann-date { color: rgba(0,0,0,0.30); }
body.theme-light .adm-ann-badge.inactive { background: rgba(0,0,0,0.07); color: rgba(0,0,0,0.40); }
body.theme-light .adm-section-header { color: #059669; }
body.theme-light .adm-plan-color-Free { color: rgba(0,0,0,0.45); }
body.theme-light .adm-plan-badge.Free { background: rgba(0,0,0,0.06); color: rgba(0,0,0,0.55); }

/* ── ウォームテーマ: 管理パネル (adm-*) ── */
body.theme-warm .adm-tabs { border-bottom-color: #EFE9E5; }
body.theme-warm .adm-tab { color: rgba(61,53,49,0.45); }
body.theme-warm .adm-tab:hover:not(.active) { color: rgba(61,53,49,0.75); }
body.theme-warm .adm-chat-wrap { border-color: #EFE9E5; }
body.theme-warm .adm-thread-col { background: #F8F6F4; border-right-color: #EFE9E5; }
body.theme-warm .adm-thread-item:hover { background: rgba(61,53,49,0.06); }
body.theme-warm .adm-thread-item.active { background: rgba(224,122,95,0.14); }
body.theme-warm .adm-thread-name { color: #3D3531; }
body.theme-warm .adm-thread-item.unread .adm-thread-name { color: #3D3531; }
body.theme-warm .adm-thread-preview { color: rgba(61,53,49,0.42); }
body.theme-warm .adm-thread-date { color: rgba(61,53,49,0.30); }
body.theme-warm .adm-toolbar { border-bottom-color: #EFE9E5; border-color: #EFE9E5; }
body.theme-warm .adm-loading { color: rgba(61,53,49,0.35); }
body.theme-warm .adm-select { background: #FFFFFF; border-color: #EFE9E5; color: rgba(61,53,49,0.70); }
body.theme-warm .adm-btn-refresh { background: #F0EBE5; border-color: #EFE9E5; color: rgba(61,53,49,0.55); }
body.theme-warm .adm-btn-refresh:hover { background: #E5DFDB; }
body.theme-warm .adm-msg-placeholder { color: rgba(61,53,49,0.30); }
body.theme-warm .adm-msg-header { color: #3D3531; border-bottom-color: #EFE9E5; }
body.theme-warm .adm-msg-reply { border-top-color: #EFE9E5; }
body.theme-warm .adm-bubble.user { background: #F0EBE5; color: #3D3531; }
body.theme-warm .adm-bubble-time { color: rgba(61,53,49,0.30); }
body.theme-warm .adm-bubble-sender { color: rgba(61,53,49,0.38); }
body.theme-warm .adm-input { background: #FFFFFF; border-color: #EFE9E5; color: #3D3531; }
body.theme-warm .adm-input:focus { border-color: rgba(61,53,49,0.45); }
body.theme-warm .adm-filter-select,
body.theme-warm .adm-filter-input { background: #FFFFFF; border-color: #EFE9E5; color: rgba(61,53,49,0.70); }
body.theme-warm .adm-filter-select:focus,
body.theme-warm .adm-filter-input:focus { border-color: rgba(61,53,49,0.45); }
body.theme-warm .adm-checkbox-label { color: rgba(61,53,49,0.65); }
body.theme-warm .adm-ann-modal-row label { color: rgba(61,53,49,0.45); }
body.theme-warm .adm-modal-close { color: rgba(61,53,49,0.40); }
body.theme-warm .adm-modal-close:hover { color: rgba(61,53,49,0.80); }
body.theme-warm .adm-ann-modal-box { background: #FFFFFF; border-color: #EFE9E5; }
body.theme-warm .adm-ann-card { background: rgba(61,53,49,0.04); }
body.theme-warm .adm-ann-title { color: #3D3531; }
body.theme-warm .adm-ann-body { color: rgba(61,53,49,0.55); }
body.theme-warm .adm-ann-type { color: rgba(61,53,49,0.50); }
body.theme-warm .adm-ann-date { color: rgba(61,53,49,0.30); }
body.theme-warm .adm-ann-badge.inactive { background: rgba(61,53,49,0.08); color: rgba(61,53,49,0.42); }
body.theme-warm .adm-section-header { color: #5a7a5a; }
body.theme-warm .adm-plan-color-Free { color: rgba(61,53,49,0.45); }
body.theme-warm .adm-plan-badge.Free { background: rgba(61,53,49,0.07); color: rgba(61,53,49,0.55); }

/* ════════════════════════════════════════════════
   GLOBAL BADGE & TOGGLE SYSTEM
   badge-samples.html のデザイン基準に準拠:
     bg: rgba({color},0.18)  border: rgba({color},0.72)  text: rgba(255,255,255,0.88)
   ════════════════════════════════════════════════ */

/* ── ベースバッジ ── */
.badge {
  font-size: 10px; padding: 3px 12px; border-radius: 20px;
  font-weight: 500; border: 1px solid; transition: all 0.2s;
  cursor: default; display: inline-flex; align-items: center;
  white-space: nowrap;
}
.badge-off {
  background: var(--c-surface2);
  color: var(--c-text-mute);
  border-color: var(--c-border);
}
.badge-green  { background: var(--c-green-18);  color: var(--c-badge-text); border-color: var(--c-green-72); }
.badge-orange { background: var(--c-orange-18); color: var(--c-badge-text); border-color: var(--c-orange-72); }
.badge-blue   { background: var(--c-blue-18);   color: var(--c-badge-text); border-color: var(--c-blue-72); }
.badge-danger { background: var(--c-danger-18); color: var(--c-badge-text); border-color: var(--c-danger-72); }
.badge-water  { background: var(--c-water-18);  color: var(--c-badge-text); border-color: var(--c-water-72); }
.badge-purple { background: var(--c-purple-18); color: var(--c-badge-text); border-color: var(--c-purple-72); }
.badge-pink   { background: var(--c-pink-18);   color: var(--c-badge-text); border-color: var(--c-pink-72); }
.badge-cyan   { background: var(--c-cyan-18);   color: var(--c-badge-text); border-color: var(--c-cyan-72); }

/* ── スイッチ（トグル）── */
.sw { position: relative; width: 34px; height: 18px; flex-shrink: 0; display: inline-block; }
.sw input { opacity: 0; width: 0; height: 0; position: absolute; }
.sw-slider {
  position: absolute; inset: 0;
  background: var(--c-border);
  border-radius: 18px; cursor: pointer; transition: 0.2s;
}
.sw-slider::before {
  content: ''; position: absolute;
  width: 12px; height: 12px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: 0.2s;
}
.sw input:checked + .sw-slider              { background: var(--c-green); }
.sw-orange input:checked + .sw-slider       { background: var(--c-orange); }
.sw-blue input:checked + .sw-slider         { background: var(--c-blue); }
.sw-danger input:checked + .sw-slider       { background: var(--c-danger); }
.sw-water input:checked + .sw-slider        { background: var(--c-water); }
.sw-purple input:checked + .sw-slider       { background: var(--c-purple); }
.sw-pink input:checked + .sw-slider         { background: var(--c-pink); }
.sw-cyan input:checked + .sw-slider         { background: var(--c-cyan); }
.sw input:checked + .sw-slider::before      { transform: translateX(16px); }

/* ════════════════════════════════════════════════ */

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

html, body {
  height: 100%;
  overflow: hidden;
  background: transparent;
  font-family: 'Hiragino Sans', 'Yu Gothic UI', 'Helvetica Neue', sans-serif;
  /* v1.72.6: 横スクロール時にブラウザの進む/戻るナビゲーションを発火させない (全画面) */
  overscroll-behavior: none;
  overscroll-behavior-x: none;
}

#app-wrapper {
  height: 100%;
  background: var(--c-bg);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ── ロゴエリア ── */
#logo-area {
  padding: 22px 20px 16px;
  border-bottom: 1px solid var(--c-border);
  flex-shrink: 0;
}
#logo-text {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--c-text);
  line-height: 1;
}
#logo-sub {
  font-size: 9px;
  font-weight: 500;
  color: var(--c-text-sub);
  letter-spacing: 0.12em;
  margin-top: 4px;
  text-transform: uppercase;
}

/* ── ナビリスト ── */
#nav-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px 0;
}
#nav-list::-webkit-scrollbar { width: 0; }

/* ── ボタンリセット（index.htmlでは<button>を使用） ── */
button.nav-item {
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  text-align: left;
  width: 100%;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

/* ── ナビアイテム ── */
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  cursor: pointer;
  position: relative;
  transition: background 0.15s;
  border-left: 3px solid transparent;
  user-select: none;
}
.nav-item:hover {
  background: var(--c-hover);
}
.nav-item.active {
  background: var(--c-accent-dim);
  border-left-color: var(--c-accent);
}
.nav-item.active .nav-label {
  color: var(--c-text);
  font-weight: 700;
}
.nav-item.active .nav-icon svg {
  opacity: 1;
}
.nav-item.active .nav-icon svg path,
.nav-item.active .nav-icon svg rect,
.nav-item.active .nav-icon svg circle,
.nav-item.active .nav-icon svg polyline,
.nav-item.active .nav-icon svg line,
.nav-item.active .nav-icon svg polygon {
  stroke: var(--c-icon-active);
}

/* ── アイコン ── */
.nav-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-icon svg {
  width: 20px;
  height: 20px;
  opacity: 0.45;
  transition: opacity 0.15s;
}
.nav-icon svg path,
.nav-icon svg rect,
.nav-icon svg circle,
.nav-icon svg polyline,
.nav-icon svg line,
.nav-icon svg polygon {
  stroke: var(--c-text);
  transition: stroke 0.15s;
}
.nav-item:hover .nav-icon svg { opacity: 0.75; }

/* ── ラベル ── */
.nav-label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--c-text-sub);
  transition: color 0.15s;
  white-space: nowrap;
}
.nav-item:hover .nav-label { color: var(--c-text); }

/* ── ナビ 区切り線 ── */
.nav-divider {
  height: 1px;
  background: var(--c-border, #2e2c2c);
  margin: 6px 12px;
  flex-shrink: 0;
}

/* ── ナビ 新着バッジ ── */
.nav-new-badge {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
  animation: badge-pop 0.2s ease-out;
}
@keyframes badge-pop {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* ── セパレーター ── */
.nav-sep {
  height: 1px;
  background: var(--c-border);
  margin: 6px 14px;
}

/* ── 非表示制御 ── */
.nav-item.hidden { display: none; }

/* ── バージョン ── */
#footer-area {
  padding: 12px 18px;
  border-top: 1px solid var(--c-border);
  flex-shrink: 0;
}
#footer-ver {
  font-size: 9px;
  color: var(--c-text-sub);
  letter-spacing: 0.08em;
  opacity: 0.5;
}

/* ════════════════════════════════════════════════════
   ダッシュボード フレームワーク CSS
   fp-root / fp-layout / fp-sidebar / fp-main 等
   ════════════════════════════════════════════════════ */

/* ── ローディングオーバーレイ ── */
#fp-loading-overlay {
  position: fixed; inset: 0;
  background: #1e1c1c;
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
  transition: opacity 0.3s;
}
#fp-loading-overlay.hidden { opacity: 0; pointer-events: none; }
.fp-spinner {
  width: 28px; height: 28px;
  border: 3px solid rgba(255,255,255,0.1);
  border-top-color: #0CC755;
  border-radius: 50%;
  animation: fp-spin 0.7s linear infinite;
}
@keyframes fp-spin { to { transform: rotate(360deg); } }

/* ── ルート ── */
.fp-root {
  height: 100%;
  background: var(--c-bg, #0f0f0f);
  color: var(--c-text, #fff);
  font-family: 'Hiragino Sans', 'Yu Gothic UI', 'Helvetica Neue', sans-serif;
  font-size: 13px;
  overflow: hidden;
}

/* ── レイアウト（サイドバー＋メイン） ── */
.fp-layout {
  display: flex;
  height: 100%;
}

/* ── サイドバー ── */
.fp-sidebar {
  width: 220px;
  min-width: 220px;
  background: var(--c-bg, #0f0f0f);
  border-right: 1px solid var(--c-border, #383838);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
}
.fp-sidebar-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* ── サイドバー：ロゴ ── */
.fp-logo {
  padding: 8px 16px;
  border-bottom: 1px solid var(--c-border, #383838);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fp-logo-img {
  width: 160px;
  height: auto;
  display: block;
  margin: 0 auto;
}
.fp-logo-sub {
  font-size: 9px;
  font-weight: 500;
  color: var(--c-text-sub, rgba(255,255,255,0.45));
  letter-spacing: 0.12em;
  margin-top: 5px;
  text-transform: uppercase;
}

/* ── サイドバー：アクションボタン ── */
.fp-action-btns {
  padding: 12px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
.action-btn {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid;
  font-family: inherit;
  text-align: left;
  transition: background 0.15s;
}
.action-customer {
  background: rgba(12,199,85,0.12);
  border-color: rgba(12,199,85,0.4);
  color: rgba(255,255,255,0.88);
}
.action-customer:hover { background: rgba(12,199,85,0.22); }
.action-project {
  background: rgba(57,189,248,0.12);
  border-color: rgba(57,189,248,0.4);
  color: rgba(255,255,255,0.88);
}
.action-project:hover { background: rgba(57,189,248,0.22); }

/* ── サイドバー：ナビ ── */
.fp-nav {
  flex: 1;
  overflow-y: auto;
  padding: 10px 0;
}
.fp-nav::-webkit-scrollbar { width: 0; }

/* ── サイドバー：ストレージ ── */
.fp-storage {
  padding: 8px 14px 4px;
  flex-shrink: 0;
  border-top: 1px solid var(--c-border, #383838);
}

/* ── サイドバー：ユーザーエリア ── */
.fp-user-area {
  padding: 10px 16px 14px;
  border-top: 1px solid var(--c-border, #383838);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.fp-version-label {
  width: 100%;
  font-size: 10px;
  color: var(--c-text-sub, rgba(255,255,255,0.25));
  text-align: right;
  margin-top: -6px;
  letter-spacing: 0.04em;
}
.fp-user-name {
  flex: 1;
  font-size: 12px;
  color: var(--c-text-sub, rgba(255,255,255,0.45));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fp-logout-btn {
  background: transparent;
  border: 1px solid var(--c-border, #383838);
  color: var(--c-text-sub, rgba(255,255,255,0.45));
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.fp-logout-btn:hover {
  border-color: rgba(255,255,255,0.3);
  color: var(--c-text, #fff);
}

/* ── メインエリア ── */
.fp-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--c-bg, #0f0f0f);
}

/* ── ヘッダー ── */
.fp-header {
  display: flex;
  align-items: center;
  padding: 12px 24px;
  border-bottom: 1px solid var(--c-border, #383838);
  flex-shrink: 0;
  gap: 10px;
}
.fp-header-title { flex-shrink: 0; }
.fp-header-studio {
  font-size: 13px;
  font-weight: 700;
  color: var(--c-text, #fff);
}
.fp-header-staff {
  font-size: 11px;
  color: var(--c-text-sub, rgba(255,255,255,0.45));
  margin-top: 1px;
}
.fp-header-spacer { flex: 1; }
.chip {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  color: var(--c-text-sub, rgba(255,255,255,0.45));
  border: 1px solid var(--c-border, #383838);
  white-space: nowrap;
}
.chip.plan { border-color: rgba(12,199,85,0.4); color: rgba(12,199,85,0.8); }

/* ── コンテンツエリア ── */
.fp-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ── ステートパネル ── */
.state-panel {
  display: none;
  height: 100%;
}
.state-panel.active {
  display: block;
}

/* ════════════════════════════════════════════════════
   デザイン強化：角丸 ＋ 表示/操作エリア色分け
   ════════════════════════════════════════════════════ */

/* ── カード共通：角丸の統一 ── */
.panel {
  border-radius: 14px !important;
  overflow: hidden;
}

/* 内側のサブカード */
.st-card,
.ch-stat-card,
.bd-row,
.an-row,
.pj-row {
  border-radius: 10px;
}

/* ── 操作エリア（フィルター・ツールバー）── */
/* 入力・フィルターが並ぶバーエリア：やや明るい背景 */
#ap-filter-bar,
#cu-filter-bar,
#sf-filter-bar,
#os-filter-bar,
#gl-filter-bar,
#ps-filter-bar,
.ch-period-bar,
.em-footer-btns,
.filter-bar {
  background: var(--c-surface-2, #242424);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 8px;
}

/* ── 入力フィールド共通スタイル ── */
input[type="text"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
select,
textarea {
  background: var(--c-surface);
  border: 1px solid var(--c-border, #383838);
  border-radius: 8px;
  color: var(--c-text, #fff);
  transition: border-color 0.2s, background 0.2s;
}
input[type="date"],
input[type="time"] {
  color-scheme: dark;
}
input[type="text"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus {
  background: var(--c-surface);
  border-color: var(--c-accent);
  box-shadow: 0 0 0 2.5px rgba(57,189,248,0.15);
  outline: none;
}

/* ── アクションボタン共通 ── */
.action-btn,
.btn,
.btn-green,
.btn-ghost,
.btn-danger,
.em-invoice-btn {
  border-radius: 8px;
  transition: transform 0.1s, box-shadow 0.2s;
}
.action-btn:active,
.btn:active {
  transform: scale(0.97);
}

/* ── 確認モーダル角丸 ── */
#em-confirm-box,
#td-confirm-box,
#bd-confirm-box,
#an-confirm-box,
#global-confirm-box,
[id$="-confirm-box"] {
  border-radius: 14px;
}
[id$="-confirm-box"] button {
  border-radius: 8px;
}

/* ── テーブル系角丸 ── */
.td-table {
  border-radius: 10px;
  overflow: hidden;
}
.pj-row-header {
  border-radius: 8px;
  background: var(--c-surface-2, #242424);
}

/* ── チャートエリア ── */
.ch-chart-wrap {
  border-radius: 10px;
  background: var(--c-surface-2, #242424);
  padding: 16px;
}
/* 売り上げ推移グラフ 読み込み失敗時の表示 */
.ch-error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 180px;
}
.ch-error-msg {
  font-size: 13px;
  color: var(--c-text-mute, #9a9a9a);
}
.ch-retry-btn {
  padding: 7px 18px;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-accent, #c98aa0);
  background: transparent;
  border: 1px solid var(--c-accent, #c98aa0);
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.ch-retry-btn:hover {
  background: var(--c-accent, #c98aa0);
  color: #fff;
}
.ch-retry-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
.ch-stats-row {
  gap: 10px;
}
.ch-stat-card {
  background: var(--c-surface-2, #242424);
  border: 1px solid var(--c-border, #383838);
  border-radius: 10px;
}

/* ── 案件一覧の行 ── */
.pj-row {
  border-radius: 8px;
  transition: background 0.15s;
}
.pj-row:hover {
  background: rgba(255,255,255,0.04);
}

/* ── ダッシュボード統計カード ── */
.st-card {
  background: var(--c-surface-2, #242424);
  border: 1px solid var(--c-border, #383838);
  border-radius: 12px;
}

/* ── TODOセクション区分け ── */
.td-section {
  background: transparent;
  padding: 10px 0;
  margin-bottom: 0;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.td-section:last-of-type {
  border-bottom: none;
}
.td-section-header {
  border-radius: 8px;
}

/* ── 記念日カード ── */
.bd-row,
.an-row {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  padding: 10px 12px;
  margin-bottom: 6px;
}

/* ── 案件一覧ステートパネル ── */
.projects-wrap .ap-row,
.projects-wrap [class*="-row"] {
  border-radius: 8px;
}

/* ── 顧客管理・スタッフ・外注の行カード ── */
.cu-row,
.sf-row,
.os-row {
  border-radius: 10px;
  transition: background 0.15s;
}
.cu-row:hover,
.sf-row:hover,
.os-row:hover {
  background: rgba(255,255,255,0.04);
}

/* ── フィルター内のセレクト・検索 ── */
.filter-select,
[id$="-search"],
[id$="-filter-status"] {
  border-radius: 8px !important;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--c-border, #383838);
}

/* ── 編集モーダル ── */
#em-edit-modal #em-app {
  border-radius: 16px;
  overflow: hidden;
}
.em-tab-panel {
  border-radius: 10px;
}
.em-field-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.em-section-title {
  border-radius: 6px;
}

/* ── 写真セッション・ギャラリーリスト ── */
.ps-card,
.gl-card,
[class*="ps-card"],
[class*="gl-card"] {
  border-radius: 12px;
}

/* ── ストレージステータスバー ── */
.sg-bar,
[id*="sg-bar"] {
  border-radius: 6px;
  overflow: hidden;
}
.sg-bar-fill,
[id*="sg-bar-fill"],
[class*="sg-bar-fill"] {
  border-radius: 6px;
}

/* ── 設定カード ── */
.settings-card,
[class*="settings-card"],
.card-icon-area {
  border-radius: 12px;
}

/* ── kzToast ── */
#kz-toast {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  background: #2a2a2a;
  color: #ffffff;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid #383838;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: min(90vw, 360px);
  white-space: normal;
  text-align: center;
}
#kz-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#kz-toast.kzt-success { border-color: rgba(12,199,85,0.72); background: #1a2a1e; }
#kz-toast.kzt-error   { border-color: rgba(239,68,68,0.72);  background: #2a1a1a; }
#kzt-icon { flex-shrink: 0; display: flex; align-items: center; }
#kzt-icon:empty { display: none; }

/* ── kzConfirm ── */
#kz-confirm {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 100000;
  align-items: center;
  justify-content: center;
}
#kz-confirm.show { display: flex; }
#kz-confirm-box {
  background: #1c1c1c;
  border-radius: 12px;
  padding: 24px;
  width: min(92vw, 400px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  border: 1px solid #383838;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#kz-confirm-title { font-size: 15px; font-weight: 700; color: #ffffff; }
#kz-confirm-msg   { font-size: 13px; color: rgba(255,255,255,0.55); line-height: 1.6; white-space: pre-line; }
#kz-confirm-btns  { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }

/* shared button classes (used by kzConfirm AND td-modal) */
.kz-btn-cancel {
  padding: 8px 18px;
  border: 1px solid #383838;
  border-radius: 8px;
  background: transparent;
  color: rgba(255,255,255,0.55);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, color 0.15s;
}
.kz-btn-cancel:hover { border-color: rgba(255,255,255,0.22); color: #ffffff; }
.kz-btn-ok {
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  border: 1px solid;
  transition: opacity 0.15s;
}
.kz-btn-ok:hover { opacity: 0.82; }
.kz-ok-default { border-color: rgba(57,189,248,0.72);  background: rgba(57,189,248,0.12);  color: #ffffff; }
.kz-ok-warn    { border-color: rgba(148,163,184,0.72); background: rgba(148,163,184,0.18); color: #ffffff; }
.kz-ok-danger  { border-color: rgba(239,68,68,0.72);   background: rgba(239,68,68,0.18);   color: #ffffff; }

/* ── td-modal-overlay (redesigned) ── */
#td-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 8000;
  align-items: center;
  justify-content: center;
}
#td-modal-overlay.show { display: flex; }
#td-modal-box {
  background: #1c1c1c;
  border-radius: 12px;
  padding: 24px;
  width: min(92vw, 400px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  border: 1px solid #383838;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
#td-modal-desc { font-size: 14px; font-weight: 600; color: #ffffff; line-height: 1.5; }
.td-modal-label { font-size: 12px; color: rgba(255,255,255,0.55); display: block; margin-bottom: 6px; }
#td-modal-status {
  width: 100%;
  background: #242424;
  border: 1px solid #383838;
  border-radius: 8px;
  color: #ffffff;
  font-size: 13px;
  padding: 8px 10px;
  font-family: inherit;
  cursor: pointer;
}
#td-modal-btns { display: flex; gap: 8px; justify-content: flex-end; }

/* ──────────────────────────────────────
   dashboard.html
   ────────────────────────────────────── */

  :root {
    --c-bg: #0f0f0f;
    --c-base: #0a0a0a;
    --c-surface: #1c1c1c;
    --c-surface-2: #242424;
    --c-border: #383838;
    --c-border-soft: #1e1e1e;
    --c-orange:    #F59E0B;
    --c-blue:      #39BDF8;
    --c-green:     #0CC755;
    --c-text:      #FFFFFF;
    --c-text-sub:  rgba(255,255,255,0.55);
    --c-text-mute: rgba(255,255,255,0.35);
    --c-danger:    #ef4444;
    --radius:      12px;
    --shadow:      0 10px 28px rgba(0,0,0,.22);
  }
  body::-webkit-scrollbar { width: 4px; }
  body::-webkit-scrollbar-track { background: transparent; }
  body::-webkit-scrollbar-thumb { background: #555; border-radius: 4px; }

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     GRID LAYOUT
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  .dashboard-grid {
    display: grid;
    grid-template-columns: 3fr 2fr;
    grid-template-rows: auto auto auto auto;
    gap: 16px;
    width: 100%;
    padding: 20px;
  }
  .grid-stats    { grid-column: 1 / 2; grid-row: 1; align-self: start; }
  .grid-todo     { grid-column: 2 / 3; grid-row: 1; }
  .grid-projects { grid-column: 1 / -1; grid-row: 2; }
  .grid-chart    { grid-column: 1 / -1; grid-row: 3; }
  .grid-birthday    { grid-column: 1 / 2; grid-row: 4; }
  .grid-anniversary { grid-column: 2 / 3; grid-row: 4; }

  .panel {
    background: var(--c-surface);
    border-radius: var(--radius);
    border: 1px solid var(--c-border);
    box-shadow: var(--shadow);
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .grid-stats {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
  }
  .grid-todo,
  .grid-projects,
  .grid-chart,
  .grid-birthday,
  .grid-anniversary {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px;
  }
  .panel-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--c-text-mute);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 12px;
    padding: 0 2px;
  }

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     SECTION 1: STATS (st-)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  #st-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    width: 100%;
  }
  .st-card {
    background: var(--c-surface);
    border-radius: var(--radius);
    border: 1px solid var(--c-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 12px;
    gap: 6px;
  }
  .st-card-label {
    font-size: 12px;
    color: var(--c-text-sub);
    font-weight: 500;
    text-align: center;
    letter-spacing: 0.04em;
  }
  .st-card-value {
    font-size: clamp(28px, 3.5vw, 48px);
    font-weight: 300;
    color: var(--c-text);
    line-height: 1;
    letter-spacing: -0.02em;
    transition: opacity 0.3s;
  }
  .st-card-value.loading { opacity: 0.2; }
  .st-card-unit {
    font-size: 11px;
    color: var(--c-text-mute);
    font-weight: 400;
  }

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     SECTION 2: TODO (td-)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  .td-section-header {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 2px 8px;
  }
  .td-section-title { font-size: 12px; font-weight: 700; color: var(--c-text-sub); letter-spacing: 0.06em; flex: 1; }
  .td-section-count {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
    color: #fff;
    flex-shrink: 0;
  }
  /* v1.73: 個人 ToDo 追加ボタン・フォーム */
  .td-btn-add {
    display: flex; align-items: center; justify-content: center;
    width: 24px; height: 24px;
    background: var(--c-accent-dim);
    border: 1px solid var(--c-accent);
    border-radius: 6px;
    color: var(--c-accent);
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
  }
  .td-btn-add:hover { background: var(--c-accent); color: #fff; }
  .td-add-form {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 4px 10px;
    border-bottom: 1px dashed var(--c-border);
    margin-bottom: 4px;
  }
  .td-add-input {
    flex: 1; min-width: 0;
    height: 28px; padding: 0 10px;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: 5px;
    color: var(--c-text);
    font-size: 12px; font-family: inherit;
    outline: none;
  }
  .td-add-input:focus { border-color: var(--c-accent); }
  .td-add-date {
    width: 120px;
    height: 28px; padding: 0 6px;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: 5px;
    color: var(--c-text);
    font-size: 11px; font-family: inherit;
  }
  .td-add-submit {
    height: 28px; padding: 0 12px;
    background: var(--c-accent);
    border: 1px solid var(--c-accent);
    color: #fff;
    border-radius: 5px;
    font-size: 11.5px; font-weight: 700; cursor: pointer; font-family: inherit;
  }
  .td-add-submit:disabled { opacity: 0.5; cursor: not-allowed; }
  .td-add-cancel {
    height: 28px; width: 28px;
    background: transparent;
    border: 1px solid var(--c-border);
    color: var(--c-text-mute);
    border-radius: 5px;
    cursor: pointer; font-family: inherit;
  }
  /* 個人 ToDo の種別バッジ・行削除ボタン */
  .td-type-personal { background: var(--c-purple); color: #fff; }
  .td-row .td-btn-delete {
    background: transparent; border: 1px solid var(--c-border);
    color: var(--c-text-mute);
    width: 22px; height: 22px; border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0; margin-left: 4px;
    transition: all 0.15s;
  }
  .td-row .td-btn-delete:hover { color: var(--c-danger); border-color: var(--c-danger); }
  .td-table {
    background: transparent;
    border-radius: 0;
    overflow: visible;
    border: none;
    /* v1.73.9: 4 件で打ち切り (1行 ≈ 48px × 4 + header ≈ 30px) */
    max-height: 220px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
  }
  .td-col-header {
    /* v1.73.7: スクロール中も固定 */
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--c-surface);
    display: flex;
    align-items: center;
    padding: 4px 2px 6px;
    gap: 8px;
    background: transparent;
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }
  .td-col-header span {
    font-size: 10px;
    font-weight: 700;
    color: var(--c-text-mute);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .td-row {
    display: flex;
    align-items: center;
    padding: 9px 2px;
    gap: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    flex-shrink: 0;
  }
  .td-row:last-child { border-bottom: none; }
  .td-row:hover { background: rgba(255,255,255,0.03); border-radius: 6px; }
  .td-col-date {
    width: 46px;
    font-size: 12px;
    color: var(--c-text-sub);
    flex-shrink: 0;
  }
  .td-col-name {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: var(--c-text);
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* v1.73.5: 列ラッパー — ヘッダーと位置を揃える */
  .td-col-type {
    width: 54px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  .td-col-status {
    width: 72px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  .td-col-action {
    width: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .td-type-badge {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 5px;
    color: #fff;
    white-space: nowrap;
    max-width: 54px;
    overflow: hidden;
    text-overflow: ellipsis;
    background: var(--c-text-mute);
  }
  .td-type-shoot    { background: var(--c-blue); }
  .td-type-deadline { background: var(--c-orange); }
  .td-days-badge {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 6px;
    color: #fff;
    white-space: nowrap;
  }
  .td-btn-complete {
    flex-shrink: 0;
    background: rgba(12,199,85,0.18);
    color: rgba(255,255,255,0.88);
    border: 1px solid rgba(12,199,85,0.72);
    border-radius: 6px;
    padding: 0 11px;
    height: 28px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
  }
  .td-btn-complete:hover { background: rgba(12,199,85,0.28); }
  /* v1.73.4: ライト/ウォームで完了ボタンを濃緑の塗りつぶしに変更し視認性を確保 */
  body.theme-light .td-btn-complete,
  body.theme-warm  .td-btn-complete {
    background: #048A5A !important;
    border-color: #048A5A !important;
    color: #FFFFFF !important;
  }
  body.theme-light .td-btn-complete:hover,
  body.theme-warm  .td-btn-complete:hover {
    background: #03735C !important;
    border-color: #03735C !important;
  }
  .td-empty-row {
    text-align: center;
    color: var(--c-text-mute);
    font-size: 12px;
    padding: 10px 2px;
  }
  .td-modal-field { display: flex; flex-direction: column; gap: 5px; }

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     SECTION 3: PROJECTS (pj-)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  #pj-list {
    display: flex;
    flex-direction: column;
    /* v1.73.7: 4 件で打ち切り (1行 ≈ 58px + header ≈ 32px) */
    max-height: 270px;
    overflow-x: auto;
    overflow-y: auto;
    border-radius: 0;
    border: none;
    background: transparent;
  }
  /* v1.73.7: ヘッダーをスクロール中も固定 */
  #pj-list .pj-row-header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--c-surface);
  }
  #pj-list::-webkit-scrollbar { width: 4px; height: 4px; }
  #pj-list::-webkit-scrollbar-track { background: transparent; }
  #pj-list::-webkit-scrollbar-thumb { background: #444; border-radius: 4px; }
  .pj-row {
    display: flex;
    align-items: center;
    padding: 10px 2px;
    gap: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    background: transparent;
    flex-shrink: 0;
    min-width: max-content;
    width: 100%;
  }
  .pj-row:last-child { border-bottom: none; }
  .pj-row:hover { background: rgba(255,255,255,0.03); border-radius: 6px; padding-left: 6px; padding-right: 6px; }
  .pj-row-header {
    display: flex;
    align-items: center;
    padding: 0 2px 8px;
    gap: 8px;
    background: transparent;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
    min-width: max-content;
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 1;
  }
  .pj-row-header span {
    font-size: 10px;
    font-weight: 700;
    color: var(--c-text-mute);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .pj-col-date {
    width: 82px;
    font-size: 13px;
    color: var(--c-text-sub);
    flex-shrink: 0;
  }
  .pj-col-category {
    flex: 1;
    font-size: 13px;
    color: var(--c-text);
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* v1.73.6: 列ラッパー (ヘッダーと位置を揃える) */
  .pj-col-status {
    width: 100px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
  }
  .pj-col-status .pj-status-select { width: 100%; min-width: 0; }
  .pj-col-actions {
    width: 128px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
  }
  .pj-status-select {
    flex-shrink: 0;
    border: none;
    border-radius: 6px;
    padding: 0 22px 0 10px;
    height: 28px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23fff' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 7px center;
    min-width: 84px;
    box-sizing: border-box;
  }
  .pj-status-select:focus { outline: none; }
  .pj-status-select option { color: #fff; background: #1a1818; font-weight: normal; }
  .pj-btn-edit {
    flex-shrink: 0;
    background: rgba(245,158,11,0.18);
    color: rgba(255,255,255,0.88);
    border: 1px solid rgba(245,158,11,0.72);
    border-radius: 6px;
    padding: 0 12px;
    height: 28px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
  }
  .pj-btn-edit:hover { background: rgba(245,158,11,0.28); }
  .pj-btn-upload {
    flex-shrink: 0;
    background: rgba(12,199,85,0.18);
    color: rgba(255,255,255,0.88);
    border: 1px solid rgba(12,199,85,0.72);
    border-radius: 6px;
    padding: 0 12px;
    height: 28px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
  }
  .pj-btn-upload:hover { background: rgba(12,199,85,0.28); }
  #pj-loadingState { text-align: center; color: var(--c-text-mute); font-size: 13px; padding: 20px 0; }
  #pj-emptyState   { display: none; text-align: center; color: var(--c-text-sub); font-size: 13px; padding: 20px 0; }

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     SECTION 4: CHART (ch-)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  .ch-period-bar {
    display: flex;
    gap: 5px;
    flex-shrink: 0;
    margin-bottom: 8px;
  }
  .ch-period-btn {
    flex: 1;
    padding: 5px 4px;
    border: 1.5px solid var(--c-border);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    color: var(--c-text-mute);
    background: transparent;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s;
    white-space: nowrap;
  }
  .ch-period-btn:hover {
    border-color: var(--c-blue);
    color: var(--c-blue);
  }
  .ch-period-btn.active {
    background: rgba(57,189,248,0.18);
    border-color: rgba(57,189,248,0.72);
    color: rgba(255,255,255,0.88);
  }
  .ch-stats-row {
    display: flex;
    gap: 7px;
    flex-shrink: 0;
    margin-bottom: 8px;
  }
  .ch-stat-card {
    flex: 1;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 9px 12px;
  }
  .ch-stat-label {
    font-size: 9px;
    font-weight: 700;
    color: var(--c-text-mute);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 3px;
  }
  .ch-stat-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--c-text);
    line-height: 1;
  }
  .ch-stat-sub {
    font-size: 9px;
    color: var(--c-text-sub);
    margin-top: 2px;
  }
  .ch-chart-wrap {
    position: relative;
    height: 260px;
  }
  #ch-myChart {
    width: 100% !important;
    height: 100% !important;
  }
  #ch-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--c-text-sub);
  }

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     SECTION 5: BIRTHDAY (bd-)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  #bd-loadingState { text-align: center; color: var(--c-text-sub); font-size: 13px; padding: 16px 0; }
  #bd-emptyState   { display: none; text-align: center; color: var(--c-text-mute); font-size: 13px; padding: 16px 0; }
  #bd-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 268px;
    overflow-y: auto;
    padding-right: 4px;
  }
  #bd-list::-webkit-scrollbar { width: 4px; }
  #bd-list::-webkit-scrollbar-track { background: transparent; }
  #bd-list::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 4px; }
  .bd-card {
    display: flex;
    align-items: center;
    background: var(--c-surface-2);
    border-radius: var(--radius);
    padding: 10px 12px;
    border: 1px solid var(--c-border);
    gap: 8px;
    flex-shrink: 0;
  }
  .bd-left { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
  .bd-icon { font-size: 16px; flex-shrink: 0; }
  .bd-name { font-size: 13px; font-weight: 600; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bd-date { font-size: 12px; color: var(--c-text-sub); white-space: nowrap; flex-shrink: 0; }
  .bd-badge { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; border: 1px solid; }
  .bd-badge.this-month { background: rgba(245,158,11,0.18); color: rgba(255,255,255,0.88); border-color: rgba(245,158,11,0.72); }
  .bd-badge.next-month { background: rgba(255,255,255,0.08); color: var(--c-text-sub); border-color: rgba(255,255,255,0.18); }

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     SECTION 6: ANNIVERSARY (an-)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  #an-loadingState { text-align: center; color: var(--c-text-sub); font-size: 13px; padding: 16px 0; }
  #an-emptyState   { display: none; text-align: center; color: var(--c-text-mute); font-size: 13px; padding: 16px 0; }
  #an-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 268px;
    overflow-y: auto;
    padding-right: 4px;
  }
  #an-list::-webkit-scrollbar { width: 4px; }
  #an-list::-webkit-scrollbar-track { background: transparent; }
  #an-list::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 4px; }
  .an-card {
    display: flex;
    align-items: center;
    background: var(--c-surface-2);
    border-radius: var(--radius);
    padding: 10px 12px;
    border: 1px solid var(--c-border);
    gap: 8px;
    flex-shrink: 0;
  }
  .an-left { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
  .an-icon { font-size: 16px; flex-shrink: 0; }
  .an-name { font-size: 13px; font-weight: 600; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .an-date { font-size: 12px; color: var(--c-text-sub); white-space: nowrap; flex-shrink: 0; }
  .an-category {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    background: rgba(57,189,248,0.18);
    color: rgba(255,255,255,0.88);
    border: 1px solid rgba(57,189,248,0.72);
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     SHARED: LINE BUTTON
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  .btn-line {
    flex-shrink: 0;
    background: rgba(12,199,85,0.18);
    color: rgba(255,255,255,0.88);
    border: 1px solid rgba(12,199,85,0.72);
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
  }
  .btn-line:hover { background: rgba(12,199,85,0.28); }
  .btn-line.no-line { background: var(--c-surface); border-color: var(--c-border); color: var(--c-text-mute); cursor: default; }
  .btn-line.no-line:hover { background: var(--c-surface); }


  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     EDIT MODAL (em-)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  #em-edit-modal {
    display: none; position: fixed; inset: 0; z-index: 9000;
    background: rgba(0,0,0,0.55); align-items: center; justify-content: center;
  }
  #em-edit-modal.open { display: flex; }
  /* ── モーダルローディングオーバーレイ ── */
  #em-loading-overlay {
    display: none; position: absolute; inset: 0; z-index: 9999;
    background: rgba(30,28,28,0.55); backdrop-filter: blur(2px);
    align-items: center; justify-content: center;
    flex-direction: column; gap: 12px; border-radius: var(--radius);
  }
  #em-edit-modal.loading #em-loading-overlay { display: flex; }
  #em-loading-overlay .em-spinner {
    width: 32px; height: 32px; border: 3px solid rgba(255,255,255,0.15);
    border-top-color: var(--c-green, #0CC755); border-radius: 50%;
    animation: em-spin 0.6s linear infinite;
  }
  #em-loading-overlay .em-loading-text {
    font-size: 12px; color: var(--c-text-sub, rgba(255,255,255,0.45));
  }
  @keyframes em-spin { to { transform: rotate(360deg); } }
  #em-app {
    background: var(--c-surface); border-radius: var(--radius); border: 1px solid var(--c-border);
    overflow: hidden; width: 90%; max-width: 640px; height: 85%; max-height: 720px;
    display: flex; flex-direction: column; box-shadow: var(--shadow);
  }
  #em-header { background: var(--c-surface-2); color: var(--c-text); padding: 16px 20px 13px; flex-shrink: 0; cursor: grab; user-select: none; }
  #em-header:active { cursor: grabbing; }
  #em-header-title { font-size: 15px; font-weight: 700; letter-spacing: 0.02em; }
  #em-header-sub { font-size: 11px; opacity: 0.55; margin-top: 3px; letter-spacing: 0.04em; }
  /* 顧客タイプバッジ（法人/個人事業主） */
  .em-cust-type-badge { display: inline-block; margin-top: 6px; padding: 2px 9px; border-radius: 10px; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; }
  .em-cust-type-corporate { background: var(--c-blue); color: #fff; }
  .em-cust-type-sole_proprietor { background: var(--c-orange); color: #fff; }
  #em-tab-bar { background: var(--c-bg); border-bottom: 2px solid var(--c-border); display: flex; flex-shrink: 0; }
  .em-tab-btn { flex: 1; padding: 11px 4px 9px; background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--c-text-sub); font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer; letter-spacing: 0.03em; transition: color 0.15s, border-color 0.15s; white-space: nowrap; }
  .em-tab-btn:hover { color: var(--c-text); }
  .em-tab-btn.active { color: rgba(255,255,255,0.88); border-bottom-color: var(--c-accent); }
  .em-tab-btn.tab-disabled { opacity: 0.3; pointer-events: none; }
  #em-form-wrap { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px; }
  #em-form-wrap::-webkit-scrollbar { width: 4px; }
  #em-form-wrap::-webkit-scrollbar-thumb { background: #555; border-radius: 4px; }
  .em-tab-panel { display: none; flex-direction: column; gap: 10px; }
  .em-tab-panel.active { display: flex; }
  .em-section-title { font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.88); letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 10px; background: var(--c-accent-18); border-left: 3px solid var(--c-accent-72); border-radius: 0 6px 6px 0; margin-top: 6px; }
  .em-field-group { background: transparent; border: none; padding: 0; border-radius: 0; display: flex; flex-direction: column; gap: 12px; }
  .em-field-row { display: flex; flex-direction: column; gap: 4px; }
  .em-row-2col { flex-direction: row; gap: 10px; }
  .em-row-2col > .em-field-row { flex: 1; }
  .em-row-3col { flex-direction: row; gap: 8px; }
  .em-row-3col > .em-field-row { flex: 1; }
  .em-field-label { font-size: 11px; font-weight: 700; color: var(--c-text-sub); }
  .em-required { color: var(--c-danger); margin-left: 2px; }
  .em-field-input { width: 100%; padding: 9px 11px; height: 40px; box-sizing: border-box; font-size: 13.5px; border: 1px solid var(--c-border); border-radius: 7px; outline: none; color: #FFFFFF; background: var(--c-surface); transition: border-color 0.18s, box-shadow 0.18s; font-family: inherit; -webkit-appearance: none; }
  .em-field-input:focus { border-color: var(--c-accent); box-shadow: 0 0 0 2.5px rgba(57,189,248,0.15); }
  .em-field-input[readonly] { background: rgba(60,58,58,0.5); color: var(--c-text-mute); cursor: default; border-color: var(--c-border); }
  .em-field-input.calc-out { background: rgba(60,58,58,0.5); color: var(--c-text-mute); font-weight: 700; border-color: var(--c-border); }
  textarea.em-field-input { height: auto; resize: vertical; min-height: 72px; line-height: 1.65; }
  select.em-field-input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23888888' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; cursor: pointer; }
  input[type="number"].em-field-input { text-align: right; -moz-appearance: textfield; }
  input[type="number"].em-field-input::-webkit-outer-spin-button,
  input[type="number"].em-field-input::-webkit-inner-spin-button { -webkit-appearance: none; }
  .em-datetime-row { display: flex; gap: 8px; }
  .em-datetime-row > .em-field-input:first-child { flex: 1.6; }
  .em-datetime-row > .em-field-input:last-child { flex: 1; }
  /* DatePicker/TimePicker トリガーボタンの flex 割り当て */
  .em-datetime-row > .dp-trigger { flex: 1.6 !important; min-width: 0; }
  .em-datetime-row > .tp-trigger { flex: 1 !important; min-width: 0; }
  #em-search-section { display: none; }
  .em-zip-row { display: flex; gap: 8px; align-items: stretch; }
  .em-zip-row .em-field-input { flex: 1; }
  #em-btnZip { flex-shrink: 0; padding: 9px 13px; background: rgba(12,199,85,0.18); color: rgba(255,255,255,0.88); border: 1px solid rgba(12,199,85,0.72); border-radius: 7px; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; font-family: inherit; letter-spacing: 0.03em; transition: background 0.15s; }
  #em-btnZip:hover { background: rgba(12,199,85,0.28); }
  #em-btnAnketa { width: 100%; padding: 11px; background: rgba(245,158,11,0.18); color: var(--c-orange); border: none; border-radius: 8px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; letter-spacing: 0.02em; transition: background 0.15s; }
  #em-btnAnketa:hover { background: rgba(245,158,11,0.25); }
  .em-tax-toggle { display: flex; gap: 6px; }
  .em-tax-radio-label { display: flex; align-items: center; gap: 5px; padding: 5px 14px; border-radius: 20px; border: 1px solid var(--c-border); background: var(--c-bg); color: var(--c-text); font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; user-select: none; }
  .em-tax-radio-label input[type="radio"] { display: none; }
  .em-tax-radio-label.selected { background: rgba(12,199,85,0.18); border-color: rgba(12,199,85,0.72); color: rgba(255,255,255,0.88); }
  .em-tax-breakdown-row { display: flex; justify-content: flex-end; gap: 14px; font-size: 11px; color: var(--c-text-sub); margin-top: 2px; margin-bottom: 4px; padding-right: 2px; }
  .em-tax-breakdown-row strong { color: var(--c-text); font-weight: 700; }
  .em-invoice-action-area { margin-top: 6px; padding-top: 12px; border-top: 1px dashed var(--c-border); display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
  .em-invoice-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: none; border-radius: 10px; background: rgba(245,158,11,0.18); color: var(--c-orange); font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; transition: background 0.15s, color 0.15s; white-space: nowrap; }
  .em-invoice-btn:hover { background: rgba(245,158,11,0.28); color: #fbbf24; }
  .em-invoice-btn.receipt { background: rgba(12,199,85,0.15); color: var(--c-green); }
  .em-invoice-btn.receipt:hover { background: rgba(12,199,85,0.25); color: #34d399; }
  .em-invoice-btn.estimate { background: rgba(99,102,241,0.15); color: #a5b4fc; }
  .em-invoice-btn.estimate:hover { background: rgba(99,102,241,0.25); color: #c7d2fe; }
  .em-tab-empty-msg { text-align: center; padding: 32px 16px; color: var(--c-text-sub); font-size: 13px; line-height: 1.8; }
  #em-footer { padding: 12px 16px; background: var(--c-surface-2); border-top: 1px solid var(--c-border); display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
  .em-footer-btns { display: flex; gap: 10px; }
  #em-btnCancel { flex: 1; padding: 11px; border: 1px solid var(--c-border); border-radius: 10px; background: var(--c-surface); color: rgba(255,255,255,0.55); font-size: 13.5px; font-weight: 600; cursor: pointer; font-family: inherit; }
  #em-btnCancel:hover { background: rgba(60,58,58,0.8); }
  #em-btnSave { flex: 2; padding: 11px; border: 1px solid rgba(57,189,248,0.72); border-radius: 10px; background: rgba(57,189,248,0.18); color: rgba(255,255,255,0.88); font-size: 13.5px; font-weight: 700; cursor: pointer; font-family: inherit; letter-spacing: 0.03em; }
  #em-btnSave:hover { background: rgba(57,189,248,0.28); }
  #em-btnSave:disabled { background: var(--c-surface); border-color: var(--c-border); cursor: default; color: var(--c-text-mute); }
  .em-saved-toast { display: none; text-align: center; color: rgba(255,255,255,0.88); background: rgba(12,199,85,0.18); border: 1px solid rgba(12,199,85,0.72); border-radius: 8px; font-size: 13px; font-weight: 600; padding: 8px 12px; animation: emFadeUp 0.3s ease; }
  @keyframes emFadeUp { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
  .em-error-msg { font-size: 11px; color: var(--c-danger); margin-top: 2px; display: none; }
  .em-field-input.invalid { border-color: var(--c-danger); box-shadow: 0 0 0 2px rgba(239,68,68,0.2); }
  .em-option-check-list { display: flex; flex-direction: column; gap: 6px; width: 100%; }
  .em-option-check-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--c-border); border-radius: 8px; background: var(--c-bg); cursor: pointer; transition: background 0.12s, border-color 0.12s; font-size: 13.5px; user-select: none; color: var(--c-text); }
  .em-option-check-item:hover { background: rgba(60,58,58,0.8); }
  .em-option-check-item.checked { border-color: rgba(12,199,85,0.72); background: rgba(12,199,85,0.18); }
  .em-option-check-item input[type="checkbox"] { display: none; }
  .em-oci-box { width: 18px; height: 18px; border: 2px solid var(--c-border); border-radius: 4px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 12px; font-weight: 700; color: #fff; transition: background 0.12s, border-color 0.12s; }
  .em-option-check-item.checked .em-oci-box { background: rgba(12,199,85,0.18); border-color: rgba(12,199,85,0.72); }
  .em-option-check-item.checked .em-oci-box::after { content: '✓'; font-size: 13px; font-weight: 700; color: rgba(12,199,85,1); }
  .em-oci-name { flex: 1; }
  .em-oci-price { font-size: 12px; color: var(--c-text-mute); white-space: nowrap; }
  .em-option-check-item.checked .em-oci-price { color: rgba(255,255,255,0.88); font-weight: 700; }
  .em-option-empty-msg { font-size: 12px; color: var(--c-text-mute); padding: 10px 0; text-align: center; }
  .em-option-custom-wrap { display: flex; gap: 8px; align-items: center; }
  .em-option-custom-wrap .em-field-input:first-child { flex: 1; }
  .em-option-custom-wrap .em-ocp-price { width: 110px; flex-shrink: 0; }
  /* 請求明細行エディタ */
  .em-inv-items-list { display: flex; flex-direction: column; gap: 6px; }
  .em-inv-item-row { display: flex; gap: 6px; align-items: center; }
  .em-inv-item-row .em-inv-name { flex: 1; min-width: 0; }
  .em-inv-item-row .em-inv-amount { width: 96px; flex-shrink: 0; }
  .em-inv-exempt { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--c-text-sub); white-space: nowrap; cursor: pointer; user-select: none; }
  .em-inv-exempt input { margin: 0; cursor: pointer; }
  .em-inv-del { flex-shrink: 0; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--c-border); border-radius: 6px; background: var(--c-bg); color: var(--c-text-sub); cursor: pointer; padding: 0; }
  .em-inv-del:hover { color: var(--c-danger); border-color: var(--c-danger); }
  .em-inv-additem { margin-top: 6px; padding: 6px 12px; font-size: 12px; font-weight: 600; border: 1px dashed var(--c-border); border-radius: 6px; background: var(--c-bg); color: var(--c-text-sub); cursor: pointer; }
  .em-inv-additem:hover { color: var(--c-text); border-color: var(--c-text-sub); }
  .em-dp-trigger { text-align: left; cursor: pointer; display: flex; align-items: center; justify-content: space-between; font-weight: 400; color: var(--c-text); }
  .em-dp-trigger::after { content: '▾'; color: var(--c-text-sub); font-size: 11px; flex-shrink: 0; margin-left: 4px; }
  .em-dp-trigger.dp-empty { color: var(--c-text-mute); }

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     DASHBOARD OVERRIDE — 他セクションCSSの上書き防止
     後続コンポーネントCSS（projects.html等）が同一クラスを
     再定義するため、親セレクターで詳細度を上げて確実に適用する
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

  /* TODO パネル内の td-table / table（両クラス対応）をフラット化 */
  /* v1.73.9: 4 件で打ち切りスクロール対応 */
  .grid-todo .td-table,
  .grid-todo .table {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    overflow-x: visible !important;
    overflow-y: auto !important;
    max-height: 220px !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .grid-todo .td-col-header,
  .grid-todo .col-header {
    background: var(--c-surface) !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    border-top: none !important;
    padding: 4px 2px 6px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
  }
  body.theme-warm  .grid-todo .td-col-header,
  body.theme-light .grid-todo .td-col-header { background: #FFFFFF !important; }
  .grid-todo .td-row,
  .grid-todo .row {
    background: transparent !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    padding: 9px 2px !important;
  }
  .grid-todo .td-row:last-child,
  .grid-todo .row:last-child { border-bottom: none !important; }
  .grid-todo .td-empty-row,
  .grid-todo .empty-row {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 10px 2px !important;
    color: var(--c-text-mute) !important;
    font-size: 12px !important;
    text-align: center !important;
  }

  /* プロジェクト一覧パネル内の #pj-list をフラット化 */
  .grid-projects #pj-list {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .grid-projects .pj-row {
    background: transparent !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    padding: 10px 2px !important;
  }
  .grid-projects .pj-row:last-child { border-bottom: none !important; }
  .grid-projects .pj-row:hover {
    background: rgba(255,255,255,0.03) !important;
    border-radius: 6px !important;
  }
  .grid-projects .pj-row-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: 0 !important;
    padding: 0 2px 8px !important;
  }

/* ──────────────────────────────────────
   customers.html
   ────────────────────────────────────── */

  :root {
    --c-bg: #0f0f0f;
    --c-base: #0a0a0a;
    --c-surface: #1c1c1c;
    --c-surface-2: #242424;
    --c-border: #383838;
    --c-border-soft: #1e1e1e;
    --c-orange:    #F59E0B;
    --c-blue:      #39BDF8;
    --c-green:     #0CC755;
    --c-text:      #FFFFFF;
    --c-text-sub:  rgba(255,255,255,0.55);
    --c-text-mute: rgba(255,255,255,0.35);
    --c-danger:    #ef4444;
    --radius:      12px;
    --shadow:      0 10px 28px rgba(0,0,0,.22);
  }

  .customers-wrap {
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* ── フィルターバー ── */
  #cu-filter-bar {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
  }
  #cu-search {
    flex: 1;
    min-width: 140px;
    padding: 7px 14px;
    border: 1px solid var(--c-border);
    border-radius: 20px;
    font-size: 13px;
    outline: none;
    background: var(--c-surface-2);
    color: var(--c-text);
    font-family: inherit;
    transition: border-color 0.15s;
  }
  #cu-search::placeholder { color: var(--c-text-mute); }
  #cu-search:focus { border-color: var(--c-accent); background: var(--c-surface); }
  .filter-select {
    padding: 7px 10px;
    border: 1px solid var(--c-border);
    border-radius: 20px;
    font-size: 12px;
    background: var(--c-surface-2);
    color: rgba(255,255,255,0.88);
    outline: none;
    cursor: pointer;
    max-width: 130px;
    font-family: inherit;
    transition: border-color 0.15s;
  }
  .filter-select:hover { border-color: rgba(255,255,255,0.35); }
  #cu-btn-deleted-toggle {
    padding: 7px 12px;
    border: 1px solid var(--c-border);
    border-radius: 20px;
    font-size: 12px;
    background: var(--c-surface-2);
    color: rgba(255,255,255,0.55);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    font-family: inherit;
    transition: all 0.15s;
  }
  #cu-btn-deleted-toggle:hover { border-color: rgba(255,255,255,0.22); color: rgba(255,255,255,0.88); }
  #cu-btn-deleted-toggle.active {
    background: rgba(239,68,68,0.18);
    color: rgba(255,255,255,0.88);
    border-color: rgba(239,68,68,0.72);
  }
  #cu-btn-bulk-delete {
    display: none;
    padding: 7px 12px;
    border: 1px solid rgba(239,68,68,0.72);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    background: rgba(239,68,68,0.18);
    color: rgba(255,255,255,0.88);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    font-family: inherit;
  }
  #cu-btn-bulk-delete:hover { background: rgba(239,68,68,0.28); }

  /* ── サマリー ── */
  #cu-summary-bar {
    font-size: 11px;
    color: var(--c-text-mute);
    margin-bottom: 6px;
    padding: 0 4px;
    flex-shrink: 0;
  }

  /* ── ローディング・空状態 ── */
  #cu-loading-state { text-align: center; color: var(--c-text-sub); font-size: 13px; padding: 30px 0; }
  #cu-empty-state   { display: none; text-align: center; color: var(--c-text-mute); font-size: 13px; padding: 30px 0; }

  /* ── リストラッパー（丸角・影・ヘッダー固定） ── */
  #cu-list-wrap {
    flex: 1;
    min-height: 0;
    display: none;
    flex-direction: column;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--c-border);
    box-shadow: var(--shadow);
    background: var(--c-surface);
  }

  /* ── カラムヘッダー ── */
  #cu-list-header {
    display: grid;
    grid-template-columns: 68px minmax(0,1fr) 58px minmax(0,90px) auto;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid var(--c-border);
    flex-shrink: 0;
  }
  #cu-list-header .hdr {
    font-size: 11px;
    font-weight: 700;
    color: var(--c-text-sub);
    letter-spacing: 0.04em;
    white-space: nowrap;
  }

  /* ── スクロールエリア ── */
  #cu-customer-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }
  #cu-customer-list::-webkit-scrollbar { width: 4px; }
  #cu-customer-list::-webkit-scrollbar-track { background: transparent; }
  #cu-customer-list::-webkit-scrollbar-thumb { background: #555; border-radius: 4px; }

  /* ── 顧客行 ── */
  .customer-row {
    display: grid;
    grid-template-columns: 68px minmax(0,1fr) 58px minmax(0,90px) auto;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--c-border);
    align-items: center;
    transition: background 0.12s;
  }
  .customer-row:last-child { border-bottom: none; }
  .customer-row:hover { background: rgba(255,255,255,0.04); }
  .customer-row.deleted { opacity: 0.5; }

  .customer-no { font-size: 11px; color: var(--c-text-mute); font-family: monospace; white-space: nowrap; }
  .customer-names { min-width: 0; }
  .name1 { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; color: var(--c-text); }
  .name2 { font-size: 11px; color: var(--c-text-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; margin-top: 1px; }

  .line-badge { font-size: 10px; font-weight: 700; padding: 3px 7px; border-radius: 20px; white-space: nowrap; text-align: center; border: 1px solid; }
  .line-badge.connected     { background: rgba(12,199,85,0.18); color: rgba(255,255,255,0.88); border-color: rgba(12,199,85,0.72); }
  .line-badge.not-connected { background: var(--c-surface); color: var(--c-text-mute); border-color: var(--c-border); }

  .latest-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .latest-category { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 20px; background: rgba(57,189,248,0.18); color: rgba(255,255,255,0.88); border: 1px solid rgba(57,189,248,0.72); white-space: nowrap; display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .latest-date { font-size: 11px; color: var(--c-text-sub); white-space: nowrap; }
  .no-project  { font-size: 11px; color: var(--c-text-mute); }

  .actions { display: flex; gap: 4px; flex-shrink: 0; }
  .btn-action { background: none; border: 1px solid; border-radius: 20px; padding: 3px 12px; font-size: 10px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: all 0.2s; font-family: inherit; }
  .btn-action:hover { opacity: 0.8; }
  .btn-edit    { background: rgba(245,158,11,0.18); color: rgba(255,255,255,0.88); border-color: rgba(245,158,11,0.72); }
  .btn-line    { background: rgba(12,199,85,0.18);  color: rgba(255,255,255,0.88); border-color: rgba(12,199,85,0.72); }
  .btn-line.disabled { background: var(--c-surface); color: var(--c-text-mute); border-color: var(--c-border); cursor: default; }
  .btn-line.disabled:hover { opacity: 1; }
  .btn-copy    { background: rgba(57,189,248,0.18); color: rgba(255,255,255,0.88); border-color: rgba(57,189,248,0.72); }
  .btn-delete  { background: rgba(239,68,68,0.18);  color: rgba(255,255,255,0.88); border-color: rgba(239,68,68,0.72); }
  .btn-restore  { background: rgba(12,199,85,0.18); color: rgba(255,255,255,0.88); border-color: rgba(12,199,85,0.72); }
  .btn-perm-del { background: rgba(239,68,68,0.18); color: rgba(255,255,255,0.88); border-color: rgba(239,68,68,0.72); }

  /* ── モーダル共通 ── */
  .overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 100;
    align-items: center;
    justify-content: center;
  }
  .overlay.show { display: flex; }
  .modal-box {
    background: var(--c-surface);
    border-radius: var(--radius);
    padding: 24px;
    width: min(92vw, 420px);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: 90vh;
    overflow-y: auto;
    border: 1px solid var(--c-border);
  }
  .modal-title { font-size: 15px; font-weight: 700; color: var(--c-text); }
  .modal-subtitle { font-size: 12px; color: var(--c-text-sub); }

  /* 削除確認モーダル */
  .confirm-btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
  .btn-cancel { padding: 8px 18px; border: 1px solid var(--c-border); border-radius: 8px; background: var(--c-surface); color: rgba(255,255,255,0.55); font-size: 13px; cursor: pointer; font-family: inherit; transition: all 0.15s; }
  .btn-cancel:hover { border-color: rgba(255,255,255,0.22); color: rgba(255,255,255,0.88); }
  .btn-confirm-delete { padding: 8px 18px; border: 1px solid rgba(239,68,68,0.72); border-radius: 8px; background: rgba(239,68,68,0.18); color: rgba(255,255,255,0.88); font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; }
  .btn-confirm-delete:hover { background: rgba(239,68,68,0.28); }

  /* LINE送信モーダル */
  .template-list { display: flex; flex-direction: column; gap: 8px; }
  .template-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 2px solid var(--c-border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color 0.15s;
  }
  .template-item:hover { border-color: var(--c-blue); }
  .template-item.selected { border-color: var(--c-blue); background: rgba(57,189,248,0.1); }
  .template-item input[type="radio"] { margin-top: 2px; flex-shrink: 0; accent-color: var(--c-blue); }
  .template-item-body { min-width: 0; }
  .template-item-title { font-size: 13px; font-weight: 700; color: var(--c-text); margin-bottom: 3px; }
  .template-item-preview { font-size: 11px; color: var(--c-text-sub); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

  .custom-area { display: flex; flex-direction: column; gap: 6px; }
  .custom-label { font-size: 12px; font-weight: 600; color: var(--c-text); }
  #cu-custom-message {
    width: 100%;
    min-height: 80px;
    padding: 10px;
    border: 2px solid var(--c-border);
    border-radius: var(--radius);
    font-size: 13px;
    resize: vertical;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s;
    background: var(--c-surface-2);
    color: var(--c-text);
  }
  #cu-custom-message:focus { border-color: var(--c-blue); }
  #cu-custom-message.selected-input { border-color: var(--c-blue); background: rgba(57,189,248,0.1); }

  .no-template-msg { font-size: 12px; color: var(--c-text-mute); text-align: center; padding: 10px 0; }

  .line-send-btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
  .btn-send-line { padding: 8px 20px; border: 1px solid rgba(12,199,85,0.72); border-radius: 8px; background: rgba(12,199,85,0.18); color: rgba(255,255,255,0.88); font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; transition: all 0.15s; }
  .btn-send-line:hover { background: rgba(12,199,85,0.28); }
  .btn-send-line:disabled { background: var(--c-surface); color: var(--c-text-mute); border-color: var(--c-border); cursor: default; }


  /* ── モバイル ── */
  @media (max-width: 600px) {
    .customer-row {
      grid-template-columns: 1fr auto;
      grid-template-rows: auto auto auto;
      row-gap: 6px;
      column-gap: 8px;
    }
    .customer-no    { grid-column: 1; grid-row: 1; font-size: 10px; }
    .customer-names { grid-column: 1; grid-row: 2; }
    .line-badge     { grid-column: 2; grid-row: 1; align-self: start; }
    .latest-info    { grid-column: 1; grid-row: 3; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 4px; }
    .actions        { grid-column: 2; grid-row: 2 / 4; flex-direction: column; justify-content: flex-end; }
    .btn-action { padding: 3px 10px; font-size: 9px; }
    .filter-select { max-width: 110px; }
  }

  @media (min-width: 601px) and (max-width: 900px) {
    .customer-row { grid-template-columns: 64px minmax(0,1fr) 58px minmax(0,80px) auto; gap: 6px; }
  }

  /* ═══════════════════════════════════════════════
     編集モーダル — CSS Namespacing
  ═══════════════════════════════════════════════ */
  #cu-edit-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(0,0,0,0.55);
    align-items: center;
    justify-content: center;
  }
  #cu-edit-modal.open {
    display: flex;
  }
  #cu-loading-overlay {
    display: none; position: absolute; inset: 0; z-index: 9999;
    background: rgba(30,28,28,0.55); backdrop-filter: blur(2px);
    align-items: center; justify-content: center;
    flex-direction: column; gap: 12px; border-radius: var(--radius);
  }
  #cu-edit-modal.loading #cu-loading-overlay { display: flex; }
  #cu-loading-overlay .em-spinner {
    width: 32px; height: 32px; border: 3px solid rgba(255,255,255,0.15);
    border-top-color: var(--c-green, #0CC755); border-radius: 50%;
    animation: em-spin 0.6s linear infinite;
  }
  #cu-loading-overlay .em-loading-text {
    font-size: 12px; color: var(--c-text-sub, rgba(255,255,255,0.45));
  }

  #cu-edit-modal #cu-app {
    background: var(--c-surface);
    border-radius: var(--radius);
    border: 1px solid var(--c-border);
    overflow: hidden;
    width: 90%;
    max-width: 640px;
    height: 85%;
    max-height: 720px;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow);
  }

  /* ── ヘッダー ── */
  #cu-edit-modal #cu-header {
    background: var(--c-surface-2);
    color: var(--c-text);
    padding: 16px 20px 13px;
    flex-shrink: 0;
    cursor: grab;
    user-select: none;
  }
  #cu-edit-modal #cu-header:active { cursor: grabbing; }
  #cu-edit-modal #cu-header-title { font-size: 15px; font-weight: 700; letter-spacing: 0.02em; }
  #cu-edit-modal #cu-header-sub   { font-size: 11px; opacity: 0.55; margin-top: 3px; letter-spacing: 0.04em; }

  /* ── タブバー ── */
  #cu-edit-modal #cu-tab-bar {
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
    display: flex;
    flex-shrink: 0;
  }
  #cu-edit-modal .tab-btn {
    flex: 1;
    padding: 11px 4px 9px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--c-text-sub);
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    letter-spacing: 0.03em;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
  }
  #cu-edit-modal .tab-btn:hover         { color: var(--c-text); }
  #cu-edit-modal .tab-btn.active        { color: rgba(255,255,255,0.88); border-bottom-color: var(--c-accent); }
  #cu-edit-modal .tab-btn.tab-disabled  { opacity: 0.3; pointer-events: none; }

  /* ── フォーム領域 ── */
  #cu-edit-modal #cu-form-wrap {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 14px 16px;
  }
  #cu-edit-modal #cu-form-wrap::-webkit-scrollbar { width: 4px; }
  #cu-edit-modal #cu-form-wrap::-webkit-scrollbar-thumb { background: #555; border-radius: 4px; }

  /* タブパネル */
  #cu-edit-modal .tab-panel { display: none; flex-direction: column; gap: 10px; }
  #cu-edit-modal .tab-panel.active { display: flex; }

  /* ── セクションタイトル ── */
  #cu-edit-modal .section-title {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255,255,255,0.88);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 5px 10px;
    background: var(--c-accent-18);
    border-left: 3px solid var(--c-accent-72);
    border-radius: 0 6px 6px 0;
    margin-top: 6px;
  }

  /* ── フィールドグループ ── */
  #cu-edit-modal .field-group {
    background: transparent;
    border: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  #cu-edit-modal .field-row { display: flex; flex-direction: column; gap: 4px; }
  #cu-edit-modal .row-2col  { flex-direction: row; gap: 10px; }
  #cu-edit-modal .row-2col > .field-row  { flex: 1; }
  #cu-edit-modal .row-3col  { flex-direction: row; gap: 8px; }
  #cu-edit-modal .row-3col > .field-row  { flex: 1; }

  #cu-edit-modal .field-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--c-text-sub);
  }
  #cu-edit-modal .required { color: var(--c-danger); margin-left: 2px; }

  /* ── インプット共通 ── */
  #cu-edit-modal .field-input {
    width: 100%;
    padding: 9px 11px;
    height: 40px;
    box-sizing: border-box;
    font-size: 13.5px;
    border: 1px solid var(--c-border);
    border-radius: 7px;
    outline: none;
    color: #FFFFFF;
    background: var(--c-surface);
    transition: border-color 0.18s, box-shadow 0.18s;
    font-family: inherit;
    -webkit-appearance: none;
  }
  #cu-edit-modal .field-input:focus {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 2.5px rgba(57,189,248,0.15);
  }
  #cu-edit-modal .field-input[readonly] {
    background: rgba(60,58,58,0.5);
    color: var(--c-text-mute);
    cursor: default;
    border-color: var(--c-border);
  }
  #cu-edit-modal .field-input.calc-out {
    background: rgba(60,58,58,0.5);
    color: var(--c-text-mute);
    font-weight: 700;
    border-color: var(--c-border);
  }
  #cu-edit-modal textarea.field-input {
    height: auto;
    resize: vertical;
    min-height: 72px;
    line-height: 1.65;
  }
  #cu-edit-modal select.field-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23888888' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px;
    cursor: pointer;
  }
  #cu-edit-modal input[type="number"].field-input {
    text-align: right;
    -moz-appearance: textfield;
  }
  #cu-edit-modal input[type="number"].field-input::-webkit-outer-spin-button,
  #cu-edit-modal input[type="number"].field-input::-webkit-inner-spin-button { -webkit-appearance: none; }

  /* 日時インライン行 */
  #cu-edit-modal .datetime-row { display: flex; gap: 8px; }
  #cu-edit-modal .datetime-row > .field-input:first-child { flex: 1.6; }
  #cu-edit-modal .datetime-row > .field-input:last-child  { flex: 1; }

  /* ── 顧客検索セクション ── */
  #cu-edit-modal #cu-search-section { display: none; }

  /* ── 郵便番号 ── */
  #cu-edit-modal .zip-row { display: flex; gap: 8px; align-items: stretch; }
  #cu-edit-modal .zip-row .field-input { flex: 1; }
  #cu-edit-modal #cu-btnZip {
    flex-shrink: 0;
    padding: 9px 13px;
    background: var(--c-accent-18);
    color: rgba(255,255,255,0.88);
    border: 1px solid var(--c-accent-72);
    border-radius: 7px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
    letter-spacing: 0.03em;
    transition: background 0.15s;
  }
  #cu-edit-modal #cu-btnZip:hover { background: rgba(57,189,248,0.28); }

  /* ── アンケートURL ── */
  #cu-edit-modal #cu-btnAnketa {
    width: 100%;
    padding: 11px;
    background: rgba(245,158,11,0.18);
    color: var(--c-orange);
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.02em;
    transition: background 0.15s, border-color 0.15s;
  }
  #cu-edit-modal #cu-btnAnketa:hover { background: rgba(245,158,11,0.25); }

  /* ── 税区分トグル ── */
  #cu-edit-modal .tax-toggle {
    display: flex;
    gap: 6px;
  }
  #cu-edit-modal .tax-radio-label {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    border-radius: 20px;
    border: 1px solid var(--c-border);
    background: var(--c-bg);
    color: var(--c-text);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    user-select: none;
  }
  #cu-edit-modal .tax-radio-label input[type="radio"] { display: none; }
  #cu-edit-modal .tax-radio-label.selected {
    background: rgba(12,199,85,0.18);
    border-color: rgba(12,199,85,0.72);
    color: rgba(255,255,255,0.88);
  }
  #cu-edit-modal .tax-breakdown-row {
    display: flex;
    justify-content: flex-end;
    gap: 14px;
    font-size: 11px;
    color: var(--c-text-sub);
    margin-top: 2px;
    margin-bottom: 4px;
    padding-right: 2px;
  }
  #cu-edit-modal .tax-breakdown-row strong {
    color: var(--c-text);
    font-weight: 700;
  }

  /* ── 請求書発行ボタン ── */
  #cu-edit-modal .invoice-action-area {
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px dashed var(--c-border);
    display: flex;
    justify-content: flex-end;
  }
  #cu-edit-modal .invoice-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border: none;
    border-radius: var(--radius);
    background: rgba(245,158,11,0.18);
    color: var(--c-orange);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, color 0.15s;
  }
  #cu-edit-modal .invoice-btn:hover {
    background: rgba(245,158,11,0.28);
    color: #fbbf24;
  }

  /* ── new_customer 用 empty メッセージ ── */
  #cu-edit-modal .tab-empty-msg {
    text-align: center;
    padding: 32px 16px;
    color: var(--c-text-sub);
    font-size: 13px;
    line-height: 1.8;
  }

  /* ── フッター ── */
  #cu-edit-modal #cu-footer {
    padding: 12px 16px;
    background: var(--c-surface-2);
    border-top: 1px solid var(--c-border);
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
  }
  #cu-edit-modal .footer-btns { display: flex; gap: 10px; }
  #cu-edit-modal #cu-btnCancel {
    flex: 1;
    padding: 11px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-surface);
    color: rgba(255,255,255,0.55);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
  }
  #cu-edit-modal #cu-btnCancel:hover { background: rgba(60,58,58,0.8); }
  #cu-edit-modal #cu-btnSave {
    flex: 2;
    padding: 11px;
    border: 1px solid rgba(57,189,248,0.72);
    border-radius: var(--radius);
    background: rgba(57,189,248,0.18);
    color: rgba(255,255,255,0.88);
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.03em;
    transition: background 0.15s;
  }
  #cu-edit-modal #cu-btnSave:hover    { background: rgba(57,189,248,0.28); }
  #cu-edit-modal #cu-btnSave:disabled { background: var(--c-surface); border-color: var(--c-border); cursor: default; color: var(--c-text-mute); }

  #cu-edit-modal .saved-toast {
    display: none;
    text-align: center;
    color: rgba(255,255,255,0.88);
    font-size: 13px;
    font-weight: 600;
    padding: 5px 10px;
    background: rgba(12,199,85,0.18);
    border-left: 3px solid rgba(12,199,85,0.72);
    border-radius: 0 6px 6px 0;
    animation: fadeUp 0.3s ease;
  }
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ── バリデーション ── */
  #cu-edit-modal .error-msg { font-size: 11px; color: var(--c-danger); margin-top: 2px; display: none; }
  #cu-edit-modal .field-input.invalid {
    border-color: var(--c-danger);
    box-shadow: 0 0 0 2px rgba(239,68,68,0.2);
  }


  /* ═══════════════ プラン・オプション選択 ═══════════════ */
  #cu-edit-modal .option-check-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
  }
  #cu-edit-modal .option-check-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid var(--c-border);
    border-radius: 8px;
    background: var(--c-bg);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
    font-size: 13.5px;
    user-select: none;
    color: var(--c-text);
  }
  #cu-edit-modal .option-check-item:hover { background: rgba(60,58,58,0.8); }
  #cu-edit-modal .option-check-item.checked {
    border-color: rgba(12,199,85,0.72);
    background: rgba(12,199,85,0.18);
  }
  #cu-edit-modal .option-check-item input[type="checkbox"] { display: none; }
  #cu-edit-modal .oci-box {
    width: 18px;
    height: 18px;
    border: 2px solid var(--c-border);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    transition: background 0.12s, border-color 0.12s;
  }
  #cu-edit-modal .option-check-item.checked .oci-box {
    background: rgba(12,199,85,0.18);
    border-color: rgba(12,199,85,0.72);
  }
  #cu-edit-modal .option-check-item.checked .oci-box::after {
    content: '✓';
    font-size: 13px;
    font-weight: 700;
    color: rgba(12,199,85,1);
  }
  #cu-edit-modal .oci-name  { flex: 1; }
  #cu-edit-modal .oci-price { font-size: 12px; color: var(--c-text-mute); white-space: nowrap; }
  #cu-edit-modal .option-check-item.checked .oci-price { color: rgba(255,255,255,0.88); font-weight: 700; }
  #cu-edit-modal .option-empty-msg {
    font-size: 12px;
    color: var(--c-text-mute);
    padding: 10px 0;
    text-align: center;
  }
  #cu-edit-modal .option-custom-wrap {
    display: flex;
    gap: 8px;
    align-items: center;
  }
  #cu-edit-modal .option-custom-wrap .field-input:first-child { flex: 1; }
  #cu-edit-modal .option-custom-wrap .ocp-price { width: 110px; flex-shrink: 0; }

  /* ═══════════════ DatePicker (global / blue accent) v1.33.5 ═══════════════ */
  .dp-trigger {
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 400;
    color: var(--c-text);
    white-space: nowrap;
    overflow: hidden;
  }
  .dp-trigger::after {
    content: '▾';
    color: var(--c-text-sub);
    font-size: 11px;
    flex-shrink: 0;
    margin-left: 4px;
  }
  .dp-trigger.dp-empty { color: var(--c-text-mute); }
  .dp-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .dp-popup {
    background: var(--c-surface);
    border-radius: var(--radius);
    border: 1px solid var(--c-border);
    width: 308px;
    min-height: 320px;
    overflow: hidden;
    box-shadow: var(--shadow);
    animation: dpIn 0.15s ease;
    display: flex;
    flex-direction: column;
  }
  @keyframes dpIn {
    from { transform: scale(0.94); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
  }
  .dp-header {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--c-border);
  }
  .dp-hgroup {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
  }
  .dp-hgroup:last-child { justify-content: flex-end; }
  .dp-arrow {
    background: none;
    border: none;
    font-size: 18px;
    color: var(--c-text);
    cursor: pointer;
    padding: 3px 8px;
    border-radius: 6px;
    line-height: 1;
    font-family: serif;
  }
  .dp-arrow:hover { background: var(--c-hover); }
  .dp-hlabel {
    font-size: 15px;
    font-weight: 700;
    color: var(--c-text);
    min-width: 52px;
    text-align: center;
    padding: 4px 6px;
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
  }
  .dp-hlabel:hover { background: var(--c-hover); }
  /* Day grid */
  .dp-body  { padding: 10px 12px 14px; }
  .dp-wdrow { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 4px; }
  .dp-wd    { text-align: center; font-size: 12px; font-weight: 700; color: var(--c-text-sub); padding: 4px 0; }
  .dp-grid  { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
  .dp-cell  {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border-radius: 7px;
    cursor: pointer;
    background: none;
    border: none;
    font-family: inherit;
    color: var(--c-text);
  }
  .dp-cell.dp-blank { cursor: default; pointer-events: none; }
  .dp-cell:hover:not(.dp-blank):not(.dp-sel) { background: var(--c-hover); }
  .dp-cell.dp-sel   { background: var(--c-accent-18); color: var(--c-text); border: 1px solid var(--c-accent-72); font-weight: 700; }
  .dp-cell.dp-today:not(.dp-sel) { color: var(--c-accent); font-weight: 700; }
  /* Year list */
  .dp-yrlist {
    max-height: 280px;
    overflow-y: auto;
    padding: 8px 0;
    scrollbar-width: thin;
  }
  .dp-yrlist::-webkit-scrollbar       { width: 4px; }
  .dp-yrlist::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 4px; }
  .dp-yitem {
    display: block;
    width: calc(100% - 24px);
    margin: 1px 12px;
    padding: 11px;
    text-align: center;
    font-size: 15px;
    font-family: inherit;
    border-radius: 8px;
    cursor: pointer;
    background: none;
    border: none;
    color: var(--c-text);
  }
  .dp-yitem:hover:not(.dp-ysel) { background: var(--c-hover); }
  .dp-yitem.dp-ysel { background: var(--c-accent-18); color: var(--c-text); border: 1px solid var(--c-accent-72); font-weight: 700; }

  /* ── month picker ── */
  .dp-mtoggle { cursor: pointer; }
  .dp-mtoggle:hover { color: var(--c-text); }
  .dp-mgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 8px; min-width: 200px; }
  .dp-mcell { background: none; border: 1px solid transparent; border-radius: 6px; padding: 10px 4px; font-size: 15px; font-weight: 600; color: var(--c-text); cursor: pointer; text-align: center; transition: background 0.1s; }
  .dp-mcell:hover { background: var(--c-hover); color: var(--c-text); }
  .dp-mcell.dp-sel { background: var(--c-accent-18); color: var(--c-text); border-color: var(--c-accent-72); font-weight: 700; }

  /* ── TimePicker ── */
  .tp-popup { min-width: 190px; }
  .tp-wrap { display: flex; gap: 6px; padding: 8px 8px 4px; }
  .tp-col { display: flex; flex-direction: column; flex: 1; min-width: 76px; }
  .tp-col-label { text-align: center; font-size: 10px; font-weight: 700; color: var(--c-text-sub); letter-spacing: 0.12em; padding: 4px 0; text-transform: uppercase; }
  .tp-list { display: flex; flex-direction: column; gap: 2px; max-height: 204px; overflow-y: auto; padding-right: 2px; }
  .tp-list::-webkit-scrollbar { width: 4px; }
  .tp-list::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 2px; }
  .tp-cell { background: none; border: 1px solid transparent; border-radius: 6px; padding: 6px 4px; font-size: 13px; color: var(--c-text); cursor: pointer; text-align: center; transition: background 0.1s; }
  .tp-cell:hover { background: var(--c-hover); color: var(--c-text); }
  .tp-cell.dp-sel { background: var(--c-accent-18); color: var(--c-text); border-color: var(--c-accent-72); font-weight: 700; }
  .tp-close-btn { display: block; width: 100%; border: none; border-top: 1px solid var(--c-border); background: none; color: var(--c-text-sub); padding: 8px; font-size: 12px; cursor: pointer; margin-top: 6px; }
  .tp-close-btn:hover { color: var(--c-text); }
  .tp-trigger { white-space: nowrap; overflow: hidden; }
  .tp-trigger.tp-empty { color: var(--c-text-mute) !important; }


/* ──────────────────────────────────────
   projects.html
   ────────────────────────────────────── */

  :root {
    --c-bg: #0f0f0f;
    --c-base: #0a0a0a;
    --c-surface: #1c1c1c;
    --c-border: #383838;
    --c-orange:    #F59E0B;
    --c-blue:      #39BDF8;
    --c-green:     #0CC755;
    --c-text:      #FFFFFF;
    --c-text-sub:  rgba(255,255,255,0.55);
    --c-text-mute: rgba(255,255,255,0.35);
    --c-danger:    #ef4444;
  }
  #pj-loadingState { text-align: center; color: var(--c-text-mute); font-size: 13px; padding: 20px 0; flex-shrink: 0; }
  #pj-emptyState   { display: none; text-align: center; color: var(--c-text-sub); font-size: 13px; padding: 20px 0; flex-shrink: 0; }
  #pj-list {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-x: auto;
    overflow-y: auto;
    border-radius: 10px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.3);
    background: var(--c-base);
  }
  #pj-list::-webkit-scrollbar { width: 4px; height: 4px; }
  #pj-list::-webkit-scrollbar-track { background: transparent; }
  #pj-list::-webkit-scrollbar-thumb { background: #555; border-radius: 4px; }
  .row {
    display: flex;
    align-items: center;
    padding: 11px 14px;
    gap: 8px;
    border-bottom: 1px solid var(--c-border);
    background: var(--c-base);
    flex-shrink: 0;
    min-width: max-content;
    width: 100%;
  }
  .row:last-child { border-bottom: none; }
  .row:hover { background: var(--c-surface); }
  /* ヘッダー行 */
  .row-header {
    display: flex;
    align-items: center;
    padding: 8px 14px;
    gap: 8px;
    background: var(--c-bg);
    border-bottom: 2px solid var(--c-border);
    flex-shrink: 0;
    min-width: max-content;
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 1;
  }
  .row-header span {
    font-size: 11px;
    font-weight: 700;
    color: var(--c-text-sub);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  /* 撮影日 */
  .col-date {
    width: 82px;
    font-size: 13px;
    color: var(--c-text-sub);
    flex-shrink: 0;
  }
  /* カテゴリー */
  .col-category {
    flex: 1;
    font-size: 13px;
    color: var(--c-text);
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* ステータス セレクト */
  .status-select {
    flex-shrink: 0;
    border: none;
    border-radius: 6px;
    padding: 0 22px 0 10px;
    height: 28px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23fff' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 7px center;
    min-width: 84px;
    box-sizing: border-box;
  }
  .status-select:focus { outline: none; }
  .status-select option { color: #fff; background: #1a1818; font-weight: normal; }
  /* 詳細ボタン */
  .btn-edit {
    flex-shrink: 0;
    background: rgba(245,158,11,0.18);
    color: rgba(255,255,255,0.88);
    border: 1px solid rgba(245,158,11,0.72);
    border-radius: 6px;
    padding: 0 12px;
    height: 28px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
  }
  .btn-edit:hover { background: rgba(245,158,11,0.28); }
  /* Uploadボタン */
  .btn-upload {
    flex-shrink: 0;
    background: rgba(12,199,85,0.18);
    color: rgba(255,255,255,0.88);
    border: 1px solid rgba(12,199,85,0.72);
    border-radius: 6px;
    padding: 0 12px;
    height: 28px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
  }
  .btn-upload:hover { background: rgba(12,199,85,0.28); }


/* ──────────────────────────────────────
   stateProjects.html
   ────────────────────────────────────── */

  :root {
    --c-bg:        #0f0f0f;
    --c-base:      #0a0a0a;
    --c-surface:   #1c1c1c;
    --c-surface-2: #242424;
    --c-border:    #383838;
    --c-border-soft:#2e2e2e;
    --c-orange:    #F59E0B;
    --c-blue:      #39BDF8;
    --c-green:     #0CC755;
    --c-text:      #FFFFFF;
    --c-text-sub:  rgba(255,255,255,0.55);
    --c-text-mute: rgba(255,255,255,0.35);
    --c-danger:    #ef4444;
    --radius:      12px;
    --shadow:      0 10px 28px rgba(0,0,0,.22);
  }

  .projects-wrap {
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* ── フィルターバー ── */
  #ap-filter-bar {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
    flex-wrap: wrap;
    flex-shrink: 0;
  }
  #ap-search {
    flex: 1;
    min-width: 140px;
    padding: 7px 14px;
    border: 1px solid var(--c-border);
    border-radius: 20px;
    font-size: 13px;
    outline: none;
    background: var(--c-surface-2);
    color: var(--c-text);
    font-family: inherit;
    transition: border-color 0.15s;
  }
  #ap-search::placeholder { color: var(--c-text-mute); }
  #ap-search:focus { border-color: var(--c-green); background: var(--c-surface); }
  .filter-select {
    padding: 7px 10px;
    border: 1px solid var(--c-border);
    border-radius: 20px;
    font-size: 12px;
    background: var(--c-surface-2);
    color: rgba(255,255,255,0.88);
    outline: none;
    cursor: pointer;
    max-width: 130px;
    font-family: inherit;
    transition: border-color 0.15s;
  }
  .filter-select:hover { border-color: rgba(255,255,255,0.35); }
  .toggle-btn {
    padding: 7px 12px;
    border: 1px solid var(--c-border);
    border-radius: 20px;
    font-size: 12px;
    background: var(--c-surface-2);
    color: rgba(255,255,255,0.55);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    font-family: inherit;
    transition: all 0.15s;
  }
  .toggle-btn:hover { border-color: rgba(255,255,255,0.35); color: rgba(255,255,255,0.88); }
  #ap-btn-done-toggle.active    { background: rgba(12,199,85,0.18); color: rgba(255,255,255,0.88); border-color: rgba(12,199,85,0.72); }
  #ap-btn-deleted-toggle.active { background: rgba(239,68,68,0.18); color: rgba(255,255,255,0.88); border-color: rgba(239,68,68,0.72); }
  #ap-btn-bulk-delete {
    display: none;
    padding: 7px 12px;
    border: 1px solid rgba(239,68,68,0.72);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    background: rgba(239,68,68,0.18);
    color: rgba(255,255,255,0.88);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    font-family: inherit;
  }
  #ap-btn-bulk-delete:hover { background: rgba(239,68,68,0.28); }

  /* ── サマリー ── */
  #ap-summary-bar {
    font-size: 11px;
    color: var(--c-text-mute);
    margin-bottom: 6px;
    padding: 0 4px;
    flex-shrink: 0;
  }

  /* ── ローディング・空状態 ── */
  #ap-loading-state { text-align: center; color: var(--c-text-mute); font-size: 13px; padding: 30px 0; flex-shrink: 0; }
  #ap-empty-state   { display: none; text-align: center; color: var(--c-text-sub); font-size: 13px; padding: 30px 0; flex-shrink: 0; }

  /* ── リストラッパー（丸角・影・ヘッダー固定） ── */
  #ap-list-wrap {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--c-border);
    box-shadow: var(--shadow);
    background: var(--c-surface);
  }

  /* ── カラムヘッダー ── */
  #ap-list-header {
    display: grid;
    grid-template-columns: 72px 1fr 80px 96px auto;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid var(--c-border);
    flex-shrink: 0;
    align-items: center;
  }
  .hdr {
    font-size: 11px;
    font-weight: 700;
    color: var(--c-text-sub);
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: default;
    user-select: none;
  }
  .hdr.sortable { cursor: pointer; }
  .hdr.sortable:hover { color: var(--c-text); }
  .sort-icon { font-size: 9px; color: var(--c-text-mute); }
  .hdr.sort-asc  .sort-icon { color: var(--c-blue); }
  .hdr.sort-desc .sort-icon { color: var(--c-blue); }

  /* ── スクロールエリア ── */
  #ap-project-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }
  #ap-project-list::-webkit-scrollbar { width: 4px; }
  #ap-project-list::-webkit-scrollbar-track { background: transparent; }
  #ap-project-list::-webkit-scrollbar-thumb { background: #555; border-radius: 4px; }

  /* ── 案件行 ── */
  .project-row {
    display: grid;
    grid-template-columns: 72px 1fr 80px 96px auto;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--c-border);
    align-items: center;
    transition: background 0.12s;
  }
  .project-row:last-child { border-bottom: none; }
  .project-row:hover { background: rgba(255,255,255,0.04); }
  .project-row.deleted { opacity: 0.45; }

  /* 撮影日 */
  .col-date .date-main { font-size: 13px; color: var(--c-text); font-weight: 600; display: block; }
  .col-date .date-sub  { font-size: 10px; color: var(--c-text-mute); display: block; margin-top: 1px; }

  /* 案件名・顧客名 */
  .col-names { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
  .proj-title { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; color: var(--c-text); }
  .proj-cust  { font-size: 11px; color: var(--c-text-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; margin-top: 1px; }

  /* カテゴリー */
  .col-category { min-width: 0; display: flex; align-items: center; }
  .cat-badge { font-size: 10px; font-weight: 500; padding: 3px 12px; border-radius: 20px; background: rgba(57,189,248,0.18); color: rgba(255,255,255,0.88); border: 1px solid rgba(57,189,248,0.72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; max-width: 100%; transition: all 0.2s; }
  .no-cat    { font-size: 11px; color: var(--c-text-mute); }

  /* ステータス */
  .col-status { display: flex; align-items: center; }
  .status-select {
    border: none; border-radius: 20px;
    padding: 3px 24px 3px 12px;
    font-size: 10px; font-weight: 500; color: #fff;
    cursor: pointer; -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23fff' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 8px center;
    font-family: inherit; transition: all 0.2s;
  }
  .status-select:focus { outline: none; }
  .status-select option { color: #fff; background: #2e2c2c; font-weight: normal; }

  /* アクション */
  .actions { display: flex; gap: 4px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
  .btn-act { background: none; border: 1px solid; border-radius: 20px; padding: 3px 12px; font-size: 10px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: all 0.2s; font-family: inherit; }
  .btn-act:hover { opacity: 0.8; }
  .btn-edit     { background: rgba(245,158,11,0.18); color: rgba(255,255,255,0.88); border-color: rgba(245,158,11,0.72); }
  .btn-upload   { background: rgba(12,199,85,0.18);  color: rgba(255,255,255,0.88); border-color: rgba(12,199,85,0.72); }
  .btn-gallery  { background: rgba(57,189,248,0.18); color: rgba(255,255,255,0.88); border-color: rgba(57,189,248,0.72); }
  .btn-delete   { background: rgba(239,68,68,0.18);  color: rgba(255,255,255,0.88); border-color: rgba(239,68,68,0.72); }
  .btn-restore  { background: rgba(12,199,85,0.18);  color: rgba(255,255,255,0.88); border-color: rgba(12,199,85,0.72); }
  .btn-perm-del { background: rgba(239,68,68,0.18);  color: rgba(255,255,255,0.88); border-color: rgba(239,68,68,0.72); }



  @media (max-width: 600px) {
    #ap-list-header { display: none; }
    .project-row {
      grid-template-columns: 1fr auto;
      grid-template-rows: auto auto auto;
      row-gap: 5px;
    }
    .col-date     { grid-column: 1; grid-row: 1; }
    .col-names    { grid-column: 1; grid-row: 2; }
    .col-category { grid-column: 1; grid-row: 3; }
    .col-status   { grid-column: 2; grid-row: 1 / 3; min-width: 76px; }
    .actions      { grid-column: 2; grid-row: 3; flex-direction: column; }
  }

  /* ═══════════════════════════════════════════════
     編集モーダル — CSS Namespacing
  ═══════════════════════════════════════════════ */

/* ──────────────────────────────────────
   stateGallery.html
   ────────────────────────────────────── */

  :root {
    --c-bg: #0f0f0f;
    --c-base: #0a0a0a;
    --c-surface: #1c1c1c;
    --c-border: #383838;
    --c-orange:    #F59E0B;
    --c-blue:      #39BDF8;
    --c-green:     #0CC755;
    --c-text:      #FFFFFF;
    --c-text-sub:  rgba(255,255,255,0.55);
    --c-text-mute: rgba(255,255,255,0.35);
    --c-danger:    #ef4444;
    --c-surface-2: #242424;
    --radius:      12px;
    --shadow:      0 10px 28px rgba(0,0,0,.22);
  }

  #gl-app {
    background: var(--c-bg);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  /* ══════════════════════════════════════
     ヘッダー
  ══════════════════════════════════════ */
  #gl-header {
    background: var(--c-surface-2);
    color: var(--c-text);
    padding: 16px 20px 12px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  #gl-header-title-area { flex: 1; }
  #gl-header-title { font-size: 15px; font-weight: 700; }
  #gl-header-sub   { font-size: 11px; opacity: 0.55; margin-top: 2px; }
  #gl-btn-view-gallery {
    background: rgba(57,189,248,0.18);
    border: 1px solid rgba(57,189,248,0.72);
    color: rgba(255,255,255,0.88);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 14px;
    border-radius: 6px;
    font-family: inherit;
    transition: all .15s;
    white-space: nowrap;
  }
  #gl-btn-view-gallery:hover { background: rgba(57,189,248,0.28); }
  #gl-btn-header-close {
    background: none;
    border: none;
    color: rgba(255,255,255,.5);
    font-size: 20px;
    cursor: pointer;
    padding: 4px 8px;
    transition: color .15s;
  }
  #gl-btn-header-close:hover { color: #fff; }

  /* ══════════════════════════════════════
     タブバー
  ══════════════════════════════════════ */
  #gl-tab-bar {
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
    display: flex;
    flex-shrink: 0;
  }
  .tab-btn {
    flex: 1;
    padding: 11px 4px 9px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    color: var(--c-text-sub);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: all .15s;
    font-family: inherit;
  }
  .tab-btn:hover { color: var(--c-text); }
  .tab-btn.active {
    color: var(--c-accent);
    border-bottom-color: var(--c-accent);
  }

  /* ══════════════════════════════════════
     ギャラリータブ — ツールバー
  ══════════════════════════════════════ */
  #gl-gallery-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  #gl-gallery-toolbar {
    display: flex;
    gap: 6px;
    padding: 10px 16px;
    flex-wrap: wrap;
    align-items: center;
    flex-shrink: 0;
    border-bottom: 1px solid var(--c-border);
    background: var(--c-surface);
  }
  .tb-select {
    padding: 7px 10px;
    border: 1px solid var(--c-border);
    border-radius: 20px;
    font-size: 12px;
    background: var(--c-surface-2);
    color: var(--c-text-sub);
    outline: none;
    cursor: pointer;
    font-family: inherit;
  }
  .tb-select:hover { border-color: var(--c-accent-72); }
  .tb-btn {
    padding: 7px 14px;
    border: 1px solid var(--c-border);
    border-radius: 20px;
    font-size: 12px;
    background: var(--c-surface-2);
    color: var(--c-text-sub);
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
    transition: all .15s;
  }
  .tb-btn:hover { background: var(--c-hover); border-color: var(--c-border); color: var(--c-text); }
  .tb-btn.active { background: var(--c-orange-18); color: var(--c-orange); border-color: var(--c-orange-72); }
  .tb-btn-primary {
    padding: 7px 16px;
    border: 1px solid var(--c-accent-72);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    background: var(--c-accent-18);
    color: var(--c-accent);
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
    transition: all .15s;
  }
  .tb-btn-primary:hover { background: var(--c-accent-dim); }
  .tb-btn-danger {
    padding: 7px 14px;
    border: 1px solid var(--c-danger-72);
    border-radius: 20px;
    font-size: 12px;
    background: var(--c-danger-18);
    color: var(--c-danger);
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: all .15s;
  }
  .tb-btn-danger:hover { opacity: 0.84; }
  #gl-photo-count {
    font-size: 12px;
    color: var(--c-text-mute);
    margin-left: 4px;
  }

  /* ══════════════════════════════════════
     写真グリッド
  ══════════════════════════════════════ */
  #gl-photo-grid {
    flex: 1;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 6px;
    align-content: start;
    padding: 10px 16px 40px;
  }
  #gl-photo-grid::-webkit-scrollbar { width: 4px; }
  #gl-photo-grid::-webkit-scrollbar-track { background: transparent; }
  #gl-photo-grid::-webkit-scrollbar-thumb { background: #555; border-radius: 4px; }

  .photo-card {
    position: relative;
    padding-bottom: 100%;
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    background: var(--c-surface);
    box-shadow: var(--shadow);
  }
  .photo-card img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .2s;
  }
  .photo-card:hover img { transform: scale(1.03); }

  /* 選択チェックボックス */
  .photo-check {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.6);
    background: rgba(0,0,0,.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .15s;
    z-index: 2;
  }
  .photo-card:hover .photo-check,
  .photo-card.selected .photo-check { opacity: 1; }
  .photo-card.selected .photo-check {
    background: var(--c-green);
    border-color: var(--c-accent);
  }
  .photo-card.selected .photo-check::after {
    content: '\2713';
    color: #fff;
    font-size: 12px;
    font-weight: 700;
  }

  /* 削除ボタン */
  .photo-del {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(239,68,68,0.18);
    border: 1px solid rgba(239,68,68,0.72);
    color: rgba(255,255,255,0.88);
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .15s;
    z-index: 2;
  }
  .photo-card:hover .photo-del { opacity: 1; }

  /* ファイル名オーバーレイ */
  .photo-name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px 6px 4px;
    background: linear-gradient(transparent, rgba(0,0,0,.6));
    font-size: 10px;
    color: rgba(255,255,255,.8);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0;
    transition: opacity .15s;
  }
  .photo-card:hover .photo-name { opacity: 1; }

  /* 空状態 */
  #gl-empty-state {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    color: var(--c-text-mute);
    font-size: 14px;
    gap: 12px;
  }
  #gl-empty-state .icon { font-size: 48px; opacity: .4; }

  /* ══════════════════════════════════════
     設定タブ
  ══════════════════════════════════════ */
  #gl-settings-panel {
    display: none;
    flex: 1;
    overflow-y: auto;
    padding: 14px 16px;
    flex-direction: column;
    gap: 0;
  }
  #gl-settings-panel::-webkit-scrollbar { width: 4px; }
  #gl-settings-panel::-webkit-scrollbar-track { background: transparent; }
  #gl-settings-panel::-webkit-scrollbar-thumb { background: #555; border-radius: 4px; }

  /* 対象アルバムセレクタ（常設・最上部） */
  #gl-s-album-picker {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--c-border);
  }
  #gl-s-album-picker .field-label { font-size: 11px; font-weight: 700; color: var(--c-text-sub); }
  #gl-s-album-picker select.field-input { font-weight: 600; }

  /* 対象未選択 / アルバム0件の案内 */
  #gl-s-no-album {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    color: var(--c-text-mute);
    font-size: 13px;
    gap: 12px;
    padding: 32px 16px;
    text-align: center;
  }
  #gl-s-no-album .icon { opacity: .4; }

  /* セクション */
  .section-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--c-accent);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--c-border);
    padding-bottom: 5px;
    margin-top: 14px;
    margin-bottom: 10px;
  }
  .section-title:first-child { margin-top: 0; }

  /* フィールド */
  .field-group { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
  .field-label { font-size: 11px; font-weight: 700; color: var(--c-text-sub); }
  .field-input {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--c-border);
    border-radius: 8px;
    font-size: 13px;
    background: var(--c-bg);
    color: var(--c-text);
    outline: none;
    font-family: inherit;
    transition: border-color 0.15s;
  }
  .field-input:focus { border-color: var(--c-accent); box-shadow: 0 0 0 2px rgba(57,189,248,0.15); }
  select.field-input { cursor: pointer; }

  /* 2カラム */
  .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

  /* チェック行 */
  .check-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
  }
  .check-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--c-accent);
    cursor: pointer;
    flex-shrink: 0;
  }
  .check-row label {
    font-size: 12px;
    color: var(--c-text-sub);
    cursor: pointer;
  }

  /* ラジオ行 */
  .radio-row {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 6px 0;
  }
  .radio-row label {
    font-size: 12px;
    color: var(--c-text-sub);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .radio-row input[type="radio"] {
    accent-color: var(--c-accent);
    cursor: pointer;
  }

  /* 条件表示ブロック */
  .cond-block {
    display: none;
    padding: 10px 14px;
    background: rgba(12,199,85,0.04);
    border: 1px solid var(--c-border);
    border-radius: 8px;
    margin-top: 6px;
    margin-bottom: 8px;
  }
  .cond-block.open { display: block; }
  .cond-block .field-group { margin-bottom: 8px; }
  .cond-block .field-group:last-child { margin-bottom: 0; }

  /* ══════════════════════════════════════
     フッター
  ══════════════════════════════════════ */
  #gl-footer {
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid var(--c-border);
    background: var(--c-surface-2);
    flex-shrink: 0;
  }
  #gl-btn-cancel {
    flex: 1;
    padding: 11px;
    border: 1px solid var(--c-border);
    border-radius: 10px;
    background: var(--c-surface);
    color: var(--c-text-mute);
    font-size: 14px;
    cursor: pointer;
    font-family: inherit;
    transition: all .15s;
  }
  #gl-btn-cancel:hover { border-color: var(--c-border); color: var(--c-text); }
  #gl-btn-save {
    flex: 2;
    padding: 11px;
    border: 1px solid var(--c-accent-72);
    border-radius: 10px;
    background: var(--c-accent-18);
    color: var(--c-accent);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
  }
  #gl-btn-save:hover    { background: var(--c-accent-dim); }
  #gl-btn-save:disabled { background: var(--c-surface); border-color: var(--c-border); color: var(--c-text-mute); cursor: default; }

  /* ══════════════════════════════════════
     ライトボックス（写真プレビュー）
  ══════════════════════════════════════ */
  #gl-lightbox {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.92);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  #gl-lightbox.open { display: flex; }
  #gl-lb-img {
    max-width: 90vw;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 4px;
  }
  #gl-lb-info {
    color: var(--c-text-sub);
    font-size: 12px;
    margin-top: 10px;
    text-align: center;
  }
  #gl-lb-close {
    position: absolute;
    top: 16px;
    right: 20px;
    background: none;
    border: none;
    color: #fff;
    font-size: 28px;
    cursor: pointer;
    opacity: .7;
    transition: opacity .15s;
  }
  #gl-lb-close:hover { opacity: 1; }
  #gl-lb-prev, #gl-lb-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,.1);
    border: none;
    color: #fff;
    font-size: 24px;
    padding: 12px 16px;
    cursor: pointer;
    border-radius: 50%;
    opacity: .6;
    transition: opacity .15s;
  }
  #gl-lb-prev:hover, #gl-lb-next:hover { opacity: 1; }
  #gl-lb-prev { left: 16px; }
  #gl-lb-next { right: 16px; }
  #gl-lb-counter {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--c-text-mute);
    font-size: 12px;
  }

  /* ══════════════════════════════════════
     確認ダイアログ
  ══════════════════════════════════════ */
  #gl-confirm-dialog {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.6);
    z-index: 10000;
    align-items: center;
    justify-content: center;
  }
  #gl-confirm-dialog.open { display: flex; }
  .confirm-box {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px;
    max-width: 360px;
    width: 90%;
    text-align: center;
  }
  .confirm-box p { font-size: 14px; margin-bottom: 18px; line-height: 1.6; }
  .confirm-btns { display: flex; gap: 10px; justify-content: center; }
  .confirm-btns button {
    padding: 8px 24px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
  }
  /* 削除実行ボタン：テーマの danger 色 */
  .btn-confirm-ok { background: var(--c-danger-18); color: var(--c-danger); border: 1px solid var(--c-danger-72); font-weight: 700; }
  .btn-confirm-ok:hover { background: var(--c-danger-72); color: #fff; }
  /* キャンセルボタン：テーマ変数で文字色を確保（白文字＝白背景で不可視だった不具合を修正） */
  .btn-confirm-cancel { background: var(--c-surface-2); color: var(--c-text); border: 1px solid var(--c-border); }
  .btn-confirm-cancel:hover { border-color: var(--c-accent); color: var(--c-accent); }


  /* ── Stripe連携バッジ ── */
  #gl-stripe-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10px; padding: 3px 8px; border-radius: 20px;
    border: 1px solid var(--c-border); color: var(--c-text-mute);
    margin-left: 8px; vertical-align: middle;
  }
  #gl-stripe-badge .stripe-dot {
    width: 6px; height: 6px; border-radius: 50%; display: inline-block;
  }
  #gl-stripe-badge.linked   { border-color: rgba(12,199,85,.4); color: rgba(12,199,85,.85); }
  #gl-stripe-badge.linked .stripe-dot   { background: #0CC755; }
  #gl-stripe-badge.unlinked { border-color: rgba(239,68,68,.4); color: rgba(239,68,68,.85); }
  #gl-stripe-badge.unlinked .stripe-dot { background: #ef4444; }

  /* ── Stripe連携モーダル ── */
  .stripe-modal-overlay {
    display: none; position: fixed; inset: 0; z-index: 10002;
    background: rgba(0,0,0,0.55); align-items: center; justify-content: center;
  }
  .stripe-modal-overlay.show { display: flex; }
  .stripe-modal-box {
    background: var(--c-surface); border-radius: var(--radius); padding: 28px 24px;
    max-width: 360px; width: 90%; text-align: center;
    box-shadow: var(--shadow); border: 1px solid var(--c-border);
  }
  .stripe-modal-icon { font-size: 40px; margin-bottom: 12px; }
  .stripe-modal-title {
    font-size: 15px; font-weight: 500; color: var(--c-text);
    margin-bottom: 8px; line-height: 1.5;
  }
  .stripe-modal-desc {
    font-size: 12px; color: var(--c-text-mute); line-height: 1.7;
    margin-bottom: 20px;
  }
  .stripe-modal-status {
    font-size: 11px; color: var(--c-text-mute); margin-bottom: 14px;
    display: flex; align-items: center; justify-content: center; gap: 6px;
  }
  .stripe-modal-status .dot {
    width: 8px; height: 8px; border-radius: 50%; display: inline-block;
  }
  .dot-red { background: #ef4444; }
  .dot-green { background: #0CC755; }
  .stripe-modal-btn-primary {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%; padding: 11px 0; border-radius: 8px; border: none;
    font-size: 13px; font-weight: 500; cursor: pointer;
    background: rgba(124,58,237,0.18); color: rgba(255,255,255,0.88);
    border: 1px solid rgba(124,58,237,0.72);
    transition: all 0.15s; margin-bottom: 8px;
  }
  .stripe-modal-btn-primary:hover { background: rgba(124,58,237,0.3); }
  .stripe-modal-btn-secondary {
    display: inline-block; width: 100%; padding: 9px 0;
    border-radius: 8px; border: 1px solid var(--c-border);
    background: transparent; color: var(--c-text-mute);
    font-size: 12px; cursor: pointer; transition: all 0.15s;
  }
  .stripe-modal-btn-secondary:hover { border-color: var(--c-text-mute); color: var(--c-text-sub); }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* ══════════════════════════════════════
     ギャラリーラップ（余白）
  ══════════════════════════════════════ */
  .gallery-wrap {
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

/* ──────────────────────────────────────
   stateOutsourcing.html
   ────────────────────────────────────── */

  :root {
    --c-bg: #0f0f0f;
    --c-base: #0a0a0a;
    --c-surface: #1c1c1c;
    --c-surface-2: #242424;
    --c-border: #383838;
    --c-border-soft: #1e1e1e;
    --c-orange:    #F59E0B;
    --c-blue:      #39BDF8;
    --c-green:     #0CC755;
    --c-text:      #FFFFFF;
    --c-text-sub:  rgba(255,255,255,0.55);
    --c-text-mute: rgba(255,255,255,0.35);
    --c-danger:    #ef4444;
    --radius:      12px;
    --shadow:      0 10px 28px rgba(0,0,0,.22);
  }

  .outsourcing-wrap {
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* ── フィルターバー ── */
  #os-filter-bar {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
  }
  #os-search {
    flex: 1;
    min-width: 140px;
    padding: 7px 14px;
    border: 1px solid var(--c-border);
    border-radius: 20px;
    font-size: 13px;
    outline: none;
    background: var(--c-surface-2);
    color: var(--c-text);
    font-family: inherit;
    transition: border-color 0.15s;
  }
  #os-search::placeholder { color: var(--c-text-mute); }
  #os-search:focus { border-color: var(--c-accent); background: var(--c-surface); }
  .filter-select {
    padding: 7px 10px;
    border: 1px solid var(--c-border);
    border-radius: 20px;
    font-size: 12px;
    background: var(--c-surface-2);
    color: var(--c-text);
    outline: none;
    cursor: pointer;
    max-width: 170px;
    font-family: inherit;
    transition: border-color 0.15s;
  }
  #os-btn-new {
    padding: 7px 14px;
    border: 1px solid rgba(245,158,11,0.72);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    background: rgba(245,158,11,0.18);
    color: rgba(255,255,255,0.88);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
  }
  #os-btn-new:hover { background: rgba(245,158,11,0.28); }
  #os-btn-deleted-toggle {
    padding: 7px 12px;
    border: 1px solid var(--c-border);
    border-radius: 20px;
    font-size: 12px;
    background: var(--c-surface-2);
    color: var(--c-text-sub);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
  }
  #os-btn-deleted-toggle.active { background: rgba(239,68,68,0.15); color: var(--c-danger); }
  #os-btn-bulk-delete {
    display: none;
    padding: 7px 12px;
    border: none;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    background: var(--c-danger);
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
  }
  #os-btn-bulk-delete:hover { opacity: 0.85; }

  /* ── サマリー ── */
  #os-summary-bar {
    font-size: 11px;
    color: var(--c-text-mute);
    margin-bottom: 6px;
    padding: 0 4px;
    flex-shrink: 0;
  }

  /* ── ローディング・空状態 ── */
  #os-loading-state { text-align: center; color: var(--c-text-sub); font-size: 13px; padding: 30px 0; flex-shrink: 0; }
  #os-empty-state   { display: none; text-align: center; color: var(--c-text-mute); font-size: 13px; padding: 30px 0; flex-shrink: 0; }

  /* ── リストラップ ── */
  #os-list-wrap {
    flex: 1;
    min-height: 0;
    display: none;
    flex-direction: column;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--c-border);
    box-shadow: var(--shadow);
    background: var(--c-surface);
  }

  /* ── カラムヘッダー ── */
  #os-list-header {
    display: grid;
    grid-template-columns: 90px minmax(0,1fr) 72px 130px;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid var(--c-border);
    flex-shrink: 0;
  }
  .hdr {
    font-size: 11px;
    font-weight: 700;
    color: var(--c-text-sub);
    letter-spacing: 0.04em;
    white-space: nowrap;
  }

  /* ── スクロールエリア ── */
  #os-outsourcer-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    background: var(--c-surface);
  }
  #os-outsourcer-list::-webkit-scrollbar { width: 4px; }
  #os-outsourcer-list::-webkit-scrollbar-track { background: transparent; }
  #os-outsourcer-list::-webkit-scrollbar-thumb { background: #555; border-radius: 4px; }

  /* ── 外注先行 ── */
  .outsourcer-row {
    display: grid;
    grid-template-columns: 90px minmax(0,1fr) 72px 130px;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--c-border);
    align-items: center;
    transition: background 0.12s;
  }
  .outsourcer-row:last-child { border-bottom: none; }
  .outsourcer-row:hover { background: rgba(255,255,255,0.04); }
  .outsourcer-row.deleted { opacity: 0.5; }

  /* ── 分野バッジ ── */
  .field-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    border: none;
  }
  .f-photo   { background: rgba(57,189,248,0.15); color: var(--c-blue); }
  .f-video   { background: rgba(245,158,11,0.15); color: var(--c-orange); }
  .f-makeup  { background: rgba(239,68,68,0.15); color: var(--c-danger); }
  .f-hair    { background: rgba(12,199,85,0.15); color: var(--c-green); }
  .f-style   { background: rgba(245,158,11,0.15); color: var(--c-orange); }
  .f-dress   { background: rgba(12,199,85,0.15); color: var(--c-green); }
  .f-other   { background: var(--c-surface); color: var(--c-text-mute); }

  /* ── 氏名・連絡先 ── */
  .col-info { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: none;
  }
  .avatar-ph {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--c-surface);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
  }
  .info-text { min-width: 0; }
  .out-name    { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; color: var(--c-text); }
  .out-contact { font-size: 11px; color: var(--c-text-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; margin-top: 1px; }

  /* ── 単価 ── */
  .col-rate { font-size: 12px; color: var(--c-text-mute); white-space: nowrap; }

  /* ── 操作 ── */
  .actions { display: flex; gap: 4px; }
  .btn-act { background: none; border: 1px solid; border-radius: 20px; padding: 3px 12px; font-size: 10px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: all 0.2s; font-family: inherit; }
  .btn-act:hover { opacity: 0.8; }
  .btn-edit     { background: rgba(245,158,11,0.18); color: rgba(255,255,255,0.88); border-color: rgba(245,158,11,0.72); }
  .btn-delete   { background: rgba(239,68,68,0.18);  color: rgba(255,255,255,0.88); border-color: rgba(239,68,68,0.72); }
  .btn-restore  { background: rgba(12,199,85,0.18);  color: rgba(255,255,255,0.88); border-color: rgba(12,199,85,0.72); }
  .btn-perm-del { background: rgba(239,68,68,0.18);  color: rgba(255,255,255,0.88); border-color: rgba(239,68,68,0.72); }

  /* ═══════════════════════════════════════════════════
     編集モーダル (#edit-modal)
     ═══════════════════════════════════════════════════ */
  #os-edit-modal { display:none; position:fixed; inset:0; z-index:9000; background:rgba(0,0,0,0.55); align-items:center; justify-content:center; }
  #os-edit-modal.open { display:flex; }
  #os-edit-modal .em-app {
    background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radius);
    overflow:hidden; width:90%; max-width:640px; height:85%; max-height:720px;
    display:flex; flex-direction:column; box-shadow:0 8px 32px rgba(0,0,0,0.5);
  }
  #os-edit-modal #os-em-header { background:var(--c-surface-2); color:var(--c-text); padding:16px 20px 13px; flex-shrink:0; cursor:grab; user-select:none; }
  #os-edit-modal #os-em-header:active { cursor:grabbing; }
  #os-edit-modal #os-em-header-title { font-size:15px; font-weight:700; letter-spacing:0.02em; }
  #os-edit-modal #os-em-header-sub   { font-size:11px; opacity:0.55; margin-top:3px; letter-spacing:0.04em; }
  #os-edit-modal #os-em-form-body { flex:1; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:10px; }
  #os-edit-modal #os-em-form-body::-webkit-scrollbar { width:4px; }
  #os-edit-modal #os-em-form-body::-webkit-scrollbar-thumb { background:#555; border-radius:4px; }
  #os-edit-modal .em-section-title { font-size:11px; font-weight:700; color:rgba(255,255,255,0.88); letter-spacing:0.06em; text-transform:uppercase; background: var(--c-accent-18); border-left: 3px solid var(--c-accent-72); border-radius: 0 6px 6px 0; padding: 5px 10px; margin-top:6px; }
  #os-edit-modal .em-field-group { display:flex; flex-direction:column; gap:4px; }
  #os-edit-modal .em-field-label { font-size:11px; font-weight:700; color:var(--c-text-sub); }
  #os-edit-modal .em-field-label .req { color:var(--c-danger); margin-left:3px; }
  #os-edit-modal .em-field-input { width:100%; padding:9px 11px; height:40px; box-sizing:border-box; border:1px solid var(--c-border); border-radius:7px; font-size:13.5px; background:var(--c-surface); color:#FFFFFF; outline:none; font-family:inherit; transition:border-color 0.18s, box-shadow 0.18s; -webkit-appearance:none; }
  #os-edit-modal .em-field-input:focus { border-color:var(--c-accent); box-shadow:0 0 0 2.5px rgba(57,189,248,0.15); }
  #os-edit-modal select.em-field-input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23888888' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; cursor: pointer; }
  #os-edit-modal textarea.em-field-input { height:auto; resize:vertical; min-height:72px; line-height:1.65; }
  #os-edit-modal .em-row-2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  /* 写真 */
  #os-edit-modal #os-em-photo-section { display:flex; align-items:center; gap:14px; }
  #os-edit-modal #os-em-photo-circle { width:60px; height:60px; border-radius:50%; background:var(--c-surface); display:flex; align-items:center; justify-content:center; font-size:26px; flex-shrink:0; overflow:hidden; border:2px solid var(--c-border); cursor:pointer; position:relative; }
  #os-edit-modal #os-em-photo-circle:hover::after { content:'📷'; position:absolute; font-size:18px; background:rgba(0,0,0,0.45); width:100%; height:100%; display:flex; align-items:center; justify-content:center; border-radius:50%; }
  #os-edit-modal #os-em-photo-circle img { width:100%; height:100%; object-fit:cover; }
  #os-edit-modal #os-em-photo-file-input { display:none; }
  #os-edit-modal #os-em-photo-upload-wrap { flex:1; }
  #os-edit-modal #os-em-btn-select-photo { background:rgba(12,199,85,0.1); border:1px dashed var(--c-green); color:rgba(255,255,255,0.88); border-radius:8px; padding:7px 14px; font-size:12px; cursor:pointer; width:100%; text-align:center; }
  #os-edit-modal #os-em-btn-select-photo:hover { background:rgba(12,199,85,0.2); }
  #os-edit-modal .em-photo-hint { font-size:11px; color:var(--c-text-mute); margin-top:4px; text-align:center; }
  /* 評価（星） */
  #os-edit-modal #os-em-rating-wrap { display:flex; gap:6px; margin-top:4px; }
  #os-edit-modal .em-star-btn { font-size:22px; cursor:pointer; color:var(--c-text-mute); background:none; border:none; padding:0; line-height:1; transition:color .1s, transform .1s; }
  #os-edit-modal .em-star-btn.active { color:var(--c-orange); }
  #os-edit-modal .em-star-btn:hover  { color:var(--c-orange); transform:scale(1.15); }
  /* LINE連携 */
  #os-edit-modal #os-em-line-section { display:flex; flex-direction:column; gap:8px; }
  #os-edit-modal .em-line-status-badge { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:20px; font-size:12px; font-weight:700; width:fit-content; }
  #os-edit-modal .em-line-connected { background:rgba(12,199,85,0.2); color:rgba(255,255,255,0.88); }
  #os-edit-modal .em-line-issued    { background:rgba(245,158,11,0.2); color:var(--c-orange); }
  #os-edit-modal .em-line-none      { background:var(--c-border); color:var(--c-text-sub); }
  #os-edit-modal #os-em-btn-issue-url { background:rgba(12,199,85,0.18); color:rgba(255,255,255,0.88); border:1px solid rgba(12,199,85,0.72); border-radius:8px; padding:8px 16px; font-size:13px; font-weight:700; cursor:pointer; width:fit-content; }
  #os-edit-modal #os-em-btn-issue-url:hover { background:rgba(12,199,85,0.28); }
  #os-edit-modal .em-line-url-row { display:flex; gap:8px; align-items:center; }
  #os-edit-modal #os-em-line-url-input { flex:1; font-family:monospace; font-size:11px; padding:8px 10px; border:1px solid var(--c-border); border-radius:8px; background:var(--c-surface); color:var(--c-text-sub); outline:none; }
  #os-edit-modal #os-em-btn-copy-url { background:rgba(12,199,85,0.18); color:rgba(255,255,255,0.88); border:1px solid rgba(12,199,85,0.72); border-radius:8px; padding:0 14px; height:36px; font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap; flex-shrink:0; }
  #os-edit-modal #os-em-btn-copy-url:hover { background:rgba(12,199,85,0.28); }
  #os-edit-modal .em-line-expiry-note { font-size:11px; color:var(--c-text-mute); margin-top:3px; }
  /* フッター */
  #os-edit-modal #os-em-footer { display:flex; gap:10px; padding:12px 16px; border-top:1px solid var(--c-border); background:var(--c-surface-2); flex-shrink:0; }
  #os-edit-modal #os-em-btnCancel { flex:1; padding:11px; border:1px solid var(--c-border); border-radius:10px; background:var(--c-surface); color:rgba(255,255,255,0.55); font-size:13.5px; font-weight:600; cursor:pointer; font-family:inherit; }
  #os-edit-modal #os-em-btnCancel:hover { background:rgba(60,58,58,0.8); }
  #os-edit-modal #os-em-btnSave { flex:2; padding:11px; border:1px solid rgba(57,189,248,0.72); border-radius:10px; background:rgba(57,189,248,0.18); color:rgba(255,255,255,0.88); font-size:13.5px; font-weight:700; cursor:pointer; font-family:inherit; letter-spacing:0.03em; transition:background .15s; }
  #os-edit-modal #os-em-btnSave:hover { background:rgba(57,189,248,0.28); }
  #os-edit-modal #os-em-btnSave:disabled { background:var(--c-surface); border-color:var(--c-border); cursor:default; color:var(--c-text-mute); }

/* ──────────────────────────────────────
   stateStaff.html
   ────────────────────────────────────── */

  :root {
    --c-bg: #0f0f0f;
    --c-base: #0a0a0a;
    --c-surface: #1c1c1c;
    --c-surface-2: #242424;
    --c-border: #383838;
    --c-border-soft: #1e1e1e;
    --c-orange:    #F59E0B;
    --c-blue:      #39BDF8;
    --c-green:     #0CC755;
    --c-text:      #FFFFFF;
    --c-text-sub:  rgba(255,255,255,0.55);
    --c-text-mute: rgba(255,255,255,0.35);
    --c-danger:    #ef4444;
    --radius:      12px;
    --shadow:      0 10px 28px rgba(0,0,0,.22);
  }

  .staff-wrap {
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* ── フィルターバー ── */
  #sf-filter-bar {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
  }
  #sf-search {
    flex: 1;
    min-width: 140px;
    padding: 7px 14px;
    border: 1px solid var(--c-border);
    border-radius: 20px;
    font-size: 13px;
    outline: none;
    background: var(--c-surface-2);
    color: var(--c-text);
    font-family: inherit;
    transition: border-color 0.15s;
  }
  #sf-search::placeholder { color: var(--c-text-mute); }
  #sf-search:focus { border-color: var(--c-accent); background: var(--c-surface); }
  .filter-select {
    padding: 7px 10px;
    border: 1px solid var(--c-border);
    border-radius: 20px;
    font-size: 12px;
    background: var(--c-surface-2);
    color: var(--c-text);
    outline: none;
    cursor: pointer;
    max-width: 160px;
    font-family: inherit;
    transition: border-color 0.15s;
  }
  #sf-btn-new {
    padding: 7px 14px;
    border: 1px solid rgba(12,199,85,0.72);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    background: rgba(12,199,85,0.18);
    color: rgba(255,255,255,0.88);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
  }
  #sf-btn-new:hover { background: rgba(12,199,85,0.28); }
  #sf-btn-deleted-toggle {
    padding: 7px 12px;
    border: 1px solid var(--c-border);
    border-radius: 20px;
    font-size: 12px;
    background: var(--c-surface-2);
    color: var(--c-text-sub);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
  }
  #sf-btn-deleted-toggle.active { background: rgba(239,68,68,0.15); color: var(--c-danger); }
  #sf-btn-bulk-delete {
    display: none;
    padding: 7px 12px;
    border: none;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    background: var(--c-danger);
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
  }
  #sf-btn-bulk-delete:hover { opacity: 0.85; }

  /* ── サマリー ── */
  #sf-summary-bar {
    font-size: 11px;
    color: var(--c-text-mute);
    margin-bottom: 6px;
    padding: 0 4px;
    flex-shrink: 0;
  }

  /* ── ローディング・空状態 ── */
  #sf-loading-state { text-align: center; color: var(--c-text-sub); font-size: 13px; padding: 30px 0; flex-shrink: 0; }
  #sf-empty-state   { display: none; text-align: center; color: var(--c-text-mute); font-size: 13px; padding: 30px 0; flex-shrink: 0; }

  /* ── リストラップ ── */
  #sf-list-wrap {
    flex: 1;
    min-height: 0;
    display: none;
    flex-direction: column;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--c-border);
    box-shadow: var(--shadow);
    background: var(--c-surface);
  }

  /* ── カラムヘッダー ── */
  #sf-list-header {
    display: grid;
    grid-template-columns: 88px minmax(0,1fr) minmax(0,180px) 130px;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid var(--c-border);
    flex-shrink: 0;
  }
  .hdr {
    font-size: 11px;
    font-weight: 700;
    color: var(--c-text-sub);
    letter-spacing: 0.04em;
    white-space: nowrap;
  }

  /* ── スクロールエリア ── */
  #sf-staff-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    background: var(--c-surface);
  }
  #sf-staff-list::-webkit-scrollbar { width: 4px; }
  #sf-staff-list::-webkit-scrollbar-track { background: transparent; }
  #sf-staff-list::-webkit-scrollbar-thumb { background: #555; border-radius: 4px; }

  /* ── スタッフ行 ── */
  .staff-row {
    display: grid;
    grid-template-columns: 88px minmax(0,1fr) minmax(0,180px) 130px;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--c-border);
    align-items: center;
    transition: background 0.12s;
  }
  .staff-row:last-child { border-bottom: none; }
  .staff-row:hover { background: rgba(255,255,255,0.04); }
  .staff-row.deleted { opacity: 0.5; }

  /* ── 役割バッジ ── */
  .role-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    border: none;
  }
  .r-manager   { background: rgba(57,189,248,0.15); color: var(--c-blue); }
  .r-staff     { background: rgba(12,199,85,0.15); color: rgba(255,255,255,0.88); }
  .r-parttime  { background: rgba(245,158,11,0.15); color: var(--c-orange); }
  .r-other     { background: var(--c-surface); color: var(--c-text-mute); }

  /* ── 氏名・連絡先 ── */
  .col-info { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: none;
  }
  .avatar-ph {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--c-surface);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
  }
  .info-text { min-width: 0; }
  .st-name    { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; color: var(--c-text); }
  .st-contact { font-size: 11px; color: var(--c-text-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; margin-top: 1px; }

  /* ── 権限バッジ ── */
  .col-perms { display: flex; flex-wrap: wrap; gap: 3px; min-width: 0; }
  .perm-tag {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    white-space: nowrap;
    border: none;
  }
  .perm-tag.on  { background: rgba(57,189,248,0.15); color: var(--c-blue); }
  .perm-tag.off { background: var(--c-surface); color: var(--c-text-mute); text-decoration: line-through; }

  /* ── 操作 ── */
  .actions { display: flex; gap: 4px; }
  .btn-act { background: none; border: 1px solid; border-radius: 20px; padding: 3px 12px; font-size: 10px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: all 0.2s; font-family: inherit; }
  .btn-act:hover { opacity: 0.8; }
  .btn-edit     { background: rgba(245,158,11,0.18); color: rgba(255,255,255,0.88); border-color: rgba(245,158,11,0.72); }
  .btn-delete   { background: rgba(239,68,68,0.18);  color: rgba(255,255,255,0.88); border-color: rgba(239,68,68,0.72); }
  .btn-restore  { background: rgba(12,199,85,0.18);  color: rgba(255,255,255,0.88); border-color: rgba(12,199,85,0.72); }
  .btn-perm-del { background: rgba(239,68,68,0.18);  color: rgba(255,255,255,0.88); border-color: rgba(239,68,68,0.72); }

  /* ═══════════════════════════════════════════════════
     編集モーダル (#sf-edit-modal)
     ═══════════════════════════════════════════════════ */
  #sf-edit-modal {
    display:none; position:fixed; inset:0; z-index:9000;
    background:rgba(0,0,0,0.55); align-items:center; justify-content:center;
  }
  #sf-edit-modal.open { display:flex; }
  #sf-edit-modal .em-app {
    background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radius);
    overflow:hidden; width:90%; max-width:640px; height:85%; max-height:720px;
    display:flex; flex-direction:column; box-shadow:0 8px 32px rgba(0,0,0,0.5);
  }

  /* ── ヘッダー ── */
  #sf-edit-modal #sf-em-header {
    background:var(--c-surface-2); color:var(--c-text);
    padding:16px 20px 13px; flex-shrink:0;
    cursor:grab; user-select:none;
  }
  #sf-edit-modal #sf-em-header:active { cursor:grabbing; }
  #sf-edit-modal #sf-em-header-title { font-size:15px; font-weight:700; letter-spacing:0.02em; }
  #sf-edit-modal #sf-em-header-sub   { font-size:11px; opacity:0.55; margin-top:3px; letter-spacing:0.04em; }

  /* ── フォーム本体 ── */
  #sf-edit-modal #sf-em-form-body {
    flex:1; overflow-y:auto; padding:14px 16px;
    display:flex; flex-direction:column; gap:10px;
  }
  #sf-edit-modal #sf-em-form-body::-webkit-scrollbar { width:4px; }
  #sf-edit-modal #sf-em-form-body::-webkit-scrollbar-track { background:transparent; }
  #sf-edit-modal #sf-em-form-body::-webkit-scrollbar-thumb { background:#555; border-radius:4px; }

  /* ── セクション ── */
  #sf-edit-modal .em-section-title {
    font-size:11px; font-weight:700; color:rgba(255,255,255,0.88);
    letter-spacing:0.06em; text-transform:uppercase;
    background: var(--c-accent-18); border-left: 3px solid var(--c-accent-72); border-radius: 0 6px 6px 0; padding: 5px 10px; margin-top:6px;
  }

  /* ── フィールド ── */
  #sf-edit-modal .em-field-group { display:flex; flex-direction:column; gap:4px; }
  #sf-edit-modal .em-field-label { font-size:11px; font-weight:700; color:var(--c-text-sub); }
  #sf-edit-modal .em-field-label .req { color:var(--c-danger); margin-left:3px; }
  #sf-edit-modal .em-field-input {
    width:100%; padding:9px 11px; height:40px; box-sizing:border-box; border:1px solid var(--c-border);
    border-radius:7px; font-size:13.5px; background:var(--c-surface);
    color:#FFFFFF; outline:none; font-family:inherit; transition:border-color 0.18s, box-shadow 0.18s; -webkit-appearance:none;
  }
  #sf-edit-modal .em-field-input:focus { border-color:var(--c-accent); box-shadow:0 0 0 2.5px rgba(57,189,248,0.15); }
  #sf-edit-modal select.em-field-input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23888888' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; cursor: pointer; }
  #sf-edit-modal textarea.em-field-input { height:auto; resize:vertical; min-height:70px; line-height:1.65; }

  /* ── 2カラム ── */
  #sf-edit-modal .em-row-2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }

  /* ── 写真 ── */
  #sf-edit-modal #sf-em-photo-section { display:flex; align-items:center; gap:14px; }
  #sf-edit-modal #sf-em-photo-circle {
    width:60px; height:60px; border-radius:50%; background:var(--c-surface);
    display:flex; align-items:center; justify-content:center;
    font-size:26px; flex-shrink:0; overflow:hidden;
    border:2px solid var(--c-border); cursor:pointer; position:relative;
  }
  #sf-edit-modal #sf-em-photo-circle:hover::after {
    content:'📷'; position:absolute; font-size:18px;
    background:rgba(0,0,0,0.45); width:100%; height:100%;
    display:flex; align-items:center; justify-content:center; border-radius:50%;
  }
  #sf-edit-modal #sf-em-photo-circle img { width:100%; height:100%; object-fit:cover; }
  #sf-edit-modal #sf-em-photo-file-input { display:none; }
  #sf-edit-modal #sf-em-photo-upload-wrap { flex:1; }
  #sf-edit-modal #sf-em-btn-select-photo {
    background:rgba(12,199,85,0.1); border:1px dashed var(--c-green);
    color:rgba(255,255,255,0.88); border-radius:8px; padding:7px 14px;
    font-size:12px; cursor:pointer; width:100%; text-align:center;
  }
  #sf-edit-modal #sf-em-btn-select-photo:hover { background:rgba(12,199,85,0.2); }
  #sf-edit-modal .em-photo-hint { font-size:11px; color:var(--c-text-mute); margin-top:4px; text-align:center; }

  /* ── 権限セクション ── */
  #sf-edit-modal #sf-em-perms-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  #sf-edit-modal .em-perm-item {
    display:flex; align-items:center; gap:8px;
    background:var(--c-surface-2); border:1px solid var(--c-border);
    border-radius:8px; padding:8px 10px; cursor:pointer;
    transition:border-color .15s, background .15s; user-select:none;
  }
  #sf-edit-modal .em-perm-item:hover { border-color:var(--c-green); background:rgba(12,199,85,0.1); }
  #sf-edit-modal .em-perm-item.checked { border-color:var(--c-green); background:rgba(12,199,85,0.15); }
  #sf-edit-modal .em-perm-check {
    width:16px; height:16px; border:2px solid var(--c-border); border-radius:4px;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; font-size:10px; transition:border-color .15s, background .15s;
  }
  #sf-edit-modal .em-perm-item.checked .em-perm-check { border-color:var(--c-green); background:var(--c-green); color:#0a1f12; }
  #sf-edit-modal .em-perm-label-text { font-size:12px; color:var(--c-text); font-weight:600; }
  #sf-edit-modal .em-perm-desc { font-size:10px; color:var(--c-text-mute); margin-top:1px; }

  /* ── LINE連携 ── */
  #sf-edit-modal #sf-em-line-section { display:flex; flex-direction:column; gap:8px; }
  #sf-edit-modal .em-line-status-badge {
    display:inline-flex; align-items:center; gap:6px; padding:5px 12px;
    border-radius:20px; font-size:12px; font-weight:700; width:fit-content;
  }
  #sf-edit-modal .em-line-connected { background:rgba(12,199,85,0.2); color:rgba(255,255,255,0.88); }
  #sf-edit-modal .em-line-issued    { background:rgba(245,158,11,0.2); color:var(--c-orange); }
  #sf-edit-modal .em-line-none      { background:var(--c-border); color:var(--c-text-sub); }
  #sf-edit-modal #sf-em-btn-issue-url {
    background:rgba(12,199,85,0.18); color:rgba(255,255,255,0.88);
    border:1px solid rgba(12,199,85,0.72); border-radius:8px;
    padding:8px 16px; font-size:13px; font-weight:700; cursor:pointer; width:fit-content;
  }
  #sf-edit-modal #sf-em-btn-issue-url:hover { background:rgba(12,199,85,0.28); }
  #sf-edit-modal .em-line-url-row { display:flex; gap:8px; align-items:center; }
  #sf-edit-modal #sf-em-line-url-input {
    flex:1; font-family:monospace; font-size:11px; padding:8px 10px;
    border:1px solid var(--c-border); border-radius:8px;
    background:var(--c-surface); color:var(--c-text-sub); outline:none;
  }
  #sf-edit-modal #sf-em-btn-copy-url {
    background:rgba(12,199,85,0.18); color:rgba(255,255,255,0.88);
    border:1px solid rgba(12,199,85,0.72); border-radius:8px;
    padding:0 14px; height:36px; font-size:12px; font-weight:700;
    cursor:pointer; white-space:nowrap; flex-shrink:0;
  }
  #sf-edit-modal #sf-em-btn-copy-url:hover { background:rgba(12,199,85,0.28); }
  #sf-edit-modal .em-line-expiry-note { font-size:11px; color:var(--c-text-mute); margin-top:3px; }

  /* ── フッター ── */
  #sf-edit-modal #sf-em-footer {
    display:flex; gap:10px; padding:12px 16px;
    border-top:1px solid var(--c-border); background:var(--c-surface-2); flex-shrink:0;
  }
  #sf-edit-modal #sf-em-btnCancel {
    flex:1; padding:11px; border:1px solid var(--c-border); border-radius:10px;
    background:var(--c-surface); color:rgba(255,255,255,0.55);
    font-size:13.5px; font-weight:600; cursor:pointer; font-family:inherit;
  }
  #sf-edit-modal #sf-em-btnCancel:hover { background:rgba(60,58,58,0.8); }
  #sf-edit-modal #sf-em-btnSave {
    flex:2; padding:11px; border:1px solid rgba(57,189,248,0.72); border-radius:10px;
    background:rgba(57,189,248,0.18); color:rgba(255,255,255,0.88);
    font-size:13.5px; font-weight:700; cursor:pointer; font-family:inherit;
    letter-spacing:0.03em; transition:background .15s;
  }
  #sf-edit-modal #sf-em-btnSave:hover    { background:rgba(57,189,248,0.28); }
  #sf-edit-modal #sf-em-btnSave:disabled { background:var(--c-surface); border-color:var(--c-border); cursor:default; color:var(--c-text-mute); }


/* ──────────────────────────────────────
   stateSettings.html
   ────────────────────────────────────── */

  :root {
    --c-bg: #0f0f0f;
    --c-surface: #1c1c1c;
    --c-surface-2: #242424;
    --c-border: #383838;
    --c-orange:    #F59E0B;
    --c-blue:      #39BDF8;
    --c-green:     #0CC755;
    --c-text:      #FFFFFF;
    --c-text-sub:  rgba(255,255,255,0.55);
    --c-text-mute: rgba(255,255,255,0.35);
    --c-danger:    #ef4444;
    --radius:      12px;
    --shadow:      0 10px 28px rgba(0,0,0,.22);
  }


  /* ── ラップ ── */
  .settings-wrap {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* ── ヘッダー ── */
  #st-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    flex-shrink: 0;
  }
  #st-header h2 {
    font-size: 15px;
    font-weight: 700;
  }
  #st-header-sub {
    font-size: 12px;
    color: var(--c-text-mute);
  }

  /* ── カードグリッド ── */
  #st-settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    align-content: start;
    flex: 1;
    overflow-y: auto;
    padding-bottom: 20px;
  }
  #st-settings-grid::-webkit-scrollbar { width: 6px; }
  #st-settings-grid::-webkit-scrollbar-track { background: transparent; }
  #st-settings-grid::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 3px; }

  /* ── 設定カード ── */
  .setting-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, transform .15s;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .setting-card:hover {
    border-color: rgba(12,199,85,0.45);
    box-shadow: 0 0 18px rgba(12,199,85,.2), 0 4px 16px rgba(0,0,0,.3);
    transform: translateY(-2px);
  }

  /* カードアイコンエリア */
  .card-icon-area {
    height: 100px;
    background: var(--c-surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
  }

  /* カード情報エリア */
  .card-body {
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .card-title {
    font-size: 14px;
    font-weight: 700;
  }
  .card-desc {
    font-size: 12px;
    color: var(--c-text-sub);
    line-height: 1.6;
  }

  /* カードフッター */
  .card-footer {
    padding: 10px 16px;
    border-top: 1px solid var(--c-border);
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .card-btn {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.88);
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .card-btn svg { transition: transform .15s; }
  .setting-card:hover .card-btn svg { transform: translateX(3px); }

  /* ── 設定モーダル（共通枠） ── */
  .setting-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(0,0,0,0.55);
    align-items: center;
    justify-content: center;
  }
  .setting-modal-overlay.open { display: flex; }
  .setting-modal-inner {
    background: var(--c-bg);
    border-radius: var(--radius);
    border: 1px solid var(--c-border);
    overflow: hidden;
    width: 90%;
    max-width: 640px;
    height: 85%;
    max-height: 720px;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow);
  }


  /* ═══════════════════════════════════════════════
     LINE設定モーダル内スタイル
  ═══════════════════════════════════════════════ */
  /* --- embedded from lineSettings.html --- */

  :root {
    --c-bg: #0f0f0f;
    --c-base: #0a0a0a;
    --c-surface: #1c1c1c;
    --c-border: #383838;
    --c-orange:    #F59E0B;
    --c-blue:      #39BDF8;
    --c-green:     #0CC755;
    --c-text:      #FFFFFF;
    --c-text-sub:  rgba(255,255,255,0.55);
    --c-text-mute: rgba(255,255,255,0.35);
    --c-danger:    #ef4444;
    --c-surface-2: #242424;
    --radius:      12px;
    --shadow:      0 10px 28px rgba(0,0,0,.22);
  }

  #st-modal-line #stl-app {
    background: var(--c-bg);
    border-radius: var(--radius);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  /* ── ヘッダー ── */
  #st-modal-line #stl-header {
    background: var(--c-surface-2);
    color: var(--c-text);
    padding: 16px 20px 13px;
    flex-shrink: 0;
  }
  #st-modal-line #stl-header-title { font-size: 15px; font-weight: 700; letter-spacing: 0.02em; }
  #st-modal-line #stl-header-sub { font-size: 11px; opacity: 0.55; margin-top: 3px; letter-spacing: 0.04em; }

  /* ── タブバー ── */
  #st-modal-line #stl-tab-bar {
    display: flex;
    border-bottom: 2px solid var(--c-border);
    flex-shrink: 0;
    background: var(--c-bg);
  }
  #st-modal-line .tab-btn {
    flex: 1;
    padding: 11px 4px 9px;
    border: none;
    background: transparent;
    font-size: 12px;
    font-weight: 600;
    color: var(--c-text-sub);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
  }
  #st-modal-line .tab-btn.active {
    color: rgba(255,255,255,0.88);
    border-bottom-color: var(--c-accent);
  }
  #st-modal-line .tab-btn:hover:not(.active) { color: var(--c-text); }

  /* ── タブコンテンツ ── */
  #st-modal-line .tab-content { display: none; flex: 1; overflow-y: auto; padding: 14px 16px; }
  #st-modal-line .tab-content.active { display: flex; flex-direction: column; gap: 14px; }
  #st-modal-line .tab-content::-webkit-scrollbar { width: 4px; }
  #st-modal-line .tab-content::-webkit-scrollbar-track { background: transparent; }
  #st-modal-line .tab-content::-webkit-scrollbar-thumb { background: #555; border-radius: 4px; }

  /* ── ステータスバッジ ── */
  #st-modal-line #stl-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    align-self: flex-start;
  }
  #st-modal-line #stl-status-badge.connected { background: rgba(12, 199, 85, 0.18); color: rgba(255,255,255,0.88); border-left: 3px solid rgba(12,199,85,0.72); padding-left: 11px; }
  #st-modal-line #stl-status-badge.disconnected { background: rgba(239, 68, 68, 0.2); color: var(--c-danger); }
  #st-modal-line #stl-status-badge .dot { font-size: 10px; }

  /* ── セクション ── */
  #st-modal-line .section-card {
    background: var(--c-surface);
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: var(--shadow);
    border: 1px solid var(--c-border);
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  #st-modal-line .section-title {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255,255,255,0.88);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 5px 10px;
    background: var(--c-accent-18);
    border-left: 3px solid var(--c-accent-72);
    border-radius: 0 6px 6px 0;
    margin-top: 6px;
  }
  #st-modal-line .section-subtitle {
    font-size: 10px;
    color: var(--c-text-mute);
    margin-left: 6px;
    letter-spacing: normal;
    text-transform: none;
  }

  /* ── フォーム ── */
  #st-modal-line .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  #st-modal-line .form-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
  #st-modal-line .form-grid.cols-1 { grid-template-columns: 1fr; }
  #st-modal-line .form-group { display: flex; flex-direction: column; gap: 5px; }
  #st-modal-line .form-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--c-text-sub);
    display: flex;
    align-items: center;
    gap: 4px;
  }
  #st-modal-line .form-label .req { color: var(--c-danger); }
  #st-modal-line .form-input {
    font-size: 13.5px;
    padding: 9px 11px;
    height: 40px;
    box-sizing: border-box;
    border: 1px solid var(--c-border);
    border-radius: 7px;
    background: var(--c-bg);
    color: #FFFFFF;
    outline: none;
    width: 100%;
    font-family: inherit;
    -webkit-appearance: none;
    transition: border-color 0.18s, box-shadow 0.18s;
  }
  #st-modal-line .form-input:focus { border-color: var(--c-accent); box-shadow: 0 0 0 2.5px rgba(57,189,248,0.15); }
  #st-modal-line .form-input.secret { font-family: monospace; letter-spacing: 1px; }

  /* ── トグルスイッチ ── */
  #st-modal-line .toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
  }
  #st-modal-line .toggle-label {
    font-size: 13px;
    color: var(--c-text);
    flex: 1;
    line-height: 1.4;
  }
  #st-modal-line .toggle-wrap { flex-shrink: 0; }
  #st-modal-line .toggle-input { display: none; }
  #st-modal-line .toggle-slider {
    display: block;
    width: 44px;
    height: 24px;
    background: #555;
    border-radius: 12px;
    position: relative;
    cursor: pointer;
    transition: background 0.2s;
  }
  #st-modal-line .toggle-slider::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  }
  #st-modal-line .toggle-input:checked + .toggle-slider { background: var(--c-green); }
  #st-modal-line .toggle-input:checked + .toggle-slider::after { transform: translateX(20px); }

  /* ── 保存ボタン ── */
  #st-modal-line #stl-btn-save-settings {
    flex: 2;
    padding: 11px;
    border: 1px solid rgba(57,189,248,0.72);
    border-radius: 10px;
    background: rgba(57,189,248,0.18);
    color: rgba(255,255,255,0.88);
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.03em;
    transition: background 0.15s;
  }
  #st-modal-line #stl-btn-save-settings:hover { background: rgba(57,189,248,0.28); }
  #st-modal-line #stl-btn-save-settings:disabled { background: var(--c-surface); border-color: var(--c-border); color: var(--c-text-mute); cursor: default; }
  #st-modal-line #stl-save-msg {
    display: none;
    font-size: 12px;
    text-align: center;
    color: rgba(255,255,255,0.88);
    padding: 8px;
    border-radius: 6px;
  }
  #st-modal-line #stl-save-msg.show {
    display: block;
    background: rgba(12,199,85,0.18);
    border: 1px solid rgba(12,199,85,0.72);
  }
  #st-modal-line #stl-save-msg.error {
    display: block;
    color: var(--c-danger);
    background: rgba(239,68,68,0.1);
    border: 1px solid rgba(239,68,68,0.35);
  }

  /* ── テンプレートタブ（lineTemplates.html の内容を統合） ── */
  #st-modal-line #stl-tmpl-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  #st-modal-line #stl-tmpl-header-left { font-size: 13px; font-weight: 700; color: var(--c-text); }
  #st-modal-line #stl-tmpl-count { font-size: 11px; color: var(--c-text-mute); margin-left: 6px; font-weight: 400; }
  #st-modal-line #stl-btn-add-tmpl {
    padding: 8px 14px;
    border: 1px solid rgba(12,199,85,0.35);
    border-radius: 10px;
    background: rgba(12,199,85,0.12);
    color: rgba(255,255,255,0.88);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
    white-space: nowrap;
  }
  #st-modal-line #stl-btn-add-tmpl:hover { background: rgba(12,199,85,0.28); }

  #st-modal-line #stl-tmpl-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    flex: 1;
    padding-right: 2px;
  }
  #st-modal-line #stl-tmpl-list::-webkit-scrollbar { width: 4px; }
  #st-modal-line #stl-tmpl-list::-webkit-scrollbar-track { background: transparent; }
  #st-modal-line #stl-tmpl-list::-webkit-scrollbar-thumb { background: #555; border-radius: 4px; }

  #st-modal-line #stl-tmpl-empty { display: none; text-align: center; color: var(--c-text-mute); font-size: 13px; padding: 24px 0; line-height: 1.8; }
  #st-modal-line #stl-tmpl-loading { text-align: center; color: var(--c-text-mute); font-size: 13px; padding: 24px 0; }

  #st-modal-line .tmpl-row {
    background: var(--c-surface);
    border-radius: var(--radius);
    padding: 12px 14px;
    box-shadow: var(--shadow);
    display: flex;
    gap: 10px;
    align-items: flex-start;
  }
  #st-modal-line .tmpl-content { flex: 1; min-width: 0; }
  #st-modal-line .tmpl-title { font-size: 13px; font-weight: 700; color: var(--c-text); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #st-modal-line .tmpl-body { font-size: 11px; color: var(--c-text-sub); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.5; }
  #st-modal-line .tmpl-actions { display: flex; gap: 4px; flex-shrink: 0; }
  #st-modal-line .btn-tmpl { border: none; border-radius: 8px; padding: 5px 10px; font-size: 11px; font-weight: 700; cursor: pointer; font-family: inherit; transition: opacity 0.15s; }
  #st-modal-line .btn-tmpl:hover { opacity: 0.8; }
  #st-modal-line .btn-edit-tmpl { background: var(--c-border); color: var(--c-text-sub); }
  #st-modal-line .btn-delete-tmpl { background: rgba(239, 68, 68, 0.2); color: var(--c-danger); }

  /* ── モーダル共通 ── */
  #st-modal-line .overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.6); z-index: 100;
    align-items: center; justify-content: center;
  }
  #st-modal-line .overlay.show { display: flex; }
  #st-modal-line .modal-box {
    width: min(92vw, 380px);
    background: var(--c-bg);
    border-radius: 12px;
    border: 1px solid var(--c-border);
    padding: 24px;
    display: flex; flex-direction: column; gap: 14px;
    max-height: 90vh;
    overflow-y: auto;
  }
  #st-modal-line .modal-title { font-size: 15px; font-weight: 700; color: var(--c-text); }

  #st-modal-line .modal-form-group { display: flex; flex-direction: column; gap: 6px; }
  #st-modal-line .modal-label { font-size: 12px; font-weight: 600; color: var(--c-text-sub); }
  #st-modal-line .modal-input {
    padding: 9px 12px;
    border: 1px solid var(--c-border);
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s;
    width: 100%;
    background: var(--c-bg);
    color: var(--c-text);
  }
  #st-modal-line .modal-input:focus { border-color: var(--c-accent); }
  #st-modal-line .modal-textarea {
    min-height: 110px;
    padding: 9px 12px;
    border: 1px solid var(--c-border);
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
    outline: none;
    transition: border-color 0.15s;
    line-height: 1.6;
    width: 100%;
    background: var(--c-bg);
    color: var(--c-text);
  }
  #st-modal-line .modal-textarea:focus { border-color: var(--c-accent); }
  #st-modal-line .char-count { font-size: 10px; color: var(--c-text-mute); text-align: right; }

  #st-modal-line .modal-btns { display: flex; gap: 8px; justify-content: flex-end; }
  #st-modal-line .btn-cancel-modal { flex: 1; padding: 11px; border: 1px solid var(--c-border); border-radius: 10px; background: var(--c-surface); color: rgba(255,255,255,0.55); font-size: 13.5px; font-weight: 600; cursor: pointer; font-family: inherit; transition: background 0.15s; }
  #st-modal-line .btn-cancel-modal:hover { background: rgba(60,58,58,0.8); }
  #st-modal-line .btn-ok-modal { flex: 1; padding: 11px; border: 1px solid rgba(12,199,85,0.72); border-radius: 10px; background: rgba(12,199,85,0.18); color: rgba(255,255,255,0.88); font-size: 13.5px; font-weight: 700; cursor: pointer; font-family: inherit; transition: background 0.15s; }
  #st-modal-line .btn-ok-modal:hover { background: rgba(12,199,85,0.28); }
  #st-modal-line .btn-ok-modal:disabled { background: var(--c-surface); border-color: var(--c-border); color: var(--c-text-mute); cursor: default; }
  #st-modal-line .btn-danger-modal { flex: 1; padding: 11px; border: 1px solid rgba(239,68,68,0.35); border-radius: 10px; background: rgba(239,68,68,0.18); color: rgba(239,68,68,0.9); font-size: 13.5px; font-weight: 700; cursor: pointer; font-family: inherit; transition: background 0.15s; }
  #st-modal-line .btn-danger-modal:hover { background: rgba(239,68,68,0.28); }
  #st-modal-line .modal-sub { font-size: 12px; color: var(--c-text-sub); }

  /* ── フッター ── */
  #st-modal-line #stl-footer {
    padding: 12px 16px;
    background: var(--c-surface-2);
    border-top: 1px solid var(--c-border);
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
  }
  #st-modal-line .footer-btns {
    display: flex;
    gap: 10px;
  }
  #st-modal-line #stl-btnCancel {
    flex: 1;
    padding: 11px;
    border: 1px solid var(--c-border);
    border-radius: 10px;
    background: var(--c-surface);
    color: rgba(255,255,255,0.55);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
  }
  #st-modal-line #stl-btnCancel:hover { background: rgba(60,58,58,0.8); }

  /* ── レスポンシブ ── */
  @media (max-width: 480px) {
    #st-modal-line .form-grid { grid-template-columns: 1fr; }
    #st-modal-line .form-grid.cols-3 { grid-template-columns: 1fr; }
    #st-modal-line .tab-btn { font-size: 12px; padding: 10px 6px; }
    #st-modal-line .tab-content { padding: 12px 10px; }
    #st-modal-line .section-card { padding: 14px; }
  }
  @media (min-width: 481px) and (max-width: 680px) {
    #st-modal-line .form-grid.cols-3 { grid-template-columns: 1fr 1fr; }
  }

/* --- end lineSettings CSS --- */

  /* ═══════════════════════════════════════════════
     プラン設定モーダル内スタイル
  ═══════════════════════════════════════════════ */
  /* --- embedded from planSettings.html --- */

  :root {
    --c-bg: #0f0f0f;
    --c-base: #0a0a0a;
    --c-surface: #1c1c1c;
    --c-border: #383838;
    --c-orange:    #F59E0B;
    --c-blue:      #39BDF8;
    --c-green:     #0CC755;
    --c-text:      #FFFFFF;
    --c-text-sub:  rgba(255,255,255,0.55);
    --c-text-mute: rgba(255,255,255,0.35);
    --c-danger:    #ef4444;
    --c-surface-2: #242424;
    --radius: 12px;
    --shadow: 0 10px 28px rgba(0,0,0,.22);
  }

  #st-section-plan #stp-app {
    background: var(--c-bg);
    border-radius: 6px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  /* ── ヘッダー（ダッシュボード設定 .ds-header と統一） ── */
  #st-section-plan #stp-header {
    padding: 14px 20px 12px;
    border-bottom: 1px solid var(--c-border);
    flex-shrink: 0;
  }
  #st-section-plan #stp-header-title { font-size: 13px; font-weight: 700; color: var(--c-text); }
  #st-section-plan #stp-header-sub { font-size: 11px; color: var(--c-text-mute); margin-top: 3px; }

  /* ── タブバー ── */
  #st-section-plan #stp-tab-bar {
    display: flex;
    border-bottom: 2px solid var(--c-border);
    flex-shrink: 0;
    background: var(--c-bg);
  }
  #st-section-plan .tab-btn {
    flex: 1;
    padding: 11px 4px 9px;
    border: none;
    background: transparent;
    font-size: 12px;
    font-weight: 600;
    color: var(--c-text-sub);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
  }
  #st-section-plan .tab-btn.active { color: var(--c-text); border-bottom-color: var(--c-accent); }

  /* ── スクロール本体 ── */
  #st-section-plan #stp-form-wrap {
    flex: 1;
    overflow-y: auto;
    padding: 14px 16px;
  }
  #st-section-plan #stp-form-wrap::-webkit-scrollbar { width: 4px; }
  #st-section-plan #stp-form-wrap::-webkit-scrollbar-track { background: transparent; }
  #st-section-plan #stp-form-wrap::-webkit-scrollbar-thumb { background: #555; border-radius: 4px; }

  /* ── タブパネル ── */
  #st-section-plan .tab-panel { display: none; flex-direction: column; gap: 12px; }
  #st-section-plan .tab-panel.active { display: flex; }

  /* ── セクションタイトル（スタジオ設定と統一） ── */
  #st-section-plan .section-title {
    font-size: 10px;
    font-weight: 700;
    color: var(--c-text);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--c-border);
    margin-top: 6px;
    margin-bottom: 10px;
  }

  /* ── アイテムカード ── */
  #st-section-plan .item-list { display: flex; flex-direction: column; gap: 8px; }
  #st-section-plan .item-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: border-color 0.15s;
    box-shadow: var(--shadow);
  }
  #st-section-plan .item-card:hover { border-color: var(--c-accent); }
  #st-section-plan .item-card.editing { border-color: var(--c-accent); }
  #st-section-plan .item-drag {
    color: var(--c-text-mute);
    font-size: 16px;
    cursor: grab;
    flex-shrink: 0;
    line-height: 1;
  }
  #st-section-plan .item-info { flex: 1; min-width: 0; }
  #st-section-plan .item-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--c-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #st-section-plan .item-price {
    font-size: 12px;
    color: var(--c-text-sub);
    margin-top: 2px;
  }
  #st-section-plan .item-price strong { color: var(--c-text); }
  #st-section-plan .item-btns { display: flex; gap: 6px; flex-shrink: 0; }
  #st-section-plan .btn-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid var(--c-border);
    background: var(--c-surface-2);
    color: var(--c-text-sub);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, border-color 0.12s;
  }
  #st-section-plan .btn-icon:hover { background: var(--c-border); color: var(--c-text); border-color: var(--c-border); }
  #st-section-plan .btn-icon.del:hover { background: rgba(239, 68, 68, 0.2); border-color: var(--c-danger); color: var(--c-danger); }

  /* ── インラインフォーム ── */
  #st-section-plan .inline-form {
    background: var(--c-surface);
    border-radius: var(--radius);
    border: 2px solid var(--c-green);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  #st-section-plan .inline-form-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--c-text);
    letter-spacing: 0.04em;
  }
  #st-section-plan .form-row { display: flex; flex-direction: column; gap: 5px; }
  #st-section-plan .form-row-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  #st-section-plan .form-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--c-text-sub);
  }
  #st-section-plan .form-input, #st-section-plan .form-textarea {
    font-size: 13.5px;
    padding: 9px 11px;
    height: 40px;
    box-sizing: border-box;
    border: 1px solid var(--c-border);
    border-radius: 7px;
    background: var(--c-bg);
    color: var(--c-text);
    outline: none;
    font-family: inherit;
    -webkit-appearance: none;
    transition: border-color 0.18s, box-shadow 0.18s;
  }
  #st-section-plan .form-textarea {
    height: auto;
    min-height: 72px;
    line-height: 1.65;
    resize: vertical;
  }
  #st-section-plan .form-input:focus, #st-section-plan .form-textarea:focus {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 2.5px rgba(57,189,248,0.15);
  }
  #st-section-plan .form-textarea {
    height: auto;
    min-height: 64px;
    resize: vertical;
    line-height: 1.6;
  }
  #st-section-plan .inline-form-btns {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
  }
  #st-section-plan .btn-cancel {
    flex: 1;
    padding: 11px;
    border: 1px solid var(--c-border);
    border-radius: 10px;
    background: var(--c-surface);
    color: var(--c-text-sub);
    font-size: 13.5px;
    font-weight: 600;
  }
  #st-section-plan .btn-cancel:hover { background: rgba(60,58,58,0.8); }
  #st-section-plan .btn-save-item {
    flex: 2;
    padding: 11px;
    border: 1px solid rgba(57,189,248,0.72);
    border-radius: 10px;
    background: rgba(57,189,248,0.18);
    color: var(--c-text);
    font-size: 13.5px;
    font-weight: 700;
  }
  #st-section-plan .btn-save-item:hover { background: rgba(57,189,248,0.28); }

  /* ── 追加ボタン ── */
  #st-section-plan .btn-add-item {
    padding: 10px;
    border: 1px dashed var(--c-border);
    border-radius: 10px;
    background: transparent;
    color: var(--c-text-sub);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
  #st-section-plan .btn-add-item:hover {
    border-color: var(--c-accent);
    color: var(--c-text);
    background: rgba(12,199,85,0.18);
  }

  /* ── 空の状態 ── */
  #st-section-plan .empty-msg {
    text-align: center;
    padding: 24px 16px;
    color: var(--c-text-mute);
    font-size: 13px;
  }

  /* ── フッター（ダッシュボード設定 .ds-footer と統一） ── */
  #st-section-plan #stp-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--c-border);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-shrink: 0;
  }
  #st-section-plan #stp-btnCancel {
    padding: 9px 20px;
    border: 1px solid var(--c-border);
    border-radius: 7px;
    background: var(--c-surface);
    color: var(--c-text-sub);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
  }
  #st-section-plan #stp-btnCancel:hover { background: var(--c-hover, rgba(60,58,58,0.8)); }
  #st-section-plan #stp-save-result {
    display: none;
    flex: 1;
    font-size: 12px;
    text-align: center;
    color: var(--c-text);
    font-weight: 600;
    padding: 8px;
    border-radius: 6px;
  }
  #st-section-plan #stp-save-result.show {
    display: block;
    background: rgba(12,199,85,0.18);
    border: 1px solid rgba(12,199,85,0.72);
  }
  #st-section-plan #stp-save-result.error {
    display: block;
    color: var(--c-danger);
    background: rgba(239,68,68,0.1);
    border: 1px solid rgba(239,68,68,0.35);
  }

  /* ── 確認ダイアログ ── */

/* --- end planSettings CSS --- */

  /* ═══════════════════════════════════════════════
     スタジオ設定モーダル内スタイル
  ═══════════════════════════════════════════════ */
  /* --- embedded from studioSetting.html --- */

  :root {
    --c-bg: #0f0f0f;
    --c-base: #0a0a0a;
    --c-surface: #1c1c1c;
    --c-border: #383838;
    --c-orange:    #F59E0B;
    --c-blue:      #39BDF8;
    --c-green:     #0CC755;
    --c-text:      #FFFFFF;
    --c-text-sub:  rgba(255,255,255,0.55);
    --c-text-mute: rgba(255,255,255,0.35);
    --c-danger:    #ef4444;
    --c-surface-2: #242424;
    --radius:      12px;
    --shadow:      0 10px 28px rgba(0,0,0,.22);
  }


  #st-section-studio #sts-app {
    background: var(--c-bg);
    border-radius: 6px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  /* ── ヘッダー（ダッシュボード設定 .ds-header と統一） ── */
  #st-section-studio #sts-header {
    padding: 14px 20px 12px;
    border-bottom: 1px solid var(--c-border);
    flex-shrink: 0;
  }
  #st-section-studio #sts-header-title { font-size: 13px; font-weight: 700; color: var(--c-text); }
  #st-section-studio #sts-header-sub { font-size: 11px; color: var(--c-text-mute); margin-top: 3px; }

  /* ── フォーム領域 ── */
  #st-section-studio #sts-form-wrap {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  #st-section-studio #sts-form-wrap::-webkit-scrollbar { width: 4px; }
  #st-section-studio #sts-form-wrap::-webkit-scrollbar-thumb { background: #555; border-radius: 4px; }

  /* ── セクションタイトル ── */
  #st-section-studio .section-title {
    font-size: 10px;
    font-weight: 700;
    color: var(--c-text);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--c-border);
    margin-top: 6px;
    margin-bottom: 10px;
  }

  /* ── 設定行（ステッパー付き横並び） ── */
  #st-section-studio .setting-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 14px 16px;
  }
  #st-section-studio .setting-row label {
    flex: 1;
    font-size: 10px;
    font-weight: 700;
    color: var(--c-text-sub);
    line-height: 1.4;
  }
  #st-section-studio .setting-row label span {
    display: block;
    font-size: 10px;
    color: var(--c-text-mute);
    margin-top: 2px;
  }

  /* ── 設定カード（テキスト入力グループ用） ── */
  #st-section-studio .setting-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 10px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* ↓ stateSettings の非スコープ .setting-card を上書き */
    cursor: default;
    overflow: visible;
    box-shadow: none;
    transition: none;
  }
  #st-section-studio .setting-card:hover {
    border-color: var(--c-border);
    box-shadow: none;
    transform: none;
  }
  #st-section-studio .field-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  #st-section-studio .field-row label {
    font-size: 10px;
    font-weight: 700;
    color: var(--c-text-sub);
  }
  #st-section-studio .field-row input[type="text"],
  #st-section-studio .field-row input[type="tel"],
  #st-section-studio .field-row input[type="number"],
  #st-section-studio .field-row select {
    width: 100%;
    padding: 9px 11px;
    height: 40px;
    box-sizing: border-box;
    font-size: 13.5px;
    border: 1px solid var(--c-border);
    border-radius: 7px;
    outline: none;
    color: var(--c-text);
    background: var(--c-bg);
    font-family: inherit;
    -webkit-appearance: none;
    transition: border-color 0.18s, box-shadow 0.18s;
  }
  #st-section-studio .field-row textarea {
    width: 100%;
    padding: 9px 11px;
    font-size: 13.5px;
    border: 1px solid var(--c-border);
    border-radius: 7px;
    outline: none;
    color: var(--c-text);
    background: var(--c-bg);
    font-family: inherit;
    resize: vertical;
    min-height: 72px;
    line-height: 1.65;
    transition: border-color 0.18s, box-shadow 0.18s;
  }
  #st-section-studio .field-row input[type="text"]:focus,
  #st-section-studio .field-row input[type="tel"]:focus,
  #st-section-studio .field-row input[type="number"]:focus,
  #st-section-studio .field-row select:focus,
  #st-section-studio .field-row textarea:focus {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 2.5px rgba(57,189,248,0.15);
  }
  #st-section-studio .field-row select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23888888' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px;
    cursor: pointer;
  }

  /* 登録番号：T + 入力欄 横並び */
  #st-section-studio .reg-input-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  #st-section-studio .reg-prefix {
    font-size: 18px;
    font-weight: 700;
    color: var(--c-text);
    line-height: 1;
  }
  #st-section-studio .reg-input-wrap input[type="text"] {
    flex: 1;
    padding: 9px 11px;
    height: 40px;
    box-sizing: border-box;
    font-size: 13.5px;
    border: 1px solid var(--c-border);
    border-radius: 7px;
    outline: none;
    color: var(--c-text);
    background: var(--c-bg);
    font-family: inherit;
    -webkit-appearance: none;
    transition: border-color 0.18s, box-shadow 0.18s;
  }
  #st-section-studio .reg-input-wrap input[type="text"]:focus {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 2.5px rgba(57,189,248,0.15);
  }

  /* ── ステッパー ── */
  #st-section-studio .input-unit {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  #st-section-studio .input-unit input[type="number"] {
    width: 72px;
    padding: 9px 11px;
    font-size: 13.5px;
    font-weight: 600;
    text-align: center;
    border: 1px solid var(--c-border);
    border-radius: 7px;
    outline: none;
    color: var(--c-text);
    background: var(--c-bg);
    transition: border-color 0.2s;
    -moz-appearance: textfield;
    font-family: inherit;
  }
  #st-section-studio .input-unit input[type="number"]::-webkit-inner-spin-button,
  #st-section-studio .input-unit input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; }
  #st-section-studio .input-unit input[type="number"]:focus {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 2.5px rgba(57,189,248,0.15);
  }
  #st-section-studio .input-unit .unit { font-size: 13px; color: var(--c-text-sub); white-space: nowrap; }
  #st-section-studio .stepper { display: flex; flex-direction: column; gap: 3px; }
  #st-section-studio .stepper button {
    width: 28px;
    height: 20px;
    border: 1px solid var(--c-border);
    background: var(--c-surface);
    color: var(--c-text-sub);
    border-radius: 4px;
    font-size: 10px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s;
    line-height: 1;
  }
  #st-section-studio .stepper button:hover {
    background: var(--c-border);
    border-color: var(--c-accent);
    color: var(--c-text);
  }

  #st-section-studio .error-msg {
    color: var(--c-danger);
    font-size: 12px;
    margin-top: 2px;
    padding: 0 4px;
    display: none;
  }
  #st-section-studio .info-box {
    font-size: 11px;
    color: var(--c-text-mute);
    padding: 0 2px;
    line-height: 1.6;
  }

  /* ── フッター（ダッシュボード設定 .ds-footer と統一） ── */
  #st-section-studio #sts-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--c-border);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-shrink: 0;
  }
  #st-section-studio #sts-btnCancel {
    padding: 9px 20px;
    border: 1px solid var(--c-border);
    border-radius: 7px;
    background: var(--c-surface);
    color: var(--c-text-sub);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
  }
  #st-section-studio #sts-btnCancel:hover { background: var(--c-hover, rgba(60,58,58,0.8)); }
  #st-section-studio #sts-btnSave:disabled { opacity: .5; cursor: default; }

  #st-section-studio .saved-toast {
    display: none;
    text-align: center;
    color: var(--c-text);
    background: rgba(12,199,85,0.18);
    border: 1px solid rgba(12,199,85,0.72);
    border-radius: 8px;
    font-size: 13px; font-weight: 600;
    padding: 8px 0;
    animation: fadeIn 0.3s ease;
  }
  @keyframes fadeIn {
    #st-section-studio from { opacity: 0; transform: translateY(4px); }
    #st-section-studio to { opacity: 1; transform: translateY(0); }
  }

  /* ── Stripe連携ボタン ── */
  #st-section-studio .stripe-desc {
    font-size: 12px;
    color: var(--c-text-sub);
    line-height: 1.7;
  }
  #st-section-studio .stripe-btn {
    width: 100%;
    border: none;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: opacity 0.15s;
  }
  #st-section-studio .stripe-btn:hover { opacity: 0.85; }
  #st-section-studio .stripe-btn-primary {
    padding: 11px;
    background: rgba(124,58,237,0.18);
    color: rgba(255,255,255,0.88);
    font-weight: 700;
    border: 1px solid rgba(124,58,237,0.72);
    border-radius: 10px;
    font-size: 13.5px;
  }
  #st-section-studio .stripe-btn-primary:hover { background: rgba(124,58,237,0.3); }

/* --- end studioSetting CSS --- */

/* ──────────────────────────────────────
   galleryList.html
   ────────────────────────────────────── */

  :root {
    --c-bg: #0f0f0f;
    --c-base:      #0a0a0a;
    --c-surface: #1c1c1c;
    --c-surface2: #181818;
    --c-border: #383838;
    --c-orange:    #F59E0B;
    --c-blue:      #39BDF8;
    --c-green:     #0CC755;
    --c-water:     #4fc3f7;
    --c-purple:    #A78BFA;
    --c-pink:      #F472B6;
    --c-cyan:      #22D3EE;
    --c-text:      #FFFFFF;
    --c-text-sub:  rgba(255,255,255,0.55);
    --c-text-mute: rgba(255,255,255,0.35);
    --c-danger:    #ef4444;
    --c-surface-2: #242424;
    --radius:      12px;
    --shadow:      0 10px 28px rgba(0,0,0,.22);
  }

  /* ══════════════════════════════════════
     3ペインレイアウト（左:一覧 / 中央:詳細 / 右:プレビュー）
  ══════════════════════════════════════ */

  /* 左パネル */
  .gl-sp-list {
    width: 280px;
    min-width: 220px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--c-border);
    overflow: hidden;
    height: 100%;
  }

  /* 中央パネル（詳細） */
  .gl-sp-detail {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
  }

  /* 右パネル（プレビュー）— 撮影会の ps-right-pane に準拠 */
  .gl-sp-preview {
    width: 300px;
    flex-shrink: 0;
    border-left: 1px solid var(--c-border);
    overflow-y: hidden;
    background: var(--c-surface);
    display: flex;
    flex-direction: column;
    /* パネル自身が明確な高さを持つ。これが無いと .bk-preview-body の
       flex:1 が解決されず、スマホ枠の中央寄せが効かない。 */
    height: 100%;
    min-height: 0;
  }
  /* プレビュー本体 — スマホ枠を中央上寄せで配置 */
  .gl-sp-preview .bk-preview-body {
    flex: 1; min-height: 0; overflow-y: auto;
    display: flex; justify-content: center; align-items: center;
    padding: 14px 0;
  }
  /* スマホ枠 = 表示サイズ固定（284×556px・枠ごと固定で縦に伸びない）。
     内側 iframe は 390px 幅（スマホ実幅）でレンダリングし、transform:scale で
     この枠に縮小フィット。これで customerPage のモバイルレイアウトが正しい
     端末幅で描画される。枠の内寸は border 7px を引いた 270×542px。 */
  .gl-sp-preview .bk-preview-phone {
    width: 284px; height: 556px;
    flex-shrink: 0; overflow: hidden;
    /* ベース .bk-preview-phone の align-self:flex-start を打ち消し中央寄せ */
    align-self: center;
  }
  #gl-preview-iframe {
    width: 390px; height: 783px;
    border: none; display: block; background: #fff;
    transform: scale(0.6923);
    transform-origin: top left;
  }

  /* 左パネルヘッダー */
  .gl-panel-hd {
    display: flex;
    align-items: center;
    padding: 14px 14px 10px;
    border-bottom: 1px solid var(--c-border);
    flex-shrink: 0;
    background: var(--c-surface-2);
  }
  .gl-panel-hd-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--c-text);
    display: flex;
    align-items: center;
    gap: 6px;
  }
  #gl-gallery-count {
    font-size: 11px;
    color: var(--c-text-mute);
    font-weight: 400;
  }

  /* フィルター */
  .gl-list-filters {
    padding: 10px 12px 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-bottom: 1px solid var(--c-border);
    flex-shrink: 0;
  }
  .gl-list-filters #gl-search {
    width: 100%;
    box-sizing: border-box;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    color: var(--c-text);
    padding: 7px 10px;
    border-radius: 7px;
    font-size: 12px;
    font-family: inherit;
    outline: none;
  }
  .gl-list-filters #gl-search::placeholder { color: var(--c-text-mute); }
  .gl-list-filters #gl-search:focus { border-color: var(--c-accent); }
  .gl-filter-select {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    color: var(--c-text-sub);
    padding: 5px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-family: inherit;
    cursor: pointer;
    outline: none;
  }
  .gl-filter-select:hover { border-color: rgba(255,255,255,0.35); }

  /* リスト本体 */
  .gl-list-body {
    flex: 1;
    overflow-y: auto;
  }
  .gl-list-body::-webkit-scrollbar { width: 4px; }
  .gl-list-body::-webkit-scrollbar-track { background: transparent; }
  .gl-list-body::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 3px; }

  /* リスト行 */
  .gl-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--c-border);
    transition: background 0.12s;
  }
  .gl-list-item:hover { background: var(--c-hover); }
  .gl-list-item.active { background: var(--c-accent-dim); border-left: 2px solid var(--c-accent); padding-left: 12px; }

  /* サムネイル */
  .gl-list-thumb {
    width: 42px;
    height: 42px;
    border-radius: 6px;
    background: var(--c-surface-2);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-text-mute);
    overflow: hidden;
  }
  .gl-list-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
  }

  /* テキスト情報 */
  .gl-list-info { flex: 1; min-width: 0; }
  .gl-list-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--c-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .gl-list-sub {
    font-size: 11px;
    color: var(--c-text-mute);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .gl-list-badge {
    font-size: 10px;
    color: var(--c-accent);
    font-weight: 600;
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* 左パネル空状態 */
  .gl-list-empty {
    padding: 40px 16px;
    text-align: center;
    font-size: 13px;
    color: var(--c-text-mute);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  /* ギャラリー一覧 読み込み失敗時の再試行ボタン */
  .gl-list-retry-btn {
    margin-top: 4px;
    padding: 7px 18px;
    font-size: 12px;
    font-weight: 600;
    color: var(--c-accent, #c98aa0);
    background: transparent;
    border: 1px solid var(--c-accent, #c98aa0);
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s, color .15s;
  }
  .gl-list-retry-btn:hover {
    background: var(--c-accent, #c98aa0);
    color: #fff;
  }
  .gl-list-retry-btn:disabled {
    opacity: 0.5;
    cursor: default;
  }

  /* GIFローディング共通 (v1.70.2 — 40px 統一) */
  .gl-loading-gif {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 0;
  }
  .gl-loading-gif img {
    width: 40px;
    height: 40px;
    opacity: .85;
  }
  /* 統一ローディング (テキスト「読み込み中...」を置換するためのインライン GIF) */
  .kz-loading-img {
    display: inline-block;
    width: 40px;
    height: 40px;
    vertical-align: middle;
    opacity: 0.85;
  }
  /* ブロック中央配置用 */
  .kz-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 0;
  }
  .kz-loading::before {
    content: '';
    display: inline-block;
    width: 40px;
    height: 40px;
    background: url('https://xhkfcahyqwsorforrrck.supabase.co/storage/v1/object/public/assets/kizunalog_rotate_4s_pulse3.gif') center/contain no-repeat;
    opacity: 0.85;
  }

  /* ══════════════════════════════════════
     右パネル — 詳細
  ══════════════════════════════════════ */

  /* 右パネル空状態 */
  .gl-detail-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100%;
    color: var(--c-text-mute);
    font-size: 13px;
    gap: 12px;
  }

  /* 詳細アプリコンテナ */
  #gl-app {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* ── ヘッダー ── */
  #gl-app-hd {
    display: flex;
    align-items: center;
    padding: 12px 18px 10px;
    border-bottom: 1px solid var(--c-border);
    flex-shrink: 0;
    gap: 10px;
    background: var(--c-surface-2);
  }
  #gl-header-title-area { flex: 1; }
  #gl-header-title { font-size: 15px; font-weight: 700; color: var(--c-text); letter-spacing: 0.02em; }
  #gl-header-sub   { font-size: 11px; color: var(--c-text-mute); margin-top: 2px; letter-spacing: 0.04em; }

  /* ── タブバー ── */
  #gl-tab-bar {
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
    display: flex;
    flex-shrink: 0;
  }
  .tab-btn {
    flex: 1;
    padding: 11px 4px 9px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    color: var(--c-text-sub);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: all .15s;
    font-family: inherit;
    white-space: nowrap;
  }
  .tab-btn:hover { color: var(--c-text); }
  .tab-btn.active {
    color: var(--c-accent);
    border-bottom-color: var(--c-accent);
  }

  /* ── ギャラリータブ ── */
  #gl-gallery-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  #gl-gallery-toolbar {
    display: flex;
    gap: 6px;
    padding: 10px 16px;
    flex-wrap: wrap;
    align-items: center;
    flex-shrink: 0;
    border-bottom: 1px solid var(--c-border);
    background: var(--c-surface);
  }
  .tb-select {
    padding: 7px 10px;
    border: 1px solid var(--c-border);
    border-radius: 20px;
    font-size: 12px;
    background: var(--c-surface-2);
    color: var(--c-text-sub);
    outline: none;
    cursor: pointer;
    font-family: inherit;
  }
  .tb-select:hover { border-color: var(--c-accent-72); }
  .tb-btn {
    padding: 7px 14px;
    border: 1px solid var(--c-border);
    border-radius: 20px;
    font-size: 12px;
    background: var(--c-surface-2);
    color: var(--c-text-sub);
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
    transition: all .15s;
  }
  .tb-btn:hover { background: var(--c-hover); border-color: var(--c-border); color: var(--c-text); }
  .tb-btn.active { background: var(--c-orange-18); color: var(--c-orange); border-color: var(--c-orange-72); }
  .tb-btn-primary {
    padding: 7px 16px;
    border: 1px solid var(--c-accent-72);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    background: var(--c-accent-18);
    color: var(--c-accent);
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
    transition: all .15s;
  }
  .tb-btn-primary:hover { background: var(--c-accent-dim); }
  .tb-btn-danger {
    padding: 7px 14px;
    border: 1px solid var(--c-danger-72);
    border-radius: 20px;
    font-size: 12px;
    background: var(--c-danger-18);
    color: var(--c-danger);
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: all .15s;
  }
  .tb-btn-danger:hover { opacity: 0.84; }
  #gl-photo-count {
    font-size: 12px;
    color: var(--c-text-mute);
    margin-left: 4px;
  }

  /* ══════════════════════════════════════
     写真グリッド
  ══════════════════════════════════════ */
  #gl-photo-grid {
    flex: 1;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 6px;
    align-content: start;
    padding: 10px 16px 40px;
  }
  #gl-photo-grid::-webkit-scrollbar { width: 4px; }
  #gl-photo-grid::-webkit-scrollbar-track { background: transparent; }
  #gl-photo-grid::-webkit-scrollbar-thumb { background: #555; border-radius: 4px; }

  .photo-card {
    position: relative;
    padding-bottom: 100%;
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    background: var(--c-surface);
    box-shadow: var(--shadow);
  }
  .photo-card img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .2s;
  }
  .photo-card:hover img { transform: scale(1.03); }

  /* 選択チェックボックス */
  .photo-check {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.6);
    background: rgba(0,0,0,.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .15s;
    z-index: 2;
  }
  .photo-card:hover .photo-check,
  .photo-card.selected .photo-check { opacity: 1; }
  .photo-card.selected .photo-check {
    background: var(--c-green);
    border-color: var(--c-accent);
  }
  .photo-card.selected .photo-check::after {
    content: '\2713';
    color: #fff;
    font-size: 12px;
    font-weight: 700;
  }

  /* 削除ボタン */
  .photo-del {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(239,68,68,0.18);
    border: 1px solid rgba(239,68,68,0.72);
    color: rgba(255,255,255,0.88);
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .15s;
    z-index: 2;
  }
  .photo-card:hover .photo-del { opacity: 1; }

  /* ファイル名オーバーレイ */
  .photo-name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px 6px 4px;
    background: linear-gradient(transparent, rgba(0,0,0,.6));
    font-size: 10px;
    color: rgba(255,255,255,.8);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0;
    transition: opacity .15s;
  }
  .photo-card:hover .photo-name { opacity: 1; }

  /* 統計バー */
  .photo-stats-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 6px 4px;
    background: linear-gradient(transparent, rgba(0,0,0,.65));
    font-size: 10px;
    color: rgba(255,255,255,.75);
    display: flex;
    gap: 6px;
    align-items: center;
    opacity: 1;
    pointer-events: none;
  }

  /* カバー表紙ボタン */
  .photo-cover-btn {
    position: absolute;
    bottom: 6px;
    right: 6px;
    background: rgba(0,0,0,.45);
    border: none;
    color: rgba(255,255,255,.6);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 5px;
    border-radius: 4px;
    z-index: 2;
    opacity: 0;
    transition: opacity .15s, color .15s;
  }
  .photo-card:hover .photo-cover-btn { opacity: 1; }
  .photo-cover-btn.active { color: #F59E0B; opacity: 1; }

  /* is-cover */
  .photo-card.is-cover { box-shadow: 0 0 0 2px rgba(245,158,11,0.72); }

  /* 空状態（写真グリッド内） */
  #gl-empty-state {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    color: var(--c-text-mute);
    font-size: 14px;
    gap: 12px;
  }
  #gl-empty-state .icon { font-size: 48px; opacity: .4; }

  /* ══════════════════════════════════════
     設定タブ
  ══════════════════════════════════════ */
  #gl-settings-panel {
    display: none;
    flex: 1;
    overflow-y: auto;
    padding: 14px 16px;
    flex-direction: column;
    gap: 0;
  }
  #gl-settings-panel::-webkit-scrollbar { width: 4px; }
  #gl-settings-panel::-webkit-scrollbar-track { background: transparent; }
  #gl-settings-panel::-webkit-scrollbar-thumb { background: #555; border-radius: 4px; }

  /* 対象アルバムセレクタ（常設・最上部） */
  #gl-s-album-picker {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--c-border);
  }
  #gl-s-album-picker .field-label { font-size: 11px; font-weight: 700; color: var(--c-text-sub); }
  #gl-s-album-picker select.field-input { font-weight: 600; }

  /* 対象未選択 / アルバム0件の案内 */
  #gl-s-no-album {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    color: var(--c-text-mute);
    font-size: 13px;
    gap: 12px;
    padding: 32px 16px;
    text-align: center;
  }
  #gl-s-no-album .icon { opacity: .4; }

  /* セクション */
  .section-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--c-accent);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--c-border);
    padding-bottom: 5px;
    margin-top: 14px;
    margin-bottom: 10px;
  }
  .section-title:first-child { margin-top: 0; }

  /* フィールド */
  .field-group { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
  .field-label { font-size: 11px; font-weight: 700; color: var(--c-text-sub); }
  .field-input {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--c-border);
    border-radius: 8px;
    font-size: 13px;
    background: var(--c-bg);
    color: var(--c-text);
    outline: none;
    font-family: inherit;
    transition: border-color 0.15s;
    box-sizing: border-box;
  }
  .field-input:focus { border-color: var(--c-accent); box-shadow: 0 0 0 2px rgba(57,189,248,0.15); }
  select.field-input { cursor: pointer; }

  /* 2カラム */
  .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

  /* チェック行 */
  .check-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
  }
  .check-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--c-accent);
    cursor: pointer;
    flex-shrink: 0;
  }
  .check-row label {
    font-size: 12px;
    color: var(--c-text-sub);
    cursor: pointer;
    flex: 1;
  }
  .check-row label:hover { color: var(--c-text); }

  /* ラジオ行 */
  .radio-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 4px 0;
  }
  .radio-row label {
    font-size: 12px;
    color: var(--c-text-sub);
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
  }
  .radio-row input[type="radio"] {
    accent-color: var(--c-accent);
    cursor: pointer;
  }

  /* 条件ブロック */
  .cond-block {
    display: none;
    padding: 10px 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--c-border);
    border-radius: 8px;
    margin-bottom: 8px;
  }
  .cond-block.open { display: block; }
  .cond-block .field-group { margin-bottom: 8px; }
  .cond-block .field-group:last-child { margin-bottom: 0; }

  /* ══════════════════════════════════════
     アルバムタブ
  ══════════════════════════════════════ */
  #gl-albums-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    position: relative;
  }
  #gl-albums-tab::-webkit-scrollbar { width: 4px; }
  #gl-albums-tab::-webkit-scrollbar-track { background: transparent; }
  #gl-albums-tab::-webkit-scrollbar-thumb { background: #555; border-radius: 4px; }

  #gl-albums-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--c-border);
    flex-shrink: 0;
  }
  #gl-albums-count {
    flex: 1;
    font-size: 12px;
    color: var(--c-text-mute);
  }
  #gl-albums-list {
    flex: 1;
  }
  #gl-albums-empty {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: var(--c-text-mute);
    font-size: 13px;
    gap: 10px;
  }
  #gl-albums-empty .icon { font-size: 36px; opacity: .4; }

  /* アルバムカード */
  .album-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--c-border);
    cursor: pointer;
    transition: background .12s;
  }
  .album-card:hover { background: var(--c-hover); }
  .album-card.active { background: var(--c-accent-dim); }
  .album-cover {
    width: 48px;
    height: 48px;
    border-radius: 7px;
    object-fit: cover;
    background: var(--c-surface-2);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-text-mute);
    overflow: hidden;
  }
  .album-cover img { width: 100%; height: 100%; object-fit: cover; border-radius: 7px; }
  .album-info { flex: 1; min-width: 0; }
  .album-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--c-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .album-meta {
    font-size: 11px;
    color: var(--c-text-mute);
    margin-top: 2px;
  }
  .album-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
  }
  .album-btn {
    padding: 5px 9px;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: 6px;
    color: var(--c-text-sub);
    font-size: 11px;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: all .12s;
  }
  .album-btn:hover { background: var(--c-border); color: var(--c-text); }
  .album-btn.danger { border-color: rgba(239,68,68,.4); color: var(--c-danger); }
  .album-btn.danger:hover { background: rgba(239,68,68,.12); }

  /* 顧客ページURLエリア */
  #gl-customer-page-info {
    padding: 12px 16px;
    border-top: 1px solid var(--c-border);
    background: rgba(255,255,255,0.02);
    margin-top: auto;
  }
  .cp-info-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--c-text-sub);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .cp-info-row {
    display: flex;
    gap: 6px;
    align-items: center;
  }
  #gl-customer-page-url {
    flex: 1;
    min-width: 0;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: 7px;
    padding: 7px 10px;
    font-size: 11px;
    color: var(--c-text-sub);
    font-family: monospace;
    outline: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ── アルバム編集ダイアログ ── */
  #gl-album-editor,
  #gl-move-dialog {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9500;
    background: rgba(0,0,0,0.55);
    align-items: center;
    justify-content: center;
  }
  #gl-album-editor { display: none; }
  #gl-move-dialog  { display: none; }
  #gl-album-editor[style*="block"],
  #gl-album-editor[style*="flex"],
  #gl-move-dialog[style*="block"],
  #gl-move-dialog[style*="flex"] { display: flex !important; }
  .album-editor-box {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    width: 90%;
    max-width: 400px;
    overflow: hidden;
  }
  .album-editor-head {
    display: flex;
    align-items: center;
    padding: 14px 18px 12px;
    border-bottom: 1px solid var(--c-border);
    background: var(--c-surface-2);
  }
  .album-editor-title {
    flex: 1;
    font-size: 14px;
    font-weight: 700;
    color: var(--c-text);
  }
  .album-editor-close {
    background: none;
    border: none;
    color: rgba(255,255,255,.4);
    font-size: 20px;
    cursor: pointer;
    padding: 2px 6px;
    transition: color .12s;
  }
  .album-editor-close:hover { color: #fff; }
  .album-editor-body { padding: 16px 18px; }
  .album-editor-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--c-border);
    background: var(--c-surface-2);
  }

  /* フッター */
  #gl-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 18px;
    border-top: 1px solid var(--c-border);
    background: var(--c-surface-2);
    flex-shrink: 0;
  }
  #gl-btn-save,
  #gl-btn-save-cpsettings {
    padding: 8px 20px;
    border: 1px solid var(--c-accent-72);
    border-radius: 8px;
    background: var(--c-accent-18);
    color: var(--c-accent);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all .15s;
  }
  #gl-btn-save:hover,
  #gl-btn-save-cpsettings:hover { background: var(--c-accent-dim); }
  #gl-btn-save:disabled,
  #gl-btn-save-cpsettings:disabled { background: var(--c-surface); border-color: var(--c-border); color: var(--c-text-mute); cursor: default; }

  /* ── ライトボックス ── */
  #gl-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9800;
    background: rgba(0,0,0,0.92);
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  #gl-lightbox.open { display: flex; }
  #gl-lb-img {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 4px;
  }
  #gl-lb-info {
    color: rgba(255,255,255,.6);
    font-size: 12px;
    margin-top: 10px;
    text-align: center;
  }
  #gl-lb-close {
    position: absolute;
    top: 16px;
    right: 20px;
    background: rgba(255,255,255,.1);
    border: none;
    color: #fff;
    font-size: 24px;
    padding: 6px 12px;
    cursor: pointer;
    border-radius: 50%;
    opacity: .6;
    transition: opacity .15s;
  }
  #gl-lb-close:hover { opacity: 1; }
  #gl-lb-prev, #gl-lb-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,.1);
    border: none;
    color: #fff;
    font-size: 24px;
    padding: 12px 16px;
    cursor: pointer;
    border-radius: 50%;
    opacity: .6;
    transition: opacity .15s;
  }
  #gl-lb-prev:hover, #gl-lb-next:hover { opacity: 1; }
  #gl-lb-prev { left: 16px; }
  #gl-lb-next { right: 16px; }
  #gl-lb-counter {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--c-text-mute);
    font-size: 12px;
  }

  /* ══════════════════════════════════════
     確認ダイアログ
  ══════════════════════════════════════ */
  #gl-confirm-dialog {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.6);
    z-index: 10000;
    align-items: center;
    justify-content: center;
  }
  #gl-confirm-dialog.open { display: flex; }
  .confirm-box {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px;
    max-width: 360px;
    width: 90%;
    text-align: center;
  }
  .confirm-box p { font-size: 14px; margin-bottom: 18px; line-height: 1.6; }
  .confirm-btns { display: flex; gap: 10px; justify-content: center; }
  .confirm-btns button {
    padding: 8px 24px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
  }
  /* 削除実行ボタン：テーマの danger 色 */
  .btn-confirm-ok { background: var(--c-danger-18); color: var(--c-danger); border: 1px solid var(--c-danger-72); font-weight: 700; }
  .btn-confirm-ok:hover { background: var(--c-danger-72); color: #fff; }
  /* キャンセルボタン：テーマ変数で文字色を確保（白文字＝白背景で不可視だった不具合を修正） */
  .btn-confirm-cancel { background: var(--c-surface-2); color: var(--c-text); border: 1px solid var(--c-border); }
  .btn-confirm-cancel:hover { border-color: var(--c-accent); color: var(--c-accent); }

  /* ── Stripe連携バッジ ── */
  #gl-stripe-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10px; padding: 3px 8px; border-radius: 20px;
    border: 1px solid var(--c-border); color: var(--c-text-mute);
    margin-left: 8px; vertical-align: middle;
  }
  #gl-stripe-badge .stripe-dot {
    width: 6px; height: 6px; border-radius: 50%; display: inline-block;
  }
  #gl-stripe-badge.linked   { border-color: rgba(12,199,85,.4); color: rgba(12,199,85,.85); }
  #gl-stripe-badge.linked .stripe-dot   { background: #0CC755; }
  #gl-stripe-badge.unlinked { border-color: rgba(239,68,68,.4); color: rgba(239,68,68,.85); }
  #gl-stripe-badge.unlinked .stripe-dot { background: #ef4444; }

  /* ── モバイル対応 ── */
  @media (max-width: 640px) {
    .gl-sp-list {
      width: 100%;
      border-right: none;
    }
    .gl-sp-detail {
      position: absolute;
      inset: 0;
      transform: translateX(100%);
      transition: transform 0.26s cubic-bezier(0.4,0,0.2,1);
      background: var(--c-surface);
      z-index: 10;
    }
    #gl-sp-layout.mob-detail .gl-sp-detail {
      transform: translateX(0);
    }
    #gl-sp-layout.mob-detail .gl-sp-list {
      display: none;
    }
    /* モバイルではプレビューパネルは非表示 */
    .gl-sp-preview { display: none; }
    .mob-back-btn { display: flex !important; }
  }

/* ──────────────────────────────────────
   photoSessionList.html
   ────────────────────────────────────── */

:root {
  --c-bg: #0f0f0f; --c-surface: #1c1c1c; --c-surface-2: #242424; --c-surface2: #181818;
  --c-border: #383838; --c-border-soft: #1e1e1e; --c-green: #0CC755; --c-green-dim: rgba(12,199,85,.15);
  --c-orange: #F59E0B; --c-blue: #39BDF8; --c-danger: #ef4444;
  --c-text: #FFFFFF; --c-text-sub: rgba(255,255,255,0.55); --c-text-light: rgba(255,255,255,0.55); --c-text-mute: rgba(255,255,255,0.35);
  --radius: 12px; --shadow: 0 10px 28px rgba(0,0,0,.22);
}
.photosession-wrap { padding:20px; height:100%; display:flex; flex-direction:column; overflow:hidden; }

/* ─── ツールバー ─── */
#ps-toolbar {
  display:flex; align-items:center; gap:10px; padding:10px 16px;
  background:var(--c-surface); border:1px solid var(--c-border);
  border-radius:var(--radius); box-shadow:var(--shadow);
  flex-shrink:0; margin-bottom:16px; z-index:100;
}
#ps-toolbar h1 { flex:1; font-size:14px; font-weight:700; letter-spacing:.05em; }
.btn {
  padding:6px 14px; border:none; border-radius:7px;
  font-size:12px; font-weight:700; cursor:pointer; font-family:inherit; white-space:nowrap;
}
.btn-green  { background:rgba(245,158,11,0.18); color:rgba(255,255,255,0.88); border:1px solid rgba(245,158,11,0.72); border-radius:20px; }
.btn-green:hover { background:rgba(245,158,11,0.28); }
.btn-danger { background:rgba(239,68,68,0.18); border:1px solid rgba(239,68,68,0.72); color:rgba(255,255,255,0.88); }
.btn-ghost  { background:transparent; border:1px solid var(--c-border); color:var(--c-text-light); }
.btn:hover  { opacity:.85; }

/* ─── コンテンツ ─── */
#ps-content { flex:1; overflow-y:auto; }

/* ─── 空状態 ─── */
#ps-empty { text-align:center; padding:60px 20px; color:var(--c-text-light); display:none; }
#ps-empty p { font-size:14px; margin-bottom:16px; }

/* ─── カード ─── */
#ps-cards { display:flex; flex-direction:column; gap:10px; }
.session-card {
  background:var(--c-surface); border:1px solid var(--c-border);
  border-radius:var(--radius); padding:14px 16px; box-shadow:var(--shadow);
  display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap;
}
.card-thumb {
  width:56px; height:56px; border-radius:8px;
  object-fit:cover; flex-shrink:0; background:var(--c-surface2);
}
.card-thumb-placeholder {
  width:56px; height:56px; border-radius:8px; flex-shrink:0;
  background:var(--c-surface2); display:flex; align-items:center;
  justify-content:center; font-size:22px; color:var(--c-text-light);
}
.card-main { flex:1; min-width:180px; }
.card-title {
  font-size:13px; font-weight:700; margin-bottom:5px;
  display:flex; align-items:center; gap:8px; overflow:hidden;
}
.card-title-text {
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0;
}
/* 撮影会カード 新規申込バッジ */
.ps-new-badge {
  flex-shrink:0;
  padding:2px 8px; border-radius:10px;
  font-size:10px; font-weight:800; white-space:nowrap;
  background:#ef4444; color:#fff;
  animation: badge-pop 0.2s ease-out;
  line-height:1.6;
}
.card-meta { font-size:11px; color:var(--c-text-light); display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; }
.card-meta span { display:flex; align-items:center; gap:3px; }
.status-badge {
  display:inline-flex; padding:3px 8px; border-radius:10px;
  font-size:10px; font-weight:700; white-space:nowrap;
}
.status-open   { background:rgba(12,199,85,0.18); color:rgba(255,255,255,0.88); border:1px solid rgba(12,199,85,0.72); }
.status-closed { background:rgba(255,255,255,0.08); color:var(--c-text-sub); border:1px solid rgba(255,255,255,0.18); }
.status-draft  { background:rgba(245,158,11,0.18); color:rgba(255,255,255,0.88); border:1px solid rgba(245,158,11,0.72); }

/* ─── アクションボタン（テキスト付き） ─── */
.card-actions {
  display:flex; align-items:center; gap:6px; flex-wrap:wrap; flex-shrink:0;
}
.act-btn {
  display:inline-flex; align-items:center; gap:5px;
  padding:6px 10px; border-radius:7px;
  background:var(--c-surface2); border:1px solid var(--c-border);
  color:var(--c-text-light); font-size:11px; font-weight:600;
  cursor:pointer; white-space:nowrap; font-family:inherit;
  transition:background .15s, color .15s;
}
.act-btn:hover { background:var(--c-border); color:var(--c-text); }
.act-btn .act-icon { font-size:14px; line-height:1; }
.act-btn.danger { border-color:rgba(238,85,85,.4); color:var(--c-danger); }
.act-btn.danger:hover { background:rgba(238,85,85,.12); }

/* ─── 削除確認モーダル ─── */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.65);
  display:none; align-items:center; justify-content:center; z-index:500;
}
.modal-overlay.show { display:flex; }
.modal {
  background:var(--c-surface); border:1px solid var(--c-border);
  border-radius:var(--radius); padding:24px; width:90%; max-width:400px;
}
.modal h2 { font-size:14px; margin-bottom:10px; }
.modal p  { font-size:12px; color:var(--c-text-light); margin-bottom:20px; line-height:1.6; }
.modal-actions { display:flex; justify-content:flex-end; gap:8px; }

/* ─── URL表示モーダル ─── */
#ps-url-modal .modal { max-width:480px; }
#ps-url-modal h2 { margin-bottom:6px; }
#ps-url-modal .url-desc { font-size:11px; color:var(--c-text-light); margin-bottom:12px; }
.url-box {
  display:flex; gap:8px; align-items:center;
  background:var(--c-surface2); border:1px solid var(--c-border);
  border-radius:9px; padding:10px 12px; margin-bottom:16px;
}
#ps-url-text {
  flex:1; background:transparent; border:none; color:rgba(255,255,255,0.88);
  font-size:12px; font-family:monospace; outline:none; cursor:text;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#ps-btnCopyUrl {
  flex-shrink:0; padding:5px 12px; background:rgba(12,199,85,0.18); border:1px solid rgba(12,199,85,0.72);
  border-radius:7px; color:rgba(255,255,255,0.88); font-size:11px; font-weight:700;
  cursor:pointer; font-family:inherit;
}
#ps-btnCopyUrl:hover { opacity:.85; }
.copy-hint { font-size:10px; color:var(--c-text-light); margin-bottom:16px; }


/* ═══════════════════════════════════════════════════
   編集モーダル (#ps-edit-modal)
   ═══════════════════════════════════════════════════ */
#ps-edit-modal {
  display:none; position:fixed; inset:0; z-index:600;
  align-items:center; justify-content:center;
  background:rgba(0,0,0,.65);
}
#ps-edit-modal.open { display:flex; }
#ps-edit-modal .modal-inner {
  background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radius);
  width:90%; max-width:640px; height:85%; max-height:720px;
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 8px 32px rgba(0,0,0,0.5);
}
/* ─── ヘッダー ─── */
#ps-edit-modal #ps-em-header {
  background:var(--c-surface-2); color:var(--c-text);
  padding:16px 20px 13px; flex-shrink:0;
  cursor:grab; user-select:none;
}
#ps-edit-modal #ps-em-header:active { cursor:grabbing; }
#ps-edit-modal #ps-em-header-title { font-size:15px; font-weight:700; letter-spacing:0.02em; }
#ps-edit-modal #ps-em-header-sub   { font-size:11px; opacity:0.55; margin-top:3px; letter-spacing:0.04em; }

/* ─── タブ ─── */
#ps-edit-modal #ps-em-tabs {
  background:var(--c-surface); border-bottom:1px solid var(--c-border);
  display:flex; flex-shrink:0;
}
#ps-edit-modal .em-tab {
  flex:1; text-align:center; padding:11px 8px; font-size:12px; cursor:pointer;
  color:var(--c-text-light); border-bottom:2px solid transparent;
  margin-bottom:-2px; transition:color .15s, border-color .15s;
}
#ps-edit-modal .em-tab.active { color:rgba(255,255,255,0.88); border-bottom-color:var(--c-accent); font-weight:700; }
#ps-edit-modal .em-tab:hover  { color:var(--c-text); }
#ps-edit-modal .em-tab-panel { display:none; padding:16px; }
#ps-edit-modal .em-tab-panel.active { display:block; }
#ps-edit-modal #ps-em-body { overflow-y:auto; flex:1; }

/* ─── フッター ─── */
#ps-edit-modal #ps-em-footer {
  padding:12px 16px; background:var(--c-surface-2);
  border-top:1px solid var(--c-border);
  display:flex; flex-direction:column; gap:8px; flex-shrink:0;
}
#ps-edit-modal .em-footer-btns { display:flex; gap:10px; }

/* ─── フォーム共通 ─── */
#ps-edit-modal .em-section { margin-bottom:18px; }
#ps-edit-modal .em-section-title {
  font-size:11px; font-weight:700; color:rgba(255,255,255,0.88); text-transform:uppercase;
  letter-spacing:.08em; margin-bottom:10px;
  background:var(--c-accent-18); border-left:3px solid var(--c-accent-72); border-radius:0 6px 6px 0; padding:5px 10px;
}
#ps-edit-modal .em-field-group { margin-bottom:12px; }
#ps-edit-modal .em-field-label { font-size:11px; color:var(--c-text-light); margin-bottom:5px; display:block; }
#ps-edit-modal .em-field-label .req { color:rgba(255,255,255,0.88); margin-left:2px; }
#ps-edit-modal .em-field-input {
  width:100%; padding:9px 11px; height:40px; box-sizing:border-box; background:var(--c-surface); border:1px solid var(--c-border);
  border-radius:7px; color:#FFFFFF; font-size:13.5px; font-family:inherit; outline:none; transition:border-color 0.18s, box-shadow 0.18s; -webkit-appearance:none;
}
#ps-edit-modal .em-field-input:focus { border-color:var(--c-accent); box-shadow:0 0 0 2.5px rgba(57,189,248,0.15); }
#ps-edit-modal textarea.em-field-input { height:auto; resize:vertical; min-height:80px; line-height:1.65; }
#ps-edit-modal select.em-field-input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23888888' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; cursor: pointer; }
#ps-edit-modal .em-field-row { display:flex; gap:10px; }
#ps-edit-modal .em-field-row .em-field-group { flex:1; }
#ps-edit-modal .em-hint { font-size:10px; color:var(--c-text-light); margin-top:3px; }

/* ─── チェックボックス / トグル ─── */
#ps-edit-modal .em-toggle-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; background:var(--c-surface2); border-radius:8px; margin-bottom:6px;
}
#ps-edit-modal .em-toggle-label { font-size:13px; }
#ps-edit-modal .em-toggle-sub   { font-size:10px; color:var(--c-text-light); }
#ps-edit-modal .em-toggle { position:relative; width:38px; height:20px; flex-shrink:0; }
#ps-edit-modal .em-toggle input { opacity:0; width:0; height:0; }
#ps-edit-modal .em-toggle-slider {
  position:absolute; inset:0; background:#555; border-radius:20px; cursor:pointer; transition:.2s;
}
#ps-edit-modal .em-toggle-slider::before {
  content:''; position:absolute; left:3px; top:3px;
  width:14px; height:14px; background:#fff; border-radius:50%; transition:.2s;
}
#ps-edit-modal .em-toggle input:checked + .em-toggle-slider { background:#3a5bd9; }
#ps-edit-modal .em-toggle input:checked + .em-toggle-slider::before { left:21px; }

/* ─── スロット ─── */
#ps-edit-modal #ps-em-slot-list { display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
#ps-edit-modal .em-slot-header-row {
  display:flex; align-items:flex-end; gap:8px; padding:0 10px 4px;
  font-size:10px; color:var(--c-text-mute); letter-spacing:.03em;
}
#ps-edit-modal .em-slot-header-small { padding-left:0; margin-top:6px; font-size:9px; }
#ps-edit-modal .em-slot-col-label { flex:1; }
#ps-edit-modal .em-slot-col-cap { width:72px; text-align:center; line-height:1.3; }
#ps-edit-modal .em-slot-item {
  display:flex; align-items:center; gap:8px;
  background:var(--c-surface2); border-radius:8px; padding:7px 10px;
}
#ps-edit-modal .em-slot-item .em-slot-label-input {
  flex:1; background:transparent; border:none; color:var(--c-text);
  font-size:13px; font-family:inherit; outline:none;
}
#ps-edit-modal .em-slot-cap {
  width:72px; background:rgba(255,255,255,.06); border:1px solid var(--c-border);
  border-radius:6px; color:var(--c-text); font-size:12px; font-family:inherit;
  padding:4px 6px; outline:none; text-align:center;
}
#ps-edit-modal .em-slot-cap:focus { border-color:var(--c-accent); box-shadow:0 0 0 2.5px rgba(57,189,248,0.15); }
#ps-edit-modal .em-slot-cap::placeholder { color:var(--c-text-mute); font-size:11px; }
/* Chrome/Safari の number input スピナー非表示 */
#ps-edit-modal .em-slot-cap::-webkit-inner-spin-button,
#ps-edit-modal .em-slot-cap::-webkit-outer-spin-button { -webkit-appearance:none; }
#ps-edit-modal .em-slot-del { background:none; border:none; color:var(--c-text-light); cursor:pointer; font-size:16px; padding:2px; }
#ps-edit-modal .em-slot-del:hover { color:var(--c-danger); }
/* 満員設定ラジオ */
#ps-edit-modal .em-slot-full-radio-group { display:flex; flex-direction:column; gap:10px; margin-top:10px; }
#ps-edit-modal .em-slot-full-radio {
  display:flex; align-items:flex-start; gap:10px; cursor:pointer;
  background:var(--c-surface2); border:1px solid var(--c-border);
  border-radius:10px; padding:12px 14px; transition:border-color .15s;
}
#ps-edit-modal .em-slot-full-radio:has(input:checked) { border-color:#3a5bd9; background:rgba(58,91,217,0.07); }
#ps-edit-modal .em-slot-full-radio input[type="radio"] { margin-top:3px; accent-color:#3a5bd9; }
#ps-edit-modal .em-slot-full-icon { font-size:16px; flex-shrink:0; margin-top:1px; }
#ps-edit-modal .em-slot-full-radio strong { font-size:13px; display:block; margin-bottom:2px; }
#ps-edit-modal .em-slot-full-radio small { font-size:11px; color:var(--c-text-mute); line-height:1.5; }
#ps-edit-modal .em-btn-add-small {
  padding:6px 12px; background:transparent; border:1px dashed rgba(57,189,248,0.45);
  border-radius:8px; color:rgba(57,189,248,0.75); font-size:12px; cursor:pointer; font-family:inherit;
}
#ps-edit-modal .em-btn-add-small:hover { border-color:var(--c-accent); color:var(--c-accent); background:var(--c-accent-18); }

/* ─── 料金プラン ─── */
#ps-edit-modal #ps-em-plan-list { display:flex; flex-direction:column; gap:10px; margin-bottom:10px; }
#ps-edit-modal .em-plan-card {
  background:var(--c-surface2); border:1px solid var(--c-border); border-radius:10px; padding:12px;
}
#ps-edit-modal .em-plan-header { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
#ps-edit-modal .em-plan-num { font-size:10px; color:var(--c-text-light); }
#ps-edit-modal .em-plan-del { margin-left:auto; background:none; border:none; color:var(--c-text-light); cursor:pointer; font-size:15px; }
#ps-edit-modal .em-plan-del:hover { color:var(--c-danger); }
#ps-edit-modal .em-plan-row { display:flex; gap:8px; margin-bottom:8px; }
#ps-edit-modal .em-plan-name-input { flex:2; }
#ps-edit-modal .em-plan-price-input { flex:1; }
#ps-edit-modal .em-plan-desc-input { width:100%; }

/* ─── カスタムフィールド ─── */
#ps-edit-modal #ps-em-custom-field-list { display:flex; flex-direction:column; gap:10px; margin-bottom:10px; }
#ps-edit-modal .em-cf-card {
  background:var(--c-surface2); border:1px solid var(--c-border); border-radius:10px; padding:12px;
}
#ps-edit-modal .em-cf-header { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
#ps-edit-modal .em-cf-num { font-size:10px; color:var(--c-text-light); }
#ps-edit-modal .em-cf-del { margin-left:auto; background:none; border:none; color:var(--c-text-light); cursor:pointer; font-size:15px; }
#ps-edit-modal .em-cf-del:hover { color:var(--c-danger); }
#ps-edit-modal .em-cf-row { display:flex; gap:8px; }
#ps-edit-modal .em-cf-label-input { flex:2; }
#ps-edit-modal .em-cf-type-select { flex:1; }
#ps-edit-modal .em-cf-options-wrap { margin-top:8px; }
#ps-edit-modal .em-cf-options-hint { font-size:10px; color:var(--c-text-light); margin-bottom:4px; }
#ps-edit-modal .em-cf-required-row { display:flex; align-items:center; gap:6px; margin-top:8px; font-size:11px; color:var(--c-text-light); }
#ps-edit-modal .em-cf-required-row input { accent-color:#3a5bd9; }

/* ─── エラー ─── */
#ps-edit-modal .em-error-msg { font-size:11px; color:var(--c-danger); margin-top:3px; display:none; }
#ps-edit-modal .em-field-input.error { border-color:var(--c-danger); }

/* ─── フッターボタン ─── */
#ps-edit-modal #ps-em-btnCancel {
  flex:1; padding:11px; border:1px solid var(--c-border); border-radius:10px;
  background:var(--c-surface); color:rgba(255,255,255,0.55);
  font-size:13.5px; font-weight:600; cursor:pointer; font-family:inherit;
  transition:background .15s;
}
#ps-edit-modal #ps-em-btnCancel:hover { background:rgba(60,58,58,0.8); }
#ps-edit-modal #ps-em-btnSave {
  flex:2; padding:11px; border:1px solid rgba(57,189,248,0.72); border-radius:10px;
  background:rgba(57,189,248,0.18); color:rgba(255,255,255,0.88);
  font-size:13.5px; font-weight:700; cursor:pointer; font-family:inherit;
  letter-spacing:0.03em; transition:background .15s;
}
#ps-edit-modal #ps-em-btnSave:hover    { background:rgba(57,189,248,0.28); }
#ps-edit-modal #ps-em-btnSave:disabled { background:var(--c-surface); border-color:var(--c-border); cursor:default; color:var(--c-text-mute); }


/* ─── 基本情報：日付リスト ─── */
#ps-edit-modal #ps-em-date-list { display:flex; flex-direction:column; gap:6px; margin-bottom:2px; }
#ps-edit-modal .em-date-item { display:flex; align-items:center; gap:8px; }
#ps-edit-modal .em-date-item .em-field-input { flex:1; }
#ps-edit-modal .em-date-del {
  background:none; border:none; color:var(--c-text-light); cursor:pointer; font-size:16px; padding:2px 6px;
  flex-shrink:0;
}
#ps-edit-modal .em-date-del:hover { color:var(--c-danger); }

/* ─── スロットエリア：日付ラベル ─── */
#ps-edit-modal .em-ds-date-label {
  font-size:13px; font-weight:700; color:var(--c-text);
}

/* ─── 複数日スロット ─── */
#ps-edit-modal #ps-em-slot-area { display:flex; flex-direction:column; gap:10px; }
#ps-edit-modal #ps-em-date-slot-list { display:flex; flex-direction:column; gap:10px; margin-bottom:10px; }
#ps-edit-modal .em-date-slot-card {
  background:var(--c-surface2); border:1px solid var(--c-border); border-radius:10px; padding:12px;
}
#ps-edit-modal .em-ds-header { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
#ps-edit-modal .em-ds-icon { font-size:14px; }
#ps-edit-modal .em-ds-date-input {
  flex:1; background:var(--c-surface); border:1px solid var(--c-border); border-radius:8px;
  color:var(--c-text); font-size:13px; font-family:inherit; padding:6px 8px; outline:none;
}
#ps-edit-modal .em-ds-date-input:focus { border-color:var(--c-accent); box-shadow:0 0 0 2.5px rgba(57,189,248,0.15); }
#ps-edit-modal .em-ds-del {
  padding:4px 10px; background:transparent; border:1px solid var(--c-danger);
  border-radius:7px; color:var(--c-danger); font-size:11px; cursor:pointer; font-family:inherit;
}
#ps-edit-modal .em-ds-del:hover { background:rgba(239,68,68,0.1); }
#ps-edit-modal .em-ds-slots { padding-left:8px; border-left:2px solid var(--c-border); margin-top:8px; }
#ps-edit-modal .em-ds-slot { margin-bottom:5px; }
#ps-edit-modal .em-ds-add-slot { margin-top:5px; font-size:11px; }

/* ─── 申込者一覧モーダル (#ps-ap-modal) ─── */
#ps-ap-modal {
  display:none; position:fixed; inset:0; z-index:600;
  align-items:center; justify-content:center;
  background:rgba(0,0,0,.65);
}
#ps-ap-modal.open { display:flex; }
#ps-ap-modal .ps-ap-inner {
  background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radius);
  width:92%; max-width:960px; height:88%; max-height:820px;
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 8px 32px rgba(0,0,0,0.5);
}
/* ─── ヘッダー（ドラッグ可能） ─── */
#ps-ap-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px 13px; flex-shrink:0;
  cursor:grab; user-select:none;
}
#ps-ap-header:active { cursor:grabbing; }
#ps-ap-header-title { font-size:15px; font-weight:700; letter-spacing:0.02em; }
#ps-ap-header-sub   { font-size:11px; opacity:0.55; margin-top:3px; letter-spacing:0.04em; }
#ps-ap-btnClose {
  background:none; border:none; color:rgba(255,255,255,0.5);
  font-size:18px; cursor:pointer; padding:4px 8px; line-height:1;
}
#ps-ap-btnClose:hover { color:var(--c-text); }
/* ─── サマリー ─── */
#ps-ap-summary {
  display:flex; gap:16px; align-items:center; padding:8px 16px;
  background:var(--c-surface2); border-bottom:1px solid var(--c-border);
  flex-wrap:wrap; flex-shrink:0;
}
.ps-ap-summary-item { font-size:12px; }
.ps-ap-summary-val { font-weight:700; color:var(--c-green); }
/* ─── フィルター ─── */
#ps-ap-filter-bar {
  display:flex; gap:8px; align-items:center; padding:8px 16px;
  border-bottom:1px solid var(--c-border); flex-shrink:0;
}
.ps-ap-filter-label { font-size:11px; color:var(--c-text-light); white-space:nowrap; }
.ps-ap-filter-select {
  padding:5px 8px; background:var(--c-surface2); border:1px solid var(--c-border);
  border-radius:7px; color:var(--c-text); font-size:12px; font-family:inherit; outline:none; cursor:pointer;
}
.ps-ap-filter-select:focus { border-color:var(--c-accent); box-shadow:0 0 0 2px rgba(57,189,248,0.15); }
#ps-ap-searchInput {
  flex:1; padding:5px 10px; background:var(--c-surface2); border:1px solid var(--c-border);
  border-radius:7px; color:var(--c-text); font-size:12px; font-family:inherit; outline:none;
}
#ps-ap-searchInput:focus { border-color:var(--c-accent); box-shadow:0 0 0 2px rgba(57,189,248,0.15); }
/* ─── ボディ（スクロール） ─── */
#ps-ap-body { overflow-y:auto; flex:1; }
#ps-ap-table-wrap { overflow-x:auto; padding:16px; }
#ps-ap-table-wrap table { width:100%; border-collapse:collapse; min-width:820px; }
#ps-ap-table-wrap thead th {
  padding:8px 10px; font-size:11px; font-weight:700; color:var(--c-text-light);
  text-align:left; border-bottom:1px solid var(--c-border); white-space:nowrap;
}
#ps-ap-table-wrap tbody tr { border-bottom:1px solid var(--c-border); }
#ps-ap-table-wrap tbody tr:hover { background:var(--c-surface2); }
#ps-ap-table-wrap tbody td { padding:10px 10px; font-size:12px; vertical-align:middle; }
#ps-ap-table-wrap .td-no     { color:var(--c-text-light); font-size:11px; width:40px; }
#ps-ap-table-wrap .td-name   { font-weight:600; }
#ps-ap-table-wrap .td-slot   { color:var(--c-green); font-size:11px; }
#ps-ap-table-wrap .td-date   { color:var(--c-text-light); font-size:11px; }
#ps-ap-table-wrap .td-detail { color:var(--c-text-light); font-size:11px; max-width:180px; }
#ps-ap-table-wrap select {
  background:var(--c-surface2); border:1px solid var(--c-border); border-radius:7px;
  color:var(--c-text); font-size:11px; font-family:inherit; padding:3px 6px; cursor:pointer; outline:none;
}
#ps-ap-table-wrap select.status-confirmed { color:var(--c-green); }
#ps-ap-table-wrap select.status-cancelled { color:var(--c-danger); }
#ps-ap-table-wrap .btn-register {
  padding:4px 10px; border:none; border-radius:6px;
  background:var(--c-blue); color:#1a1a1a; font-size:11px; font-weight:700;
  cursor:pointer; font-family:inherit; white-space:nowrap;
}
#ps-ap-table-wrap .btn-register:hover { opacity:.85; }
#ps-ap-table-wrap .btn-register:disabled { background:#444; color:var(--c-text-light); cursor:not-allowed; }
#ps-ap-table-wrap .badge-registered {
  display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:6px;
  background:rgba(12,199,85,.15); border:1px solid rgba(12,199,85,.3);
  color:var(--c-green); font-size:10px; font-weight:700; white-space:nowrap;
}
/* ─── フッター ─── */
#ps-ap-footer {
  padding:14px 20px; border-top:1px solid var(--c-border); flex-shrink:0;
}
#ps-ap-footer .ps-ap-footer-btns { display:flex; gap:10px; }
#ps-ap-footer #ps-ap-btnCsv {
  flex:1; padding:10px; border:1px solid var(--c-border); border-radius:10px;
  background:var(--c-surface); color:rgba(255,255,255,0.7);
  font-size:13px; font-weight:600; cursor:pointer; font-family:inherit;
}
#ps-ap-footer #ps-ap-btnCsv:hover { background:rgba(60,58,58,0.8); }
#ps-ap-footer #ps-ap-btnClose2 {
  flex:1; padding:10px; border:1px solid rgba(12,199,85,0.72); border-radius:10px;
  background:rgba(12,199,85,0.18); color:rgba(255,255,255,0.88);
  font-size:13px; font-weight:700; cursor:pointer; font-family:inherit;
}
#ps-ap-footer #ps-ap-btnClose2:hover { background:rgba(12,199,85,0.28); }

/* ─── メールアドレス常時必須バッジ ─── */
#ps-edit-modal .em-always-on {
  font-size:11px; font-weight:700; color:var(--c-green);
  background:var(--c-green-dim); border:1px solid rgba(12,199,85,.3);
  padding:3px 8px; border-radius:6px;
}

/* ──────────────────────────────────────
   dashboardStats.html
   ────────────────────────────────────── */

  :root {
    --c-bg: #0f0f0f;
    --c-surface: #1c1c1c;
    --c-border: #383838;
    --c-orange:    #F59E0B;
    --c-blue:      #39BDF8;
    --c-green:     #0CC755;
    --c-text:      #FFFFFF;
    --c-text-sub:  rgba(255,255,255,0.55);
    --c-text-mute: rgba(255,255,255,0.35);
  }

  #st-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    width: 100%;
    height: 100%;
  }

  .card {
    background: var(--c-surface);
    border-radius: 6px;
    border: 1px solid #ffffff;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    gap: 10px;
    min-height: 0;
  }
  .card:hover {
    box-shadow: none;
  }

  .card-label {
    font-size: clamp(11px, 1.4vw, 15px);
    color: var(--c-text-sub);
    font-weight: 500;
    text-align: center;
    letter-spacing: 0.02em;
  }

  .card-value {
    font-size: clamp(36px, 5vw, 72px);
    font-weight: 300;
    color: var(--c-text);
    line-height: 1;
    letter-spacing: -0.02em;
    transition: opacity 0.3s;
  }
  .card-value.loading {
    opacity: 0.2;
  }

  .card-unit {
    font-size: clamp(11px, 1.2vw, 13px);
    color: var(--c-text-mute);
    font-weight: 400;
  }

/* ──────────────────────────────────────
   todo.html
   ────────────────────────────────────── */

  :root {
    --c-bg: #0f0f0f;
    --c-base: #0a0a0a;
    --c-surface: #1c1c1c;
    --c-border: #383838;
    --c-orange:    #F59E0B;
    --c-blue:      #39BDF8;
    --c-green:     #0CC755;
    --c-text:      #FFFFFF;
    --c-text-sub:  rgba(255,255,255,0.55);
    --c-text-mute: rgba(255,255,255,0.35);
    --c-danger:    #ef4444;
  }

  body::-webkit-scrollbar { width: 4px; }
  body::-webkit-scrollbar-track { background: transparent; }
  body::-webkit-scrollbar-thumb { background: #555; border-radius: 0; }

  /* ── セクション ── */
  .section { margin-bottom: 18px; }

  .section-header {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 2px 8px;
  }
  .section-icon { font-size: 15px; }
  .section-title { font-size: 14px; font-weight: 700; color: var(--c-text); flex: 1; }
  .section-count {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
    color: #fff;
  }

  /* ── テーブル ── */
  .table {
    background: var(--c-base);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(0,0,0,0.3);
  }

  /* カラムヘッダー */
  .col-header {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    gap: 8px;
    background: var(--c-bg);
    border-bottom: 2px solid var(--c-border);
  }
  .col-header span {
    font-size: 11px;
    font-weight: 700;
    color: var(--c-text-sub);
    letter-spacing: 0.04em;
  }

  /* データ行 */
  .row {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    gap: 8px;
    border-bottom: 1px solid var(--c-border);
    flex-shrink: 0;
  }
  .row:last-child { border-bottom: none; }
  .row:hover { background: var(--c-surface); }

  .col-date {
    width: 46px;
    font-size: 12px;
    color: var(--c-text-sub);
    flex-shrink: 0;
  }
  .col-name {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: var(--c-text);
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* 日数バッジ */
  .days-badge {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 6px;
    color: #fff;
    white-space: nowrap;
  }

  /* 完了ボタン */
  .btn-complete {
    flex-shrink: 0;
    background: rgba(12,199,85,0.18);
    color: rgba(255,255,255,0.88);
    border: 1px solid rgba(12,199,85,0.72);
    border-radius: 6px;
    padding: 0 11px;
    height: 28px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
  }
  .btn-complete:hover { background: rgba(12,199,85,0.28); }

  /* 空状態 */
  .empty-row {
    text-align: center;
    color: var(--c-text-mute);
    font-size: 12px;
    padding: 14px;
  }

  /* ── 確認モーダル ── */
  #td-confirm-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 100;
    align-items: center;
    justify-content: center;
  }
  #td-confirm-overlay.show { display: flex; }
  #td-confirm-box {
    background: var(--c-surface);
    border-radius: 6px;
    padding: 22px 24px;
    width: 88%;
    max-width: 300px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    text-align: center;
  }
  #td-confirm-msg {
    font-size: 14px;
    color: var(--c-text);
    line-height: 1.65;
    margin-bottom: 18px;
    white-space: pre-wrap;
    word-break: break-all;
  }
  .confirm-btns { display: flex; gap: 10px; }
  #td-btn-yes {
    flex: 1; background: rgba(12,199,85,0.18); color: rgba(255,255,255,0.88);
    border: 1px solid rgba(12,199,85,0.72); border-radius: 6px; padding: 9px 0;
    font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit;
  }
  #td-btn-yes:hover { background: rgba(12,199,85,0.28); }
  #td-btn-no {
    flex: 1; background: var(--c-surface); color: rgba(255,255,255,0.55);
    border: 1px solid var(--c-border); border-radius: 6px; padding: 9px 0;
    font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit;
  }
  #td-btn-no:hover { border-color: rgba(255,255,255,0.22); color: rgba(255,255,255,0.88); }

/* ──────────────────────────────────────
   storageStatus.html
   ────────────────────────────────────── */

:root {
  --c-bg: #0f0f0f;
  --c-surface: #1c1c1c;
  --c-border: #383838;
  --c-green:       #0CC755;
  --c-orange:      #F59E0B;
  --c-danger:      #ef4444;
  --c-text:        #FFFFFF;
  --c-text-sub:    rgba(255,255,255,0.55);
  --c-text-mute:   rgba(255,255,255,0.35);
  --c-track:       rgba(255,255,255,0.08);
  --bar-color:     #0CC755;
}



#sg-app-wrapper {
  height: 100%;
  background: var(--c-bg);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  padding: 18px 16px 16px;
}

/* ── プラン名 ── */
#sg-plan-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 20px;
  padding: 4px 12px;
  margin-bottom: 16px;
}
#sg-plan-icon {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-green);
  flex-shrink: 0;
  transition: background 0.4s;
}
#sg-plan-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--c-text-sub);
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* ── 円グラフエリア ── */
#sg-chart-area {
  position: relative;
  width: 130px;
  height: 130px;
  flex-shrink: 0;
}

#sg-chart-area svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.ring-track {
  fill: none;
  stroke: var(--c-track);
  stroke-width: 9;
}

.ring-bar {
  fill: none;
  stroke: var(--c-green);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: 0;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1),
              stroke 0.4s ease;
}

/* ── 中央テキスト ── */
#sg-center-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

#sg-pct-value {
  font-size: 26px;
  font-weight: 800;
  color: var(--c-text);
  line-height: 1;
  letter-spacing: -0.02em;
  transition: color 0.4s;
}

#sg-pct-unit {
  font-size: 11px;
  font-weight: 500;
  color: var(--c-text-mute);
  margin-top: 1px;
}

/* ── 使用量テキスト ── */
#sg-usage-row {
  margin-top: 12px;
  display: flex;
  align-items: baseline;
  gap: 3px;
}

#sg-used-val {
  font-size: 13px;
  font-weight: 700;
  color: var(--c-text);
  transition: color 0.4s;
}

#sg-usage-sep {
  font-size: 11px;
  color: var(--c-text-mute);
}

#sg-max-val {
  font-size: 11px;
  color: var(--c-text-sub);
}

/* ── バーゲージ（細いライン） ── */
#sg-bar-track {
  width: 100%;
  height: 3px;
  background: var(--c-track);
  border-radius: 10px;
  margin-top: 10px;
  overflow: hidden;
}

#sg-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 10px;
  background: var(--c-green);
  transition: width 1.2s cubic-bezier(.4,0,.2,1),
              background 0.4s ease;
}

/* ── アップグレードボタン ── */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0.5); }
  50%       { box-shadow: 0 0 0 6px rgba(245,158,11,0); }
}

#sg-upgrade-area {
  margin-top: 14px;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
}

#sg-upgrade-area.visible {
  display: flex;
  animation: slideUp 0.5s cubic-bezier(.2,.8,.4,1) both;
}

#sg-upgrade-warn {
  font-size: 10px;
  color: var(--c-orange);
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.02em;
}

#sg-upgrade-btn {
  width: 100%;
  padding: 8px 0;
  background: rgba(245,158,11,0.18);
  border: 1px solid rgba(245,158,11,0.72);
  border-radius: 8px;
  color: rgba(255,255,255,0.88);
  font-size: 12px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: all 0.15s, transform 0.1s;
  animation: pulse 2s ease-in-out 0.8s infinite;
}
#sg-upgrade-btn:hover  { background: rgba(245,158,11,0.28); animation: none; }
#sg-upgrade-btn:active { transform: scale(0.97); }


/* ──────────────────────────────────────
   birthday.html
   ────────────────────────────────────── */

  :root {
    --c-bg: #0f0f0f;
    --c-surface: #1c1c1c;
    --c-border: #383838;
    --c-orange:    #F59E0B;
    --c-blue:      #39BDF8;
    --c-green:     #0CC755;
    --c-text:      #FFFFFF;
    --c-text-sub:  rgba(255,255,255,0.55);
    --c-text-mute: rgba(255,255,255,0.35);
  }

  #bd-loadingState { text-align: center; color: var(--c-text-sub); font-size: 13px; padding: 16px 0; }
  #bd-emptyState   { display: none; text-align: center; color: var(--c-text-mute); font-size: 13px; padding: 16px 0; }

  /* 5行分の高さでスクロール */
  #bd-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 268px; /* カード約50px × 5 + gap */
    overflow-y: auto;
    padding-right: 4px;
  }
  /* スクロールバーを細くしてすっきりさせる */
  #bd-list::-webkit-scrollbar { width: 4px; }
  #bd-list::-webkit-scrollbar-track { background: transparent; }
  #bd-list::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 4px; }

  .card {
    display: flex;
    align-items: center;
    background: var(--c-surface);
    border-radius: 10px;
    padding: 10px 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    gap: 8px;
    flex-shrink: 0;
  }

  /* 左：ケーキ＋名前 */
  .left { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
  .icon { font-size: 16px; flex-shrink: 0; }
  .name { font-size: 13px; font-weight: 600; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* 日付 */
  .date { font-size: 12px; color: var(--c-text-sub); white-space: nowrap; flex-shrink: 0; }

  /* 今月/来月バッジ */
  .badge { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; border: 1px solid; }
  .badge.this-month { background: rgba(245,158,11,0.18); color: rgba(255,255,255,0.88); border-color: rgba(245,158,11,0.72); }
  .badge.next-month { background: rgba(255,255,255,0.08); color: var(--c-text-sub); border-color: rgba(255,255,255,0.18); }

  /* LINEボタン */
  .btn-line {
    flex-shrink: 0;
    background: rgba(12,199,85,0.18);
    color: rgba(255,255,255,0.88);
    border: 1px solid rgba(12,199,85,0.72);
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
  }
  .btn-line:hover { background: rgba(12,199,85,0.28); }
  .btn-line.no-line { background: var(--c-surface); border-color: var(--c-border); color: var(--c-text-mute); cursor: default; }
  .btn-line.no-line:hover { background: var(--c-surface); }

  /* ── 確認モーダル ── */
  #bd-confirm-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 100;
    align-items: center;
    justify-content: center;
  }
  #bd-confirm-overlay.show { display: flex; }
  #bd-confirm-box {
    background: var(--c-surface);
    border-radius: 14px;
    padding: 24px 28px;
    width: 90%;
    max-width: 320px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    text-align: center;
  }
  #bd-confirm-msg {
    font-size: 14px;
    color: var(--c-text);
    line-height: 1.65;
    margin-bottom: 18px;
    white-space: pre-wrap;
    word-break: break-all;
  }
  .confirm-btns { display: flex; gap: 10px; }
  #bd-btn-confirm-ok {
    flex: 1; background: rgba(12,199,85,0.18); color: rgba(255,255,255,0.88);
    border: 1px solid rgba(12,199,85,0.72); border-radius: 8px; padding: 9px 0;
    font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit;
  }
  #bd-btn-confirm-ok:hover { background: rgba(12,199,85,0.28); }
  #bd-btn-confirm-cancel {
    flex: 1; background: var(--c-surface); color: rgba(255,255,255,0.55);
    border: 1px solid var(--c-border); border-radius: 8px; padding: 9px 0;
    font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit;
  }
  #bd-btn-confirm-cancel:hover { border-color: rgba(255,255,255,0.22); color: rgba(255,255,255,0.88); }


/* ──────────────────────────────────────
   anniversary.html
   ────────────────────────────────────── */

  :root {
    --c-bg: #0f0f0f;
    --c-surface: #1c1c1c;
    --c-border: #383838;
    --c-orange:    #F59E0B;
    --c-blue:      #39BDF8;
    --c-green:     #0CC755;
    --c-text:      #FFFFFF;
    --c-text-sub:  rgba(255,255,255,0.55);
    --c-text-mute: rgba(255,255,255,0.35);
  }

  #an-loadingState { text-align: center; color: var(--c-text-sub); font-size: 13px; padding: 16px 0; }
  #an-emptyState   { display: none; text-align: center; color: var(--c-text-mute); font-size: 13px; padding: 16px 0; }

  /* 5行分の高さでスクロール */
  #an-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 268px;
    overflow-y: auto;
    padding-right: 4px;
  }
  #an-list::-webkit-scrollbar { width: 4px; }
  #an-list::-webkit-scrollbar-track { background: transparent; }
  #an-list::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 4px; }

  .card {
    display: flex;
    align-items: center;
    background: var(--c-surface);
    border-radius: 10px;
    padding: 10px 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    gap: 8px;
    flex-shrink: 0;
  }

  .left { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
  .icon { font-size: 16px; flex-shrink: 0; }
  .name { font-size: 13px; font-weight: 600; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .date { font-size: 12px; color: var(--c-text-sub); white-space: nowrap; flex-shrink: 0; }

  .category {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    background: rgba(57,189,248,0.18);
    color: rgba(255,255,255,0.88);
    border: 1px solid rgba(57,189,248,0.72);
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* LINEボタン */
  .btn-line {
    flex-shrink: 0;
    background: rgba(12,199,85,0.18);
    color: rgba(255,255,255,0.88);
    border: 1px solid rgba(12,199,85,0.72);
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
  }
  .btn-line:hover { background: rgba(12,199,85,0.28); }
  .btn-line.no-line { background: var(--c-surface); border-color: var(--c-border); color: var(--c-text-mute); cursor: default; }
  .btn-line.no-line:hover { background: var(--c-surface); }

  /* ── 確認モーダル ── */
  #an-confirm-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 100;
    align-items: center;
    justify-content: center;
  }
  #an-confirm-overlay.show { display: flex; }
  #an-confirm-box {
    background: var(--c-surface);
    border-radius: 14px;
    padding: 24px 28px;
    width: 90%;
    max-width: 320px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    text-align: center;
  }
  #an-confirm-msg {
    font-size: 14px;
    color: var(--c-text);
    line-height: 1.65;
    margin-bottom: 18px;
    white-space: pre-wrap;
    word-break: break-all;
  }
  .confirm-btns { display: flex; gap: 10px; }
  #an-btn-confirm-ok {
    flex: 1; background: rgba(12,199,85,0.18); color: rgba(255,255,255,0.88);
    border: 1px solid rgba(12,199,85,0.72); border-radius: 8px; padding: 9px 0;
    font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit;
  }
  #an-btn-confirm-ok:hover { background: rgba(12,199,85,0.28); }
  #an-btn-confirm-cancel {
    flex: 1; background: var(--c-surface); color: rgba(255,255,255,0.55);
    border: 1px solid var(--c-border); border-radius: 8px; padding: 9px 0;
    font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit;
  }
  #an-btn-confirm-cancel:hover { border-color: rgba(255,255,255,0.22); color: rgba(255,255,255,0.88); }


/* ═══════════════════════════════════════════
   Feedback Widget
   ═══════════════════════════════════════════ */
#fb-trigger {
  position: fixed; bottom: 24px; right: 24px;
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff; font-size: 22px;
  display: flex; align-items: center; justify-content: center;
  cursor: grab;
  box-shadow: 0 4px 16px rgba(99,102,241,0.45);
  z-index: 99999; user-select: none;
  transition: box-shadow 0.2s, transform 0.15s;
  touch-action: none;
}
#fb-trigger:hover { box-shadow: 0 6px 24px rgba(99,102,241,0.6); transform: scale(1.08); }
#fb-trigger:active { cursor: grabbing; }
#fb-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 100000;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.2s;
}
#fb-overlay.fb-hidden { display: none; }
#fb-modal {
  background: var(--c-surface); color: var(--c-text);
  border-radius: var(--radius);
  border: 1px solid var(--c-border);
  width: 380px; max-width: 92vw; max-height: 88vh;
  display: flex; flex-direction: column;
  box-shadow: 0 12px 48px rgba(0,0,0,0.5);
  overflow: hidden;
  animation: fb-slideUp 0.22s ease-out;
}
@keyframes fb-slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
#fb-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; font-size: 15px; font-weight: 700;
  background: var(--c-surface-2);
  border-bottom: 1px solid var(--c-border);
}
#fb-close {
  background: none; border: none;
  color: rgba(255,255,255,0.5); font-size: 22px;
  cursor: pointer; padding: 0 4px; line-height: 1;
}
#fb-close:hover { color: #fff; }
#fb-body { padding: 16px 18px; overflow-y: auto; flex: 1; }
.fb-label {
  display: block; font-size: 12px; font-weight: 600;
  color: rgba(255,255,255,0.55);
  margin-bottom: 6px; margin-top: 12px;
}
.fb-label:first-child { margin-top: 0; }
.fb-req { color: #ef4444; }
#fb-cats { display: flex; gap: 6px; }
.fb-cat {
  flex: 1; padding: 7px 4px;
  border: 1px solid var(--c-border); border-radius: 8px;
  background: var(--c-surface-2);
  color: rgba(255,255,255,0.65);
  font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all 0.15s;
  font-family: inherit; text-align: center;
}
.fb-cat:hover { background: rgba(255,255,255,0.06); }
.fb-cat.active {
  border-color: rgba(99,102,241,0.7);
  background: rgba(99,102,241,0.18);
  color: #a5b4fc;
}
#fb-text {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--c-border); border-radius: 8px;
  background: var(--c-surface-2);
  color: var(--c-text); font-size: 13px; font-family: inherit;
  resize: vertical; outline: none;
  transition: border-color 0.15s; box-sizing: border-box;
}
#fb-text:focus { border-color: var(--c-accent); box-shadow: 0 0 0 2.5px rgba(57,189,248,0.15); }
#fb-text.fb-error { border-color: #ef4444; }
#fb-ss-area { display: flex; align-items: center; gap: 8px; }
#fb-ss-btn {
  padding: 6px 12px;
  border: 1px solid var(--c-border); border-radius: 6px;
  background: var(--c-surface-2);
  color: rgba(255,255,255,0.7); font-size: 12px;
  cursor: pointer; font-family: inherit; transition: background 0.15s;
}
#fb-ss-btn:hover { background: rgba(255,255,255,0.08); }
#fb-ss-status { font-size: 11px; color: var(--c-text-mute); }
#fb-ss-preview {
  position: relative; margin-top: 8px;
  border-radius: 8px; overflow: hidden;
  border: 1px solid var(--c-border);
}
#fb-ss-preview.fb-hidden { display: none; }
#fb-ss-img { width: 100%; display: block; max-height: 160px; object-fit: contain; background: var(--c-base); }
#fb-ss-remove {
  position: absolute; top: 4px; right: 4px;
  background: rgba(0,0,0,0.65); border: none; color: #fff;
  width: 22px; height: 22px; border-radius: 50%;
  font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
#fb-result { font-size: 12px; margin-top: 8px; min-height: 16px; }
#fb-result.success { color: #34d399; }
#fb-result.error   { color: #ef4444; }
#fb-footer { padding: 12px 18px; border-top: 1px solid var(--c-border); }
#fb-submit {
  width: 100%; padding: 10px 0; border: none; border-radius: 8px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff; font-size: 14px; font-weight: 700;
  cursor: pointer; font-family: inherit; transition: opacity 0.15s;
}
#fb-submit:hover { opacity: 0.9; }
#fb-submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* ══════════════════════════════════════════
   ADMIN PANEL
══════════════════════════════════════════ */
.admin-wrap {
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── タブバー ── */
.adm-tabs {
  display: flex;
  gap: 4px;
  padding: 12px 16px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.adm-tab {
  padding: 8px 16px;
  border: none;
  background: none;
  color: rgba(255,255,255,0.45);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: inherit;
  transition: color 0.15s, border-color 0.15s;
}
.adm-tab.active { color: #34d399; border-bottom-color: #34d399; }
.adm-tab:hover:not(.active) { color: rgba(255,255,255,0.75); }

/* ── タブパネル ── */
.adm-panel { display: none; flex: 1; overflow-y: auto; flex-direction: column; min-height: 0; }
.adm-panel.active { display: flex; flex-direction: column; }

/* ── セクションヘッダー ── */
.adm-section-header {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #34d399;
  padding: 14px 16px 6px;
  flex-shrink: 0;
}

/* ── フィードバックツールバー ── */
.adm-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  flex-shrink: 0;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.adm-loading {
  padding: 40px;
  text-align: center;
  color: rgba(255,255,255,0.25);
  font-size: 13px;
}
.adm-select {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.75);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}
.adm-btn-refresh {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.6);
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}
.adm-btn-refresh:hover { background: rgba(255,255,255,0.13); }

/* ── フィードバックリスト ── */
.adm-fb-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.adm-fb-card {
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.07);
  border-left: 3px solid transparent;
  border-radius: 10px;
  padding: 11px 13px;
  transition: border-color 0.15s, background 0.15s;
}
.adm-fb-card:hover { background: rgba(255,255,255,0.055); }
.adm-fb-card.unread { border-left-color: #6366f1; }
.adm-fb-card.read   { opacity: 0.55; }
.adm-fb-header {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.adm-fb-cat {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.05em;
}
.adm-fb-cat.bug     { background: rgba(239,68,68,0.18); color: #f87171; }
.adm-fb-cat.feature { background: rgba(99,102,241,0.2); color: #a5b4fc; }
.adm-fb-cat.other   { background: rgba(255,255,255,0.09); color: rgba(255,255,255,0.55); }
.adm-fb-studio { font-size: 11px; color: rgba(255,255,255,0.35); flex: 1; }
.adm-fb-date   { font-size: 11px; color: rgba(255,255,255,0.25); }
.adm-fb-body   { font-size: 13px; color: rgba(255,255,255,0.82); line-height: 1.55; }
.adm-fb-read-btn {
  margin-top: 7px;
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  text-decoration: underline;
}
.adm-fb-read-btn:hover { color: rgba(255,255,255,0.55); }

/* ── ユーザータブ：プラン集計カード ── */
.adm-plan-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 8px;
  padding: 0 16px 12px;
  flex-shrink: 0;
}
.adm-plan-stat-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 12px 10px;
  text-align: center;
}
.adm-plan-stat-count {
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 4px;
}
.adm-plan-stat-name {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
}

/* プランごとの色 */
.adm-plan-color-Free         { color: rgba(255,255,255,0.5); }
.adm-plan-color-Starter      { color: #93c5fd; }
.adm-plan-color-Professional { color: #d8b4fe; }
.adm-plan-color-Studio       { color: #6ee7b7; }
.adm-plan-color-admin        { color: #fcd34d; }

/* ── プランドーナツグラフ（ユーザータブ） ── */
.adm-plan-chart-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 16px 16px;
  flex-shrink: 0;
}
.adm-plan-chart-wrap {
  position: relative;
  width: 140px;
  height: 140px;
  flex-shrink: 0;
}
.adm-plan-chart-wrap canvas {
  width: 140px !important;
  height: 140px !important;
}

/* ── ユーザーリスト ── */
.adm-user-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.adm-user-card {
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 11px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.adm-user-name {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.88);
  flex: 1;
  min-width: 120px;
}
.adm-user-meta {
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  margin-top: 2px;
}
.adm-plan-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.adm-plan-badge.Free         { background: rgba(255,255,255,0.09); color: rgba(255,255,255,0.55); }
.adm-plan-badge.Starter      { background: rgba(59,130,246,0.18);  color: #93c5fd; }
.adm-plan-badge.Professional { background: rgba(168,85,247,0.18);  color: #d8b4fe; }
.adm-plan-badge.Studio       { background: rgba(52,211,153,0.18);  color: #6ee7b7; }
.adm-plan-badge.admin        { background: rgba(245,158,11,0.18);  color: #fcd34d; }
.adm-plan-select {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.75);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}

/* ── ストレージ：概要カード ── */
.adm-stat-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 12px 16px 0;
  flex-shrink: 0;
}
.adm-stat-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 12px 14px;
}
.adm-stat-card-val {
  font-size: 20px;
  font-weight: 800;
  color: #34d399;
  line-height: 1.1;
}
.adm-stat-card-label {
  font-size: 10.5px;
  color: rgba(255,255,255,0.4);
  margin-top: 3px;
}

/* ── ストレージ：中段（ドーナツ + 全体バー） ── */
.adm-stor-mid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 8px;
  padding: 8px 16px 0;
  flex-shrink: 0;
}

/* ドーナツカード */
.adm-donut-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.adm-donut-card-title {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.06em;
}
.adm-donut-card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.adm-donut-wrap {
  position: relative;
  flex-shrink: 0;
}
.adm-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.adm-donut-center-val {
  font-size: 13px;
  font-weight: 800;
  color: rgba(255,255,255,0.9);
  line-height: 1.1;
  white-space: nowrap;
}
.adm-donut-center-label {
  font-size: 9px;
  color: rgba(255,255,255,0.35);
  margin-top: 2px;
}
.adm-pie-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.adm-pie-legend-item {
  display: flex;
  align-items: center;
  gap: 7px;
}
.adm-pie-legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.adm-pie-legend-name {
  font-size: 10px;
  color: rgba(255,255,255,0.45);
  flex: 1;
  white-space: nowrap;
}
.adm-pie-legend-val {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.75);
  white-space: nowrap;
}
.adm-pie-legend-pct {
  font-size: 10px;
  color: rgba(255,255,255,0.35);
  width: 38px;
  text-align: right;
  white-space: nowrap;
}

/* 全体バーカード */
.adm-total-bar-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}
.adm-total-bar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.adm-total-bar-label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.55);
}
.adm-total-bar-usage {
  font-size: 11px;
  color: rgba(255,255,255,0.35);
}
.adm-total-bar-track {
  width: 100%;
  height: 8px;
  background: rgba(255,255,255,0.08);
  border-radius: 99px;
  overflow: hidden;
}
.adm-total-bar-fill {
  height: 100%;
  border-radius: 99px;
  background: #0CC755;
  transition: width 1s cubic-bezier(.4,0,.2,1);
  min-width: 2px;
}
.adm-total-bar-sub {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.adm-tbs-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
}
.adm-tbs-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.adm-tbs-label { color: rgba(255,255,255,0.35); }
.adm-tbs-val   { font-weight: 700; color: rgba(255,255,255,0.6); margin-left: 2px; }

/* ── ストレージ：スタジオ別リスト ── */
.adm-studio-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 16px 16px;
  overflow-y: auto;
}
.adm-studio-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 10px 14px;
  transition: background 0.15s;
  cursor: pointer;
}
.adm-studio-card:hover { background: rgba(255,255,255,0.07); }
.adm-studio-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}
.adm-studio-name {
  font-size: 12px;
  font-weight: 700;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgba(255,255,255,0.85);
}
.adm-stor-plan-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
  border: 1px solid;
  white-space: nowrap;
  flex-shrink: 0;
}
.adm-plan-free         { color: rgba(255,255,255,0.5); border-color: rgba(255,255,255,0.15); background: rgba(255,255,255,0.03); }
.adm-plan-starter      { color: #39BDF8; border-color: rgba(57,189,248,0.3);  background: rgba(57,189,248,0.07); }
.adm-plan-professional { color: #a78bfa; border-color: rgba(167,139,250,0.3); background: rgba(167,139,250,0.07); }
.adm-plan-studio       { color: #0CC755; border-color: rgba(12,199,85,0.3);   background: rgba(12,199,85,0.07); }
.adm-plan-admin        { color: #F59E0B; border-color: rgba(245,158,11,0.3);  background: rgba(245,158,11,0.07); }
.adm-studio-usage-text {
  font-size: 10px;
  color: rgba(255,255,255,0.35);
  white-space: nowrap;
  flex-shrink: 0;
}
.adm-studio-used { font-weight: 700; color: rgba(255,255,255,0.6); }
.adm-stor-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.adm-stor-bar-track {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 99px;
  overflow: hidden;
}
.adm-stor-bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 1s cubic-bezier(.4,0,.2,1);
  min-width: 2px;
}
.adm-stor-bar-pct {
  font-size: 11px;
  font-weight: 700;
  min-width: 34px;
  text-align: right;
  flex-shrink: 0;
}
.adm-stor-breakdown {
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.adm-studio-card.adm-expanded .adm-stor-breakdown { display: grid; }
.adm-stor-bd-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.adm-stor-bd-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.adm-stor-bd-name {
  font-size: 9px;
  color: rgba(255,255,255,0.35);
  margin-bottom: 1px;
}
.adm-stor-bd-val {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.6);
}
.adm-stor-toggle {
  background: none;
  border: none;
  color: rgba(255,255,255,0.25);
  font-size: 9px;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 2px;
  transition: color 0.15s;
  flex-shrink: 0;
}
.adm-stor-toggle:hover { color: rgba(255,255,255,0.5); }
.adm-stor-toggle-icon { transition: transform 0.2s; display: inline-block; }
.adm-studio-card.adm-expanded .adm-stor-toggle-icon { transform: rotate(180deg); }

/* ════════════════════════════════════════════════════════════════
   ── 管理画面: 新機能スタイル（停止・お知らせ・Stripeリンク）
   ════════════════════════════════════════════════════════════════ */

/* ── ユーザーカード拡張 ── */
.adm-last-login { color: rgba(255,255,255,0.28) !important; font-size: 11px; margin-top: 3px; }

.adm-user-suspended { border-color: rgba(239,68,68,0.25) !important; background: rgba(239,68,68,0.04) !important; }
.adm-suspended-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(239,68,68,0.2);
  color: #fca5a5;
  letter-spacing: 0.04em;
  margin-left: 6px;
  vertical-align: middle;
}

/* 汎用アクションボタン */
.adm-action-btn {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.65);
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background 0.15s;
}
.adm-action-btn:hover { background: rgba(255,255,255,0.13); }
.adm-btn-suspend   { border-color: rgba(239,68,68,0.3) !important; color: #fca5a5 !important; }
.adm-btn-suspend:hover { background: rgba(239,68,68,0.12) !important; }
.adm-btn-unsuspend { border-color: rgba(110,231,163,0.3) !important; color: #6ee7a3 !important; }
.adm-btn-unsuspend:hover { background: rgba(110,231,163,0.1) !important; }

/* Stripe ダッシュボードリンク */
.adm-stripe-link {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  color: rgba(147,197,253,0.7);
  text-decoration: none;
  vertical-align: middle;
}
.adm-stripe-link:hover { color: #93c5fd; }

/* ── お知らせ管理（admin）── */
.adm-ann-list { display: flex; flex-direction: column; gap: 10px; }

.adm-ann-card {
  border-radius: 10px;
  padding: 12px 14px;
  border-left: 3px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.03);
}
.adm-ann-card.ann-info        { border-left-color: #93c5fd; }
.adm-ann-card.ann-warning     { border-left-color: #fcd34d; }
.adm-ann-card.ann-maintenance { border-left-color: #86efac; }

.adm-ann-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.adm-ann-type  { font-size: 12px; color: rgba(255,255,255,0.5); }
.adm-ann-date  { font-size: 11px; color: rgba(255,255,255,0.3); margin-left: auto; }
.adm-ann-actions { display: flex; gap: 6px; }

.adm-ann-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.05em;
}
.adm-ann-badge.active   { background: rgba(110,231,163,0.18); color: #6ee7a3; }
.adm-ann-badge.inactive { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.4); }

.adm-ann-title { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.85); margin-bottom: 4px; }
.adm-ann-body  { font-size: 12px; color: rgba(255,255,255,0.5); line-height: 1.5; white-space: pre-wrap; }

/* お知らせ編集モーダル */
.adm-ann-modal-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.65);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.adm-ann-modal-box {
  background: #1a1d27;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 20px;
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.adm-ann-modal-header { display: flex; align-items: center; justify-content: space-between; }
.adm-modal-close {
  background: none; border: none; color: rgba(255,255,255,0.4);
  font-size: 18px; cursor: pointer; padding: 2px 6px;
}
.adm-modal-close:hover { color: rgba(255,255,255,0.8); }

.adm-ann-modal-row { display: flex; flex-direction: column; gap: 5px; }
.adm-ann-modal-row label { font-size: 11px; color: rgba(255,255,255,0.45); }
.adm-ann-modal-row-inline { flex-direction: row !important; align-items: center; gap: 8px; flex-wrap: wrap; }
.adm-ann-modal-row-inline label { min-width: 100%; }

.adm-input {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 7px;
  color: rgba(255,255,255,0.8);
  padding: 7px 10px;
  font-size: 13px;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}
.adm-input:focus { outline: none; border-color: rgba(147,197,253,0.4); }
.adm-textarea { resize: vertical; min-height: 80px; }

.adm-checkbox-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: rgba(255,255,255,0.65);
  cursor: pointer;
}
.adm-checkbox-label input[type="checkbox"] { width: 15px; height: 15px; cursor: pointer; }

.adm-ann-modal-footer {
  display: flex; justify-content: flex-end; gap: 8px;
  padding-top: 4px;
}

/* ── ユーザー向けお知らせバナー ── */
#ann-banner-container { display: flex; flex-direction: column; gap: 6px; }

.ann-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 9px;
  border-left: 3px solid rgba(255,255,255,0.2);
  font-size: 13px;
}
.ann-banner.ann-info        { background: rgba(59,130,246,0.1);  border-left-color: #93c5fd; }
.ann-banner.ann-warning     { background: rgba(245,158,11,0.1);  border-left-color: #fcd34d; }
.ann-banner.ann-maintenance { background: rgba(52,211,153,0.08); border-left-color: #86efac; }

.ann-banner-icon { font-size: 16px; flex-shrink: 0; line-height: 1.4; }
.ann-banner-content { flex: 1; }
.ann-banner-content strong { color: rgba(255,255,255,0.85); display: block; margin-bottom: 2px; }
.ann-banner-body { color: rgba(255,255,255,0.55); font-size: 12px; line-height: 1.5; white-space: pre-wrap; }

/* ════════════════════════════════════════════
   サポートチャット — 管理パネル（2カラム）
════════════════════════════════════════════ */
.adm-chat-wrap {
  display: flex;
  height: calc(100vh - 200px);
  min-height: 400px;
  gap: 0;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.07);
}

/* 左カラム: スレッド一覧 */
.adm-thread-col {
  width: 260px;
  min-width: 200px;
  flex-shrink: 0;
  background: rgba(255,255,255,0.03);
  border-right: 1px solid rgba(255,255,255,0.07);
  display: flex;
  flex-direction: column;
  padding: 12px 10px;
  overflow-y: auto;
}

.adm-thread-item {
  padding: 10px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
  margin-bottom: 2px;
}
.adm-thread-item:hover { background: rgba(255,255,255,0.06); }
.adm-thread-item.active { background: rgba(99,102,241,0.2); }
.adm-thread-item.unread .adm-thread-name { font-weight: 700; color: #fff; }

.adm-thread-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3px;
}
.adm-thread-name {
  font-size: 13px;
  color: rgba(255,255,255,0.8);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.adm-thread-badge {
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  flex-shrink: 0;
}
.adm-thread-preview {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
.adm-thread-date {
  font-size: 10px;
  color: rgba(255,255,255,0.25);
}

/* 右カラム: メッセージ詳細 */
.adm-msg-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.adm-msg-placeholder {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: rgba(255,255,255,0.25);
}

.adm-msg-header {
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
  align-items: center;
}

.adm-msg-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.adm-msg-reply {
  padding: 10px 12px;
  border-top: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.adm-btn-primary {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  cursor: pointer;
  flex-shrink: 0;
}
.adm-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

/* メッセージバブル（管理パネル内） */
.adm-bubble-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.adm-bubble-wrap.admin { align-items: flex-end; }
.adm-bubble-wrap.user  { align-items: flex-start; }

.adm-bubble {
  max-width: 75%;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.5;
  word-break: break-word;
  white-space: pre-wrap;
}
.adm-bubble.admin {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  border-radius: 12px 4px 12px 12px;
}
.adm-bubble.user {
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.85);
  border-radius: 4px 12px 12px 12px;
}
.adm-bubble-time {
  font-size: 10px;
  color: rgba(255,255,255,0.28);
  padding: 0 4px;
}

/* レスポンシブ */
@media (max-width: 600px) {
  .adm-chat-wrap { flex-direction: column; height: auto; }
  .adm-thread-col { width: 100%; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.07); max-height: 200px; }
}

/* ── サポートチャット: 送信者ラベル ── */
.adm-bubble-sender {
  font-size: 10px;
  color: rgba(255,255,255,0.35);
  padding: 0 4px 2px;
  font-weight: 500;
}
.adm-bubble-wrap.admin .adm-bubble-sender { text-align: right; }
.adm-bubble-wrap.user  .adm-bubble-sender { text-align: left; }

/* カテゴリバッジ */
.adm-cat-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid;
  white-space: nowrap;
  flex-shrink: 0;
  background: var(--c-surface2);
  color: var(--c-text-mute);
  border-color: var(--c-border);
}
.adm-cat-badge.bug     { background: var(--c-danger-18); color: var(--c-badge-text); border-color: var(--c-danger-72); }
.adm-cat-badge.feature { background: var(--c-orange-18); color: var(--c-badge-text); border-color: var(--c-orange-72); }
.adm-cat-badge.help    { background: var(--c-blue-18);   color: var(--c-badge-text); border-color: var(--c-blue-72); }
.adm-cat-badge.other   { background: var(--c-surface2);  color: var(--c-text-mute);  border-color: var(--c-border); }

/* ステータスバッジ */
.adm-status-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid;
  white-space: nowrap;
}
.adm-status-badge.open   { background: var(--c-green-18);  color: var(--c-badge-text); border-color: var(--c-green-72); }
.adm-status-badge.closed { background: var(--c-surface2);  color: var(--c-text-mute);  border-color: var(--c-border); }

/* フィルターバー */
.adm-filter-bar {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
  flex-direction: column;
}
.adm-filter-select, .adm-filter-input {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  color: rgba(255,255,255,0.75);
  font-size: 12px;
  padding: 5px 8px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
}
.adm-filter-select:focus, .adm-filter-input:focus {
  border-color: rgba(99,102,241,0.5);
}
.adm-filter-select option { background: #1c1c1c; color: #fff; }

/* クローズボタン */
.adm-btn-close-thread {
  background: rgba(239,68,68,0.12);
  border: 1px solid rgba(239,68,68,0.25);
  color: #fca5a5;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
  font-family: inherit;
  transition: background 0.15s;
}
.adm-btn-close-thread:hover { background: rgba(239,68,68,0.25); }

/* メッセージ添付ファイル表示 */
.adm-file-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #a5b4fc;
  text-decoration: none;
  border: 1px solid rgba(99,102,241,0.3);
  padding: 4px 8px;
  border-radius: 6px;
  margin-top: 4px;
}
.adm-file-link:hover { background: rgba(99,102,241,0.1); }

/* ════════════════════════════════════════════
   サポートチャット v2 — ユーザーウィジェット
════════════════════════════════════════════ */

/* フラットボタン */
/* サポートボタン：画面右端ドッキング型（縦長タブ／ホバーで展開） */
.chat-fab-btn {
  position: fixed;
  right: 0;
  top: 78%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--c-accent);
  border: 1px solid var(--c-accent);
  border-right: none;
  border-radius: 12px 0 0 12px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  padding: 14px 10px;
  cursor: pointer;
  z-index: 99999;
  box-shadow: 0 4px 16px rgba(0,0,0,0.28);
  /* 通常はアイコンのみ。max-width を絞ってラベルを隠す */
  max-width: 40px;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width 0.25s ease, background 0.15s, padding 0.25s ease;
}
.chat-fab-btn svg { flex-shrink: 0; }
.chat-fab-btn > span:not(.chat-fab-badge) {
  /* サポートラベル：通常は非表示、ホバーで展開 */
  opacity: 0;
  transition: opacity 0.2s ease 0.05s;
}
.chat-fab-btn:hover {
  max-width: 160px;
  padding: 14px 16px;
  background: var(--c-accent-72);
}
.chat-fab-btn:hover > span:not(.chat-fab-badge) { opacity: 1; }
.chat-fab-badge {
  /* 折りたたみ時もアイコン左上に見えるよう絶対配置（ボタン枠内に収める） */
  position: absolute;
  top: 4px;
  left: 4px;
  background: var(--c-danger);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  min-width: 14px;
  height: 14px;
  border-radius: 7px;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  box-sizing: border-box;
  display: flex;
  border: 1px solid var(--c-accent);
}

/* チャットパネル（サポートモーダル） */
.chat-panel {
  position: fixed;
  bottom: 72px;
  right: 20px;
  width: 360px;
  max-width: calc(100vw - 32px);
  height: 500px;
  max-height: calc(100vh - 100px);
  background: var(--c-surface);
  border-radius: 16px;
  box-shadow: var(--shadow);
  z-index: 99998;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--c-border);
  display: flex;
}

/* パネルヘッダー */
.chat-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--c-text);
  background: var(--c-accent-dim);
  border-bottom: 1px solid var(--c-border);
  flex-shrink: 0;
}
.chat-header-title { flex: 1; color: var(--c-accent); }
.chat-icon-btn {
  background: none;
  border: none;
  color: var(--c-text-mute);
  font-size: 18px;
  cursor: pointer;
  padding: 2px 5px;
  line-height: 1;
  border-radius: 4px;
  transition: color 0.15s;
  font-family: inherit;
}
.chat-icon-btn:hover { color: var(--c-accent); }

/* 各ビュー共通 */
.chat-view {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* スタートビュー */
.chat-start-desc {
  font-size: 13px;
  color: var(--c-text-light);
  margin-bottom: 14px;
  line-height: 1.5;
}
#chat-view-start {
  flex-direction: column;
  padding: 20px 16px;
  overflow-y: auto;
}
.chat-cat-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.chat-cat-pill {
  background: var(--c-surface2);
  border: 1px solid var(--c-border);
  border-radius: 20px;
  color: var(--c-text-sub);
  font-size: 13px;
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  font-weight: 500;
}
.chat-cat-pill:hover { background: var(--c-accent-dim); border-color: var(--c-accent-72); }
.chat-cat-pill.selected {
  background: var(--c-accent-18);
  border-color: var(--c-accent-72);
  color: var(--c-accent);
  font-weight: 700;
}
.chat-start-btn {
  background: var(--c-accent);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 12px;
  cursor: pointer;
  width: 100%;
  font-family: inherit;
  transition: opacity 0.15s;
}
.chat-start-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.chat-start-btn:not(:disabled):hover { opacity: 0.88; }

/* チャットビュー */
.chat-thread-info {
  padding: 6px 14px;
  font-size: 11px;
  color: var(--c-text-mute);
  border-bottom: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.chat-messages-area {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chat-file-preview {
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--c-accent-dim);
  border-top: 1px solid var(--c-accent-72);
  flex-shrink: 0;
}
.chat-file-thumb {
  max-height: 52px;
  max-width: 72px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}
.chat-file-name {
  font-size: 12px;
  color: var(--c-accent);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-file-remove {
  background: none;
  border: none;
  color: var(--c-text-mute);
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
  flex-shrink: 0;
  font-family: inherit;
}
.chat-input-area {
  padding: 8px 10px;
  border-top: 1px solid var(--c-border);
  flex-shrink: 0;
  display: flex;
  gap: 6px;
  align-items: flex-end;
}
.chat-attach-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--c-surface2);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
  color: var(--c-text-light);
  transition: background 0.15s;
  margin-bottom: 2px;
}
.chat-attach-label:hover { background: var(--c-accent-dim); color: var(--c-accent); }
.chat-textarea {
  flex: 1;
  background: var(--c-surface2);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  color: var(--c-text);
  padding: 7px 10px;
  font-size: 13px;
  font-family: inherit;
  resize: none;
  outline: none;
  box-sizing: border-box;
}
.chat-textarea:focus { border-color: var(--c-accent); }
.chat-send-btn {
  background: var(--c-accent);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 12px;
  cursor: pointer;
  flex-shrink: 0;
  font-family: inherit;
  margin-bottom: 2px;
}
.chat-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ファイル添付バブル */
.chat-file-bubble {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: inherit;
  text-decoration: none;
  border: 1px solid var(--c-border);
  padding: 5px 10px;
  border-radius: 8px;
  margin-top: 4px;
}

/* 履歴ビュー */
#chat-view-history {
  overflow: hidden;
}
.chat-history-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--c-border);
  flex-shrink: 0;
}
.chat-back-btn {
  background: none;
  border: none;
  color: var(--c-text-light);
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}
.chat-back-btn:hover { color: var(--c-accent); }
.chat-history-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text-sub);
}
.chat-history-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 10px;
}
.chat-history-item {
  padding: 10px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
  margin-bottom: 3px;
  border: 1px solid var(--c-border);
}
.chat-history-item:hover { background: var(--c-surface2); }
.chat-history-item-top {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.chat-history-item-preview {
  font-size: 11px;
  color: var(--c-text-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-history-item-date {
  font-size: 10px;
  color: var(--c-text-mute);
  margin-top: 3px;
}
/* カテゴリバッジ（ユーザーウィジェット内） */
.chat-cat-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid;
  white-space: nowrap;
  background: var(--c-surface2);
  color: var(--c-text-mute);
  border-color: var(--c-border);
}
.chat-cat-badge.bug     { background: var(--c-danger-18); color: var(--c-badge-text); border-color: var(--c-danger-72); }
.chat-cat-badge.feature { background: var(--c-orange-18); color: var(--c-badge-text); border-color: var(--c-orange-72); }
.chat-cat-badge.help    { background: var(--c-blue-18);   color: var(--c-badge-text); border-color: var(--c-blue-72); }
.chat-cat-badge.other   { background: var(--c-surface2);  color: var(--c-text-mute);  border-color: var(--c-border); }
.chat-status-closed {
  font-size: 10px;
  font-weight: 500;
  color: var(--c-text-mute);
  background: var(--c-surface2);
  border: 1px solid var(--c-border);
  padding: 3px 10px;
  border-radius: 20px;
}

@media (max-width: 480px) {
  .chat-panel { width: calc(100vw - 16px); right: 8px; bottom: 70px; height: calc(100vh - 90px); max-height: none; border-radius: 12px; }
  /* モバイル：右端ドッキングのまま小さめに */
  .chat-fab-btn { padding: 11px 8px; max-width: 36px; }
  .chat-fab-btn:hover { padding: 11px 14px; max-width: 150px; }
}

/* ══════════════════════════════════════════════════════
   アルバム機能 v2 — gl-app 内のアルバムタブ
═════════════════════════════════════════════════════ */
#gl-app #gl-cpsettings-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 14px 16px;
  gap: 0;
}
#gl-app #gl-cpsettings-tab::-webkit-scrollbar { width: 4px; }
#gl-app #gl-cpsettings-tab::-webkit-scrollbar-track { background: transparent; }
#gl-app #gl-cpsettings-tab::-webkit-scrollbar-thumb { background: #555; border-radius: 4px; }
#gl-app #gl-albums-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: auto;
  padding: 14px 18px 22px;
  gap: 14px;
}
#gl-app #gl-albums-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
#gl-app #gl-albums-count {
  font-size: 12px;
  color: var(--c-text-sub);
  flex: 1;
}
#gl-app #gl-albums-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
#gl-app .gl-album-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .15s, transform .15s;
  display: flex;
  flex-direction: column;
  height: 100%;
}
#gl-app .gl-album-card:hover {
  border-color: var(--c-accent-18);
  transform: translateY(-1px);
}
#gl-app .gl-album-cover {
  width: 100%;
  aspect-ratio: 16/10;
  background: var(--c-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text-mute);
  font-size: 26px;
  overflow: hidden;
}
#gl-app .gl-album-cover img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
#gl-app .gl-album-info {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
#gl-app .gl-album-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
#gl-app .gl-album-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--c-text);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#gl-app .gl-album-mode-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(255,255,255,0.08);
  color: var(--c-text-sub);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
#gl-app .gl-album-mode-badge.dark     { background: rgba(255,255,255,0.10); color: rgba(255,255,255,0.78); }
#gl-app .gl-album-mode-badge.light    { background: rgba(245,243,239,0.20); color: #f5f3ef; }
#gl-app .gl-album-mode-badge.magazine { background: rgba(232,96,122,0.25);   color: #ffbbcc; }
#gl-app .gl-album-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 10.5px;
  color: var(--c-text-sub);
}
#gl-app .gl-album-meta span { display: inline-flex; align-items: center; gap: 4px; }
#gl-app .gl-album-stats {
  display: flex;
  gap: 12px;
  padding: 8px 12px;
  border-top: 1px solid var(--c-border);
  background: rgba(255,255,255,0.02);
  font-size: 10.5px;
  color: var(--c-text-sub);
}
#gl-app .gl-album-stats span { display: inline-flex; align-items: center; gap: 4px; }
#gl-app .gl-album-actions {
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  border-top: 1px solid var(--c-border);
}
#gl-app .gl-album-actions button {
  flex: 1;
  padding: 6px 8px;
  font-size: 11px;
  border-radius: 6px;
  border: 1px solid var(--c-border);
  background: var(--c-surface-2);
  color: var(--c-text-sub);
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
}
#gl-app .gl-album-actions button:hover {
  border-color: rgba(255,255,255,0.30);
  color: var(--c-text);
  background: rgba(255,255,255,0.04);
}
#gl-app .gl-album-actions .btn-album-delete:hover {
  border-color: rgba(239,68,68,0.5);
  color: #ff8888;
  background: rgba(239,68,68,0.10);
}
#gl-app #gl-albums-empty {
  padding: 50px 20px;
  text-align: center;
  color: var(--c-text-sub);
}
#gl-app #gl-albums-empty .icon { font-size: 38px; margin-bottom: 10px; }

/* ── 納品タブ ── */
#em-edit-modal #em-delivery-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
#em-edit-modal .em-delivery-album-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* アルバムエントリ（カード＋設定パネルのラッパー） */
.em-album-entry {
  display: flex;
  flex-direction: column;
  border: 1px solid transparent;
  border-radius: 10px;
  transition: border-color .15s;
}
.em-album-entry.settings-open {
  border-color: var(--c-accent);
}
/* settings-open 時はカード自身のボーダーを非表示（エントリのボーダーに統一） */
.em-album-entry.settings-open .gl-album-card {
  border: none;
  border-radius: 9px 9px 0 0;
}
.em-album-entry.settings-open .em-album-settings-panel {
  border-radius: 0 0 9px 9px;
}
/* 通常時のカードは自身のボーダーを表示 */
#em-edit-modal .em-delivery-album-list .em-album-entry:not(.settings-open) .gl-album-card {
  border: 1px solid var(--c-border);
  border-radius: 10px;
}

/* インライン設定パネル */
.em-album-settings-panel {
  background: var(--c-surface-2);
  border-top: 1px solid var(--c-border);
  padding: 0;
}
.em-asp-inner {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.em-asp-section { display: flex; flex-direction: column; gap: 12px; }
.em-asp-section-title {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-text-mute); padding-bottom: 8px; border-bottom: 1px solid var(--c-border);
}
.em-asp-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.em-asp-field-group { display: flex; flex-direction: column; gap: 6px; }
.em-asp-label { font-size: 11px; font-weight: 600; color: var(--c-text-sub); }
.em-asp-checks-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 20px; }
.em-asp-orig-keep { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; }
.em-asp-orig-keep-val { font-size: 20px; font-weight: 700; color: var(--c-text); }
.em-asp-orig-keep-unit { font-size: 12px; color: var(--c-text-sub); }
.em-asp-footer {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 12px 18px; border-top: 1px solid var(--c-border);
}
.em-asp-save-btn {
  padding: 7px 20px; background: var(--c-accent); color: #fff;
  border: none; border-radius: 7px; font-size: 12px; font-weight: 700;
  font-family: inherit; cursor: pointer; transition: opacity .15s;
}
.em-asp-save-btn:hover { opacity: 0.85; }
.em-asp-save-btn:disabled { opacity: 0.5; cursor: default; }
.em-asp-cancel-btn {
  padding: 7px 16px; background: transparent; color: var(--c-text-sub);
  border: 1px solid var(--c-border); border-radius: 7px; font-size: 12px;
  font-family: inherit; cursor: pointer; transition: all .15s;
}
.em-asp-cancel-btn:hover { border-color: rgba(255,255,255,0.3); color: var(--c-text); }

#em-edit-modal .em-delivery-album-list .gl-album-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .15s;
}
#em-edit-modal .em-delivery-album-list .gl-album-card:hover { border-color: rgba(255,255,255,0.25); }
#em-edit-modal .em-delivery-album-list .gl-album-cover {
  width: 100%; aspect-ratio: 16/10;
  background: var(--c-surface-2);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-text-mute); overflow: hidden;
}
#em-edit-modal .em-delivery-album-list .gl-album-cover img { width:100%; height:100%; object-fit:cover; display:block; }
#em-edit-modal .em-delivery-album-list .gl-album-info { padding: 10px 12px; display:flex; flex-direction:column; gap:6px; }
#em-edit-modal .em-delivery-album-list .gl-album-title-row { display:flex; justify-content:space-between; align-items:center; gap:8px; }
#em-edit-modal .em-delivery-album-list .gl-album-title { font-size:13px; font-weight:700; color:var(--c-text); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#em-edit-modal .em-delivery-album-list .gl-album-mode-badge { font-size:9px; font-weight:700; padding:2px 7px; border-radius:10px; background:rgba(255,255,255,0.08); color:var(--c-text-sub); text-transform:uppercase; letter-spacing:0.05em; }
#em-edit-modal .em-delivery-album-list .gl-album-mode-badge.dark     { background:rgba(255,255,255,0.10); color:rgba(255,255,255,0.78); }
#em-edit-modal .em-delivery-album-list .gl-album-mode-badge.light    { background:rgba(245,243,239,0.20); color:#f5f3ef; }
#em-edit-modal .em-delivery-album-list .gl-album-mode-badge.magazine { background:rgba(232,96,122,0.25);  color:#ffbbcc; }
#em-edit-modal .em-delivery-album-list .gl-album-meta { display:flex; flex-wrap:wrap; gap:8px; font-size:10.5px; color:var(--c-text-sub); }
#em-edit-modal .em-delivery-album-list .gl-album-meta span { display:inline-flex; align-items:center; gap:4px; }
#em-edit-modal .em-delivery-album-list .gl-album-stats { display:flex; gap:12px; padding:8px 12px; border-top:1px solid var(--c-border); background:rgba(255,255,255,0.02); font-size:10.5px; color:var(--c-text-sub); }
#em-edit-modal .em-delivery-album-list .gl-album-stats span { display:inline-flex; align-items:center; gap:4px; }
#em-edit-modal .em-delivery-album-list .gl-album-actions { display:flex; gap:6px; padding:8px 10px; border-top:1px solid var(--c-border); }
#em-edit-modal .em-delivery-album-list .gl-album-actions button:not(.aq-share-opt) { flex:1; padding:6px 8px; font-size:11px; border-radius:6px; border:1px solid var(--c-border); background:var(--c-surface-2); color:var(--c-text-sub); cursor:pointer; font-family:inherit; transition:all .15s; }
#em-edit-modal .em-delivery-album-list .gl-album-actions button:not(.aq-share-opt):hover { border-color:rgba(255,255,255,0.30); color:var(--c-text); background:rgba(255,255,255,0.04); }
#em-edit-modal .em-delivery-album-list .gl-album-actions .btn-album-delete:hover { border-color:rgba(239,68,68,0.5); color:#ff8888; background:rgba(239,68,68,0.10); }

/* アップロードボタン */
#em-edit-modal .em-delivery-album-list .em-album-upload-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 0 10px 8px;
  padding: 7px 0;
  background: transparent;
  border: 1px solid var(--c-accent);
  border-radius: 7px;
  color: var(--c-accent);
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s;
}
#em-edit-modal .em-delivery-album-list .em-album-upload-btn:hover { background: rgba(52,152,219,0.10); }

.em-delivery-add-btn {
  margin-top: 4px;
  width: 100%;
  padding: 10px 0;
  background: transparent;
  border: 1px dashed var(--c-border);
  border-radius: 8px;
  color: var(--c-text-mute);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.em-delivery-add-btn:hover { border-color: var(--c-accent); color: var(--c-accent); }

/* ギャラリー設定タブ — アルバム設定タブと同じフォーム UI を踏襲 */
#gl-app #gl-customer-page-info {
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* URL 行: 読取専用 input + コピー/開くボタン */
#gl-app #gl-customer-page-info .cp-info-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
#gl-app #gl-customer-page-url {
  flex: 1;
}
#gl-app #gl-customer-page-url[readonly] {
  background: var(--c-surface-2);
  color: var(--c-text-sub);
}

/* 顧客ページ デザインテーマ選択 */
#gl-app .cp-theme-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
#gl-app .cp-theme-grid.cp-theme-saving {
  opacity: 0.55;
  pointer-events: none;
}
#gl-app .cp-theme-card {
  background: var(--c-bg);
  border: 1.5px solid var(--c-border);
  border-radius: 9px;
  padding: 9px 10px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
#gl-app .cp-theme-card:hover {
  border-color: var(--c-accent, #e8a87c);
}
#gl-app .cp-theme-card.active {
  border-color: var(--c-accent, #e8a87c);
  background: var(--c-surface-2, var(--c-surface));
}
#gl-app .cp-theme-swatch-row {
  display: flex;
  gap: 3px;
  margin-bottom: 7px;
}
#gl-app .cp-theme-sw {
  width: 22px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,0.15);
  display: inline-block;
}
#gl-app .cp-theme-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--c-text);
  display: flex;
  align-items: center;
  gap: 4px;
}
#gl-app .cp-theme-check {
  display: none;
  color: var(--c-accent, #e8a87c);
}
#gl-app .cp-theme-card.active .cp-theme-check {
  display: inline-flex;
}
#gl-app .cp-theme-desc {
  font-size: 10px;
  color: var(--c-text-mute);
  margin-top: 2px;
  line-height: 1.4;
}

/* 文言入力欄の textarea（.field-input を踏襲しつつ最小高さを確保） */
#gl-app #gl-cpsettings-tab textarea.field-input {
  resize: vertical;
  min-height: 60px;
  line-height: 1.5;
}

/* アルバム編集ダイアログ + 移動ダイアログ共通 */
#gl-app #gl-album-editor,
#gl-app #gl-move-dialog {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 200;
  align-items: center;
  justify-content: center;
}
#gl-app #gl-album-editor[style*="display:flex"],
#gl-app #gl-move-dialog[style*="display:flex"] { display: flex !important; }
#gl-app .album-editor-box {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  width: min(440px, 92%);
  max-height: 85%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#gl-app .album-editor-head {
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-surface-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#gl-app .album-editor-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--c-text);
}
#gl-app .album-editor-close {
  background: none;
  border: none;
  color: var(--c-text-sub);
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
}
#gl-app .album-editor-body {
  padding: 16px 18px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#gl-app .album-editor-foot {
  padding: 12px 18px;
  border-top: 1px solid var(--c-border);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════
   写真カード: 表紙設定ボタン（v2 アルバム機能）
═════════════════════════════════════════════════════ */
#gl-app .photo-cover-btn {
  position: absolute;
  top: 6px;
  right: 32px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border: none;
  font-size: 14px;
  cursor: pointer;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
}
#gl-app .photo-cover-btn:hover { background: rgba(0, 0, 0, 0.85); }
#gl-app .photo-cover-btn.active {
  background: #FFD700;
  color: #6b4f00;
}
#gl-app .photo-card.is-cover {
  outline: 2px solid #FFD700;
  outline-offset: -2px;
}

/* ══════════════════════════════════════════════════════
   StateGallery v2 — 顧客ページカードのバッジ
═════════════════════════════════════════════════════ */
.gallery-card .album-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(12, 199, 85, 0.85);
  color: #0a1a0f;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 12px;
  z-index: 2;
}

/* アルバムカードの元画像残日数バッジ */
#gl-app .album-orig-exp {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  letter-spacing: 0.02em;
}
#gl-app .album-orig-exp.normal  { background: rgba(125, 200, 200, 0.12); color: #7ec8c8; }
#gl-app .album-orig-exp.warn    { background: rgba(244, 162, 97, 0.18);  color: #ffaa66; }
#gl-app .album-orig-exp.expired { background: rgba(239, 68, 68, 0.15);   color: #ef8888; }

/* ════════════════════════════════════════════════════
   StateInstagram — Instagram投稿管理 v1.0
   ════════════════════════════════════════════════════ */

/* ── ルート ── */
/* display は .state-panel のクラスルールに委ねる（ID specificity 問題を回避） */
#state-instagram { height: 100%; overflow: hidden; }
#state-instagram.active { display: flex; flex-direction: column; }
#ig-root { display: flex; flex-direction: column; height: 100%; overflow: hidden; }

/* ── ヘッダー ── */
#ig-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px 12px;
  border-bottom: 1px solid var(--c-border);
  flex-shrink: 0;
  gap: 12px;
}
#ig-tabs { display: flex; gap: 4px; background: rgba(255,255,255,0.05); border-radius: 8px; padding: 3px; }
.ig-tab {
  background: transparent; border: none; color: var(--c-text-sub);
  font-size: 13px; font-weight: 500; padding: 6px 16px; border-radius: 6px;
  cursor: pointer; font-family: inherit; transition: all 0.15s;
}
.ig-tab:hover { color: var(--c-text); background: rgba(255,255,255,0.06); }
.ig-tab.active { background: var(--c-surface-2); color: var(--c-text); font-weight: 700; }
.ig-tab { position: relative; }
.ig-tab-badge {
  position: absolute; top: 2px; right: 4px;
  background: var(--c-blue); color: #000;
  font-size: 9px; font-weight: 800;
  min-width: 15px; height: 15px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 3px; pointer-events: none;
}
#ig-header-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.ig-btn-new {
  background: transparent; border: 1px solid var(--c-border); color: var(--c-text);
  font-size: 12px; font-weight: 600; padding: 7px 14px; border-radius: 8px;
  cursor: pointer; font-family: inherit; transition: all 0.15s; white-space: nowrap;
}
.ig-btn-new:hover { border-color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.05); }

/* ── プロフィールボタン ── */
#ig-profile-btn {
  display: flex; align-items: center; gap: 6px;
  cursor: pointer; padding: 4px 8px; border-radius: 8px;
  transition: background 0.15s;
}
#ig-profile-btn:hover { background: rgba(255,255,255,0.06); }
#ig-profile-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex-shrink: 0;
}
#ig-profile-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
#ig-profile-fallback { display: flex; align-items: center; justify-content: center; }
#ig-chevron { opacity: 0.45; flex-shrink: 0; }
#ig-account-menu {
  position: absolute; top: 60px; right: 16px;
  background: var(--c-surface-2); border: 1px solid var(--c-border);
  border-radius: 10px; padding: 6px 0; min-width: 160px;
  z-index: 200; display: none; box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
#ig-account-menu.open { display: block; }
.ig-menu-user { padding: 8px 14px 6px; font-size: 11px; color: var(--c-text-sub); font-weight: 600; }
.ig-menu-sep { height: 1px; background: var(--c-border); margin: 4px 0; }
.ig-menu-item { padding: 8px 14px; font-size: 12px; color: var(--c-text-sub); cursor: pointer; transition: background 0.12s; }
.ig-menu-item:hover { background: rgba(255,255,255,0.05); color: var(--c-text); }
.ig-menu-danger { color: #ef4444; }
.ig-menu-danger:hover { color: #ef4444; background: rgba(239,68,68,0.08); }

/* ── ビューエリア ── */
#ig-views { flex: 1; overflow: hidden; position: relative; }
.ig-view { display: none; height: 100%; overflow-y: auto; }
.ig-view.active { display: block; }
.ig-view::-webkit-scrollbar { width: 5px; }
.ig-view::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 3px; }

/* ── ローディング ── */
.ig-loading {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  height: 200px; color: var(--c-text-sub); font-size: 13px;
}

/* ── 未接続バナー ── */
.ig-no-connection {
  margin: 24px 24px 0; padding: 24px; text-align: center;
  background: rgba(255,255,255,0.03); border: 1px solid var(--c-border);
  border-radius: 12px; display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.ig-no-con-title { font-size: 14px; font-weight: 700; color: var(--c-text); }
.ig-no-con-sub   { font-size: 12px; color: var(--c-text-sub); }

/* ── 投稿一覧グリッド ── */
.ig-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px; padding: 24px;
}
.ig-card {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: 12px; overflow: hidden; cursor: pointer;
  transition: border-color 0.15s, transform 0.12s;
  position: relative; aspect-ratio: 4/5;
  display: flex; flex-direction: column;
}
.ig-card:hover { border-color: rgba(255,255,255,0.2); transform: translateY(-2px); }
.ig-card-img { width: 100%; flex: 1; object-fit: cover; display: block; min-height: 0; }
.ig-card-img-ph {
  flex: 1; display: flex; align-items: center; justify-content: center;
  background: var(--c-surface-2); color: var(--c-text-sub);
}
.ig-card-info { padding: 8px 10px; flex-shrink: 0; }
.ig-card-title { font-size: 11px; font-weight: 600; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ig-card-caption { font-size: 10px; color: var(--c-text-sub); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-card-badge {
  position: absolute; top: 8px; left: 8px;
  font-size: 10px; font-weight: 700; padding: 3px 8px;
  border-radius: 6px; backdrop-filter: blur(4px);
}
.ig-badge-scheduled { background: rgba(57,189,248,0.25); color: #39bdf8; }
.ig-badge-published { background: rgba(12,199,85,0.25); color: var(--c-green); }
.ig-badge-failed    { background: rgba(239,68,68,0.25); color: #ef4444; }

/* ── 新規投稿カード ── */
.ig-card-new { border-style: dashed; border-color: rgba(255,255,255,0.12); aspect-ratio: 4/5; }
.ig-card-new:hover { border-color: var(--c-blue); }
.ig-card-new-inner {
  height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
  color: var(--c-text-sub); font-size: 12px; font-weight: 500;
}
.ig-card-new:hover .ig-card-new-inner { color: var(--c-blue); }

/* ── 公開済みカード ── */
.ig-card-published { cursor: default; }
.ig-card-pub-meta {
  display: flex; align-items: center; gap: 10px;
  margin-top: 5px; flex-wrap: wrap;
}
.ig-pub-date {
  font-size: 10px; color: var(--c-text-sub);
  display: flex; align-items: center; gap: 3px;
}
.ig-pub-link {
  font-size: 10px; color: var(--c-blue); text-decoration: none;
  display: flex; align-items: center; gap: 3px;
  transition: opacity 0.15s;
}
.ig-pub-link:hover { opacity: 0.75; }

/* ── 公開済みタブ：空状態 ── */
.ig-published-empty {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px;
  padding: 60px 20px; color: var(--c-text-sub); text-align: center;
}
.ig-pub-empty-title { font-size: 14px; font-weight: 700; color: var(--c-text-sub); }
.ig-pub-empty-sub   { font-size: 12px; color: var(--c-text-sub); opacity: 0.7; }

/* ── リストタブ：空状態 ── */
.ig-empty-msg {
  grid-column: 1 / -1;
  padding: 40px 20px; text-align: center;
  font-size: 13px; color: var(--c-text-sub); opacity: 0.7;
}

/* ── カード削除ボタン ── */
.ig-card-del {
  position: absolute; top: 7px; right: 7px; z-index: 5;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(0,0,0,0.55); color: var(--c-text-sub); border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; opacity: 0; transition: opacity 0.15s, color 0.15s;
  backdrop-filter: blur(4px);
}
.ig-card:hover .ig-card-del { opacity: 1; }
.ig-card-del:hover { color: #ef4444 !important; }

/* ── 接続ボタン ── */
.ig-btn-ig-connect {
  background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  color: #fff; border: none; font-size: 13px; font-weight: 700;
  padding: 10px 24px; border-radius: 8px; cursor: pointer; font-family: inherit;
  transition: opacity 0.15s;
}
.ig-btn-ig-connect:hover { opacity: 0.9; }

/* ════════════════════════════════════════════════════
   EDIT VIEW
   ════════════════════════════════════════════════════ */
#ig-edit-root { display: flex; flex-direction: column; height: 100%; }
#ig-edit-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 24px; border-bottom: 1px solid var(--c-border); flex-shrink: 0;
}
.ig-back-btn {
  display: flex; align-items: center; gap: 6px;
  background: transparent; border: none; color: var(--c-text-sub);
  font-size: 13px; cursor: pointer; font-family: inherit; padding: 4px 8px;
  border-radius: 6px; transition: all 0.15s;
}
.ig-back-btn:hover { color: var(--c-text); background: rgba(255,255,255,0.06); }
.ig-edit-acts { display: flex; gap: 8px; }
.ig-btn-reserve {
  background: transparent; border: 1px solid var(--c-border); color: var(--c-text-sub);
  font-size: 12px; font-weight: 600; padding: 7px 14px; border-radius: 8px;
  cursor: pointer; font-family: inherit; transition: all 0.15s;
}
.ig-btn-reserve:hover { border-color: rgba(255,255,255,0.3); color: var(--c-text); }
.ig-btn-pub-now {
  background: var(--c-surface-2); border: 1px solid var(--c-border); color: var(--c-text);
  font-size: 12px; font-weight: 700; padding: 7px 16px; border-radius: 8px;
  cursor: pointer; font-family: inherit; transition: all 0.15s;
}
.ig-btn-pub-now:hover { border-color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.1); }

/* ── 2カラムボディ ── */
#ig-edit-body { display: flex; flex: 1; overflow: hidden; }
#ig-edit-left {
  width: 340px; min-width: 300px; flex-shrink: 0; overflow-y: auto;
  padding: 32px 24px; border-right: 1px solid var(--c-border);
  display: flex; align-items: flex-start; justify-content: center;
}
#ig-edit-right { flex: 1; overflow-y: auto; padding: 24px 28px; min-width: 0; }

/* ── Instagramフォンモック ── */
.ig-phone-wrap { width: 100%; max-width: 280px; }
.ig-phone {
  background: #1a1a1a; border-radius: 18px; overflow: hidden;
  border: 1px solid #333; box-shadow: 0 12px 40px rgba(0,0,0,.6);
}
.ig-phone-hd {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px 8px;
}
.ig-phone-avatar {
  width: 28px; height: 28px; border-radius: 50%; overflow: hidden;
  background: linear-gradient(135deg, #f09433, #dc2743, #bc1888);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ig-phone-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ig-phone-user { font-size: 11px; font-weight: 700; color: #fff; }
.ig-phone-carousel-wrap {
  position: relative; width: 100%;
}
.ig-phone-carousel {
  width: 100%; aspect-ratio: 4/5; position: relative; overflow: hidden;
  background: #111;
}
.ig-prev-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 10; background: rgba(0,0,0,0.45); color: #fff;
  border: none; border-radius: 50%;
  width: 26px; height: 26px; font-size: 18px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: opacity 0.2s, background 0.15s;
  padding: 0;
}
.ig-prev-arrow:hover { background: rgba(0,0,0,0.7); }
.ig-prev-left  { left: 6px; }
.ig-prev-right { right: 6px; }
.ig-prev-slide { position: absolute; inset: 0; display: none; }
.ig-prev-slide.active { display: block; }
.ig-prev-slide img { width: 100%; height: 100%; object-fit: cover; }
.ig-prev-empty { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #555; }
.ig-prev-dots { display: flex; justify-content: center; gap: 4px; padding: 6px 0 4px; }
.ig-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.25); transition: background 0.2s; }
.ig-dot.active { background: rgba(255,255,255,0.8); }
.ig-phone-caption { padding: 8px 10px 10px; font-size: 10px; color: rgba(255,255,255,0.8); line-height: 1.4; }
.ig-phone-caption strong { font-weight: 700; }

/* ── 編集セクション ── */
.ig-edit-sec { margin-bottom: 20px; }
.ig-edit-lbl { font-size: 11px; font-weight: 600; color: var(--c-text-sub); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.06em; }
.ig-edit-lbl-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.ig-edit-hint { font-size: 10px; color: var(--c-text-sub); }
.ig-album-name { font-size: 13px; font-weight: 600; color: var(--c-text); padding: 6px 0; }
.ig-cap-area {
  width: 100%; min-height: 100px; padding: 10px 12px;
  background: rgba(255,255,255,0.05); border: 1px solid var(--c-border);
  border-radius: 8px; color: var(--c-text); font-size: 13px; font-family: inherit;
  line-height: 1.5; resize: vertical; box-sizing: border-box;
  transition: border-color 0.2s;
}
.ig-cap-area:focus { border-color: var(--c-blue); outline: none; background: rgba(255,255,255,0.07); }
.ig-char-cnt { font-size: 10px; color: var(--c-text-sub); text-align: right; margin-top: 4px; }

/* ── 写真グリッド ── */
.ig-photo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ig-photo-item {
  position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden;
  background: var(--c-surface-2); cursor: grab;
}
.ig-photo-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ig-photo-item.dragging { opacity: 0.4; cursor: grabbing; }
.ig-photo-item.drag-over { outline: 2px solid var(--c-blue); }
.ig-cover-badge {
  position: absolute; bottom: 4px; left: 4px;
  background: var(--c-blue); color: #000;
  font-size: 9px; font-weight: 700; padding: 2px 5px; border-radius: 4px;
}
.ig-photo-rm {
  position: absolute; top: 3px; right: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(0,0,0,0.6); color: #fff; border: none;
  font-size: 10px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; line-height: 1; padding: 0; opacity: 0; transition: opacity 0.15s;
}
.ig-photo-item:hover .ig-photo-rm { opacity: 1; }
.ig-photo-add {
  aspect-ratio: 1; border-radius: 8px; border: 1px dashed rgba(255,255,255,0.15);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; cursor: pointer; color: var(--c-text-sub); font-size: 10px;
  transition: all 0.15s;
}
.ig-photo-add:hover { border-color: var(--c-blue); color: var(--c-blue); }
.ig-photo-add span:first-child { font-size: 18px; font-weight: 300; line-height: 1; }

/* ── 予約オーバーレイ ── */
.ig-reserve-overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center; z-index: 50;
}
.ig-reserve-box {
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 12px;
  padding: 20px 24px; display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
}
.ig-reserve-box input[type="date"],
.ig-reserve-box select,
.ig-reserve-box input[type="time"] {
  padding: 7px 10px; font-size: 13px; border-radius: 7px;
}
.ig-res-time-input {
  background: var(--c-surface); border: 1px solid var(--c-border);
  color: var(--c-text); font-family: inherit; cursor: pointer;
  min-width: 100px;
}
.ig-res-time-input:focus {
  outline: none; border-color: var(--c-blue);
}

/* ════════════════════════════════════════════════════
   CALENDAR VIEW
   ════════════════════════════════════════════════════ */
#ig-view-calendar { padding: 24px; }
#ig-cal-root { height: 100%; }
#ig-cal-nav {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 20px;
}
.ig-cal-nav {
  background: transparent; border: 1px solid var(--c-border); color: var(--c-text-sub);
  width: 28px; height: 28px; border-radius: 6px; font-size: 18px; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: all 0.15s;
}
.ig-cal-nav:hover { border-color: rgba(255,255,255,0.3); color: var(--c-text); }
.ig-cal-title { font-size: 15px; font-weight: 700; color: var(--c-text); }
.ig-cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 1px; background: var(--c-border);
  border: 1px solid var(--c-border); border-radius: 10px; overflow: hidden;
}
.ig-cal-hd {
  background: var(--c-surface-2); text-align: center;
  font-size: 10px; font-weight: 600; color: var(--c-text-sub);
  padding: 8px 0; text-transform: uppercase; letter-spacing: 0.05em;
}
.ig-cal-cell {
  background: var(--c-surface); min-height: 90px; padding: 6px;
  position: relative; vertical-align: top;
  transition: background 0.1s;
}
.ig-cal-cell.ig-today { background: rgba(57,189,248,0.05); }
.ig-cal-cell.drag-over { background: rgba(57,189,248,0.1) !important; }
.ig-cal-empty { background: rgba(0,0,0,0.2); }
.ig-cal-num { font-size: 11px; color: var(--c-text-sub); display: block; margin-bottom: 4px; }
.ig-today-dot {
  width: 20px; height: 20px; border-radius: 50%; background: var(--c-blue);
  color: #000; font-size: 11px; font-weight: 700; display: inline-flex;
  align-items: center; justify-content: center;
}
.ig-cal-post {
  width: 100%; border-radius: 6px; overflow: hidden; cursor: pointer;
  background: var(--c-surface-2); margin-bottom: 3px;
  transition: transform 0.1s;
}
.ig-cal-post:hover { transform: scale(1.02); }
.ig-cal-post img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.ig-cal-ph { width: 100%; aspect-ratio: 1; background: var(--c-surface-2); display: flex; align-items: center; justify-content: center; color: var(--c-text-sub); }
.ig-cal-time {
  font-size: 9px; color: var(--c-text-sub); padding: 5px 5px;
  display: flex; align-items: center; gap: 3px; cursor: pointer;
  transition: background 0.15s, color 0.15s; border-radius: 0 0 6px 6px;
}
.ig-cal-time:hover { background: rgba(255,255,255,0.07); color: var(--c-text); }

/* ── カレンダーカード削除ボタン ── */
.ig-cal-post { position: relative; }
.ig-cal-del {
  position: absolute; top: 3px; right: 3px; z-index: 5;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(0,0,0,0.55); color: var(--c-text-sub); border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; opacity: 0; transition: opacity 0.15s, color 0.15s;
  backdrop-filter: blur(4px); padding: 0;
}
.ig-cal-post:hover .ig-cal-del { opacity: 1; }
.ig-cal-del:hover { color: #ef4444 !important; }

/* ════════════════════════════════════════════════════
   MODALS 共通
   ════════════════════════════════════════════════════ */
.ig-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.7);
  display: none; align-items: center; justify-content: center;
  z-index: 300;
}
.ig-modal-overlay.open { display: flex; }
.ig-modal-box {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: 16px; max-height: 90vh; overflow-y: auto;
}
.ig-btn-cancel {
  background: transparent; border: 1px solid var(--c-border); color: var(--c-text-sub);
  font-size: 13px; font-weight: 500; padding: 9px 18px; border-radius: 8px;
  cursor: pointer; font-family: inherit; transition: all 0.15s;
}
.ig-btn-cancel:hover { border-color: rgba(255,255,255,0.3); color: var(--c-text); }
.ig-btn-save-sm {
  background: rgba(57,189,248,0.18); color: rgba(255,255,255,0.88);
  border: 1px solid rgba(57,189,248,0.72);
  font-size: 13px; font-weight: 700; padding: 9px 18px; border-radius: 8px;
  cursor: pointer; font-family: inherit; transition: background 0.15s;
}
.ig-btn-save-sm:hover { background: rgba(57,189,248,0.28); }

/* ── 投稿キャンセルボタン ── */
.ig-btn-cancel-schedule {
  background: transparent; border: 1px solid rgba(239,68,68,0.4); color: #ef4444;
  font-size: 13px; font-weight: 600; padding: 9px 18px; border-radius: 8px;
  cursor: pointer; font-family: inherit; transition: all 0.15s;
}
.ig-btn-cancel-schedule:hover { background: rgba(239,68,68,0.1); border-color: #ef4444; }

/* ── 予約ポップアップ（タイトル・ラベル・ボタン行） ── */
.ig-reserve-title { font-size: 13px; font-weight: 700; color: var(--c-text); width: 100%; margin-bottom: 2px; }
.ig-reserve-lbl   { font-size: 11px; color: var(--c-text-sub); }
.ig-reserve-btns  { display: flex; gap: 8px; margin-left: auto; }
.ig-res-sel { padding: 7px 10px; font-size: 13px; border-radius: 7px; }

/* カレンダードロップポップアップは fixed で画面中央に */
#ig-cal-drop-popup { position: fixed; }

/* ── 確認モーダル ── */
.ig-confirm-box { padding: 28px; width: 460px; max-width: calc(100vw - 40px); }
.ig-conf-title { font-size: 16px; font-weight: 800; color: var(--c-text); margin-bottom: 8px; }
.ig-conf-sub { font-size: 12px; color: var(--c-text-sub); line-height: 1.5; margin-bottom: 20px; }
.ig-conf-row { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 20px; }
.ig-conf-img-wrap {
  width: 80px; height: 80px; border-radius: 8px; overflow: hidden;
  background: var(--c-surface-2); flex-shrink: 0;
}
.ig-conf-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.ig-conf-img-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--c-text-sub); }
.ig-conf-detail { flex: 1; min-width: 0; }
.ig-conf-user { font-size: 12px; font-weight: 700; color: var(--c-text); display: block; margin-bottom: 4px; }
.ig-conf-cap  { font-size: 12px; color: var(--c-text-sub); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ig-conf-btns { display: flex; justify-content: flex-end; gap: 8px; }
.ig-btn-ig-pub {
  background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  color: #fff; border: none; font-size: 13px; font-weight: 700;
  padding: 9px 20px; border-radius: 8px; cursor: pointer; font-family: inherit;
  transition: opacity 0.15s;
}
.ig-btn-ig-pub:hover { opacity: 0.9; }
.ig-btn-ig-pub:disabled { opacity: 0.85; cursor: not-allowed; color: #fff; }

/* ── 連携解除確認モーダル ── */
.ig-disconnect-box { padding: 28px; width: 420px; max-width: calc(100vw - 40px); }
.ig-disconnect-hdr {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
}
.ig-disconnect-title {
  font-size: 15px; font-weight: 800; color: var(--c-text);
  display: flex; align-items: center; gap: 8px;
}
.ig-disconnect-body {
  font-size: 13px; color: var(--c-text-sub); line-height: 1.7;
  margin: 0 0 10px;
}
.ig-disconnect-list {
  margin: 0 0 14px; padding-left: 18px;
}
.ig-disconnect-list li {
  font-size: 13px; color: var(--c-text-sub); line-height: 1.9;
}
.ig-disconnect-note {
  font-size: 12px; color: var(--c-text-sub); opacity: 0.65;
  margin: 0 0 24px; line-height: 1.6;
}
.ig-disconnect-btns { display: flex; justify-content: flex-end; gap: 8px; }
.ig-btn-disconnect {
  background: rgba(239,68,68,0.15); border: 1px solid rgba(239,68,68,0.55);
  color: #ef4444; font-size: 13px; font-weight: 700;
  padding: 9px 20px; border-radius: 8px;
  cursor: pointer; font-family: inherit; transition: all 0.15s;
}
.ig-btn-disconnect:hover { background: rgba(239,68,68,0.25); border-color: #ef4444; }

/* ── 投稿成功モーダル ── */
.ig-success-box {
  padding: 44px 36px 36px;
  text-align: center;
  width: 400px;
  max-width: calc(100vw - 40px);
}
.ig-success-icon { margin-bottom: 24px; }
.ig-success-title {
  font-size: 22px; font-weight: 800; color: var(--c-text);
  margin-bottom: 10px; letter-spacing: -0.3px;
}
.ig-success-sub {
  font-size: 13px; color: var(--c-text-sub);
  line-height: 1.6; margin-bottom: 28px;
}
.ig-success-btns {
  display: flex; flex-direction: column; gap: 10px;
}
.ig-btn-ig-view {
  background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  color: #fff; border: none; font-size: 14px; font-weight: 700;
  padding: 12px 20px; border-radius: 10px; cursor: pointer;
  font-family: inherit; transition: opacity 0.15s; width: 100%;
}
.ig-btn-ig-view:hover { opacity: 0.9; }

/* ── 接続モーダル ── */
.ig-connect-box { padding: 36px 32px; text-align: center; width: 360px; max-width: calc(100vw - 40px); }
.ig-connect-icon { color: var(--c-text-sub); margin-bottom: 16px; }
.ig-connect-title { font-size: 16px; font-weight: 800; color: var(--c-text); margin-bottom: 8px; }
.ig-connect-sub { font-size: 12px; color: var(--c-text-sub); line-height: 1.5; margin-bottom: 20px; }

/* ── フォトピッカー ── */
.ig-picker-box { width: 600px; max-width: calc(100vw - 40px); max-height: 80vh; display: flex; flex-direction: column; }
.ig-picker-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 14px; border-bottom: 1px solid var(--c-border); flex-shrink: 0;
}
.ig-picker-title { font-size: 15px; font-weight: 700; color: var(--c-text); }
.ig-picker-close {
  background: transparent; border: none; color: var(--c-text-sub);
  font-size: 16px; cursor: pointer; line-height: 1; padding: 2px 4px;
  transition: color 0.15s;
}
.ig-picker-close:hover { color: var(--c-text); }
.ig-picker-album-row { padding: 12px 20px; flex-shrink: 0; border-bottom: 1px solid var(--c-border); }
.ig-picker-album-row select { width: 100%; padding: 8px 10px; font-size: 13px; border-radius: 7px; }
.ig-picker-grid {
  flex: 1; overflow-y: auto; padding: 16px 20px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 6px;
}
.ig-picker-empty { grid-column: 1/-1; text-align: center; color: var(--c-text-sub); font-size: 13px; padding: 40px 0; }
.ig-picker-photo {
  aspect-ratio: 1; border-radius: 7px; overflow: hidden; cursor: pointer;
  position: relative; background: var(--c-surface-2);
  border: 2px solid transparent; transition: border-color 0.15s;
}
.ig-picker-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ig-picker-photo.selected { border-color: var(--c-blue); }
.ig-picker-chk {
  position: absolute; top: 4px; right: 4px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--c-blue); color: #000; font-size: 11px; font-weight: 700;
  display: none; align-items: center; justify-content: center;
}
.ig-picker-photo.selected .ig-picker-chk { display: flex; }
.ig-picker-ft {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 14px 20px; border-top: 1px solid var(--c-border); flex-shrink: 0;
}
#ig-picker-cnt { flex: 1; font-size: 12px; color: var(--c-text-sub); }
.ig-btn-add {
  background: rgba(57,189,248,0.18); color: rgba(255,255,255,0.88);
  border: 1px solid rgba(57,189,248,0.72);
  font-size: 13px; font-weight: 700; padding: 9px 18px; border-radius: 8px;
  cursor: pointer; font-family: inherit; transition: background 0.15s;
}
.ig-btn-add:hover { background: rgba(57,189,248,0.28); }

/* ════════════════════════════════════════════════
   StateMessages — LINE / Instagram DM 統合受信トレイ + 記念日カード  v1.24.1
   ════════════════════════════════════════════════ */

/* ── 検索バー ── */
#msg-filter-bar {
  display: flex;
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-surface2, #181818);
  flex-shrink: 0;
}
#msg-search-wrap {
  position: relative;
  flex: 1 1 100%;
}
#msg-search {
  width: 100%;
  box-sizing: border-box;
  background: #1a1a1a;
  border: 1px solid var(--c-border);
  border-radius: 7px;
  padding: 6px 28px 6px 10px;
  font-size: 12px;
  color: var(--c-text);
  outline: none;
  font-family: inherit;
  transition: border-color 0.15s;
}
#msg-search::placeholder { color: var(--c-text-mute); }
#msg-search:focus { border-color: var(--c-accent); }
#msg-search-clear {
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--c-text-mute);
  cursor: pointer;
  font-size: 13px;
  padding: 0;
  line-height: 1;
}
#msg-search-clear:hover { color: var(--c-text); }

#state-messages {
  flex-direction: column;
  padding: 0; overflow: hidden;
}
/* state-panel の display:none を ID セレクタで上書きしないよう .active 側でのみ flex を付与 */
#state-messages.active {
  display: flex;
}

/* ─ モード切替バー ─ */
.msg-mode-bar {
  display: flex; flex-shrink: 0;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-surface2); padding: 0 10px; gap: 2px;
}
.msg-mode-tab {
  display: flex; align-items: center; gap: 5px;
  padding: 9px 14px; border: none; background: transparent;
  font-size: 12px; font-weight: 600; color: var(--c-text-sub);
  cursor: pointer; border-bottom: 2px solid transparent;
  margin-bottom: -1px; font-family: inherit; transition: all 0.13s;
}
.msg-mode-tab:hover { color: var(--c-text); }
.msg-mode-tab.active { color: var(--c-accent); border-bottom-color: var(--c-accent); }

/* ─ 受信トレイラッパー ─ */
.msg-inbox-wrap {
  flex: 1; overflow: hidden; display: flex; flex-direction: column;
}

/* ─ 2ペインラッパー ─ */
.msg-wrap {
  flex: 1; display: flex; overflow: hidden;
}

/* ─ 左ペイン: スレッドリスト ─ */
.msg-sidebar {
  width: 272px; flex-shrink: 0;
  border-right: 1px solid var(--c-border);
  display: flex; flex-direction: column;
  background: var(--c-surface2);
}
.msg-sidebar-hd {
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.msg-sidebar-title {
  font-size: 13px; font-weight: 700; color: var(--c-text); margin: 0;
}

/* ─ チャネルタブ（横スクロール対応） ─ */
.msg-tabs {
  display: flex; gap: 4px; padding: 8px 10px 6px;
  border-bottom: 1px solid var(--c-border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.msg-tabs::-webkit-scrollbar { display: none; }
.msg-tab {
  flex-shrink: 0;
  white-space: nowrap;
  background: transparent; border: none;
  font-size: 11px; font-weight: 600; color: var(--c-text-sub);
  padding: 5px 8px; border-radius: 7px; cursor: pointer;
  font-family: inherit; transition: all 0.13s;
}
.msg-tab:hover { background: var(--c-hover); color: var(--c-text); }
.msg-tab.active { background: var(--c-accent-dim); color: var(--c-accent); }
.msg-tab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; border-radius: 8px;
  background: var(--c-accent); color: #fff;
  font-size: 10px; font-weight: 700; padding: 0 4px;
  margin-left: 4px; line-height: 1; vertical-align: middle;
}

/* ─ メッセージクォータ・カウンター (v1.71) ─ */
.msg-quota-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 14px;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  font-size: 12px;
  flex-shrink: 0;
}
.msg-quota-icon {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--c-accent-dim);
  color: var(--c-accent);
  flex-shrink: 0;
}
.msg-quota-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.msg-quota-label {
  font-size: 10px; font-weight: 600;
  color: var(--c-text-sub);
  letter-spacing: 0.04em;
}
.msg-quota-counts {
  display: flex; align-items: baseline; gap: 3px;
  font-family: 'Quicksand', 'Noto Sans JP', sans-serif;
}
.msg-quota-used  { font-size: 16px; font-weight: 700; color: var(--c-text); }
.msg-quota-sep   { font-size: 13px; color: var(--c-text-mute); }
.msg-quota-limit { font-size: 13px; color: var(--c-text-sub); }
.msg-quota-unit  { font-size: 10px; color: var(--c-text-mute); margin-left: 2px; }

.msg-quota-progress-wrap {
  flex: 1;
  height: 6px; border-radius: 3px;
  background: var(--c-track);
  overflow: hidden;
  min-width: 60px;
  max-width: 320px;
}
.msg-quota-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--c-accent);
  border-radius: 3px;
  transition: width 0.4s ease, background 0.3s;
}
.msg-quota-progress-bar.warn   { background: var(--c-orange); }
.msg-quota-progress-bar.danger { background: var(--c-danger); }

.msg-quota-plan {
  font-size: 10px; font-weight: 600;
  color: var(--c-text-sub);
  padding: 3px 8px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  white-space: nowrap;
  flex-shrink: 0;
}
.msg-quota-refresh {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  background: transparent;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  color: var(--c-text-mute);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s;
}
.msg-quota-refresh:hover { color: var(--c-accent); border-color: var(--c-accent); }
body.theme-warm .msg-quota-bar { background: #FFFFFF; border-bottom-color: #EFE9E5; }
body.theme-warm .msg-quota-plan { background: #F8F6F4; border-color: #EFE9E5; }
body.theme-light .msg-quota-bar { background: #FFFFFF; border-bottom-color: #dde0e6; }
body.theme-light .msg-quota-plan { background: #f4f5f7; border-color: #dde0e6; }

/* ─ スレッドリスト ─ */
.msg-thread-list { flex: 1; overflow-y: auto; padding: 6px 0; }

.msg-thread-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; cursor: pointer;
  border-left: 3px solid transparent;
  transition: background 0.12s, border-color 0.12s;
}
.msg-thread-item:hover { background: var(--c-hover); }
.msg-thread-item.active {
  background: var(--c-active); border-left-color: var(--c-accent);
}
.msg-thread-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--c-surface-2); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: var(--c-text-sub);
  overflow: hidden;
}
.msg-thread-avatar img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}
.msg-thread-body { flex: 1; min-width: 0; }
.msg-thread-top {
  display: flex; align-items: center; gap: 5px;
  margin-bottom: 3px; flex-wrap: nowrap;
}
.msg-thread-name {
  font-size: 13px; font-weight: 600; color: var(--c-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1; min-width: 0;
}
.msg-thread-time {
  font-size: 10px; color: var(--c-text-mute); flex-shrink: 0;
}
.msg-thread-preview {
  font-size: 11.5px; color: var(--c-text-sub);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.msg-thread-item.unread .msg-thread-name { font-weight: 700; }
.msg-thread-item.unread .msg-thread-preview { color: var(--c-text-light); }
mark.msg-hl {
  background: rgba(251,191,36,0.28); color: #fbbf24;
  border-radius: 2px; padding: 0 1px;
  font-weight: inherit; font-style: normal;
}
@keyframes msg-focus-flash {
  0%   { box-shadow: 0 0 0 3px rgba(251,191,36,0.6); }
  100% { box-shadow: 0 0 0 3px rgba(251,191,36,0); }
}
.msg-bubble.msg-search-focus {
  animation: msg-focus-flash 1.8s ease-out forwards;
}
.msg-thread-del-btn {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 5px; border: none;
  background: transparent; color: var(--c-text-mute);
  cursor: pointer; opacity: 0; transition: opacity 0.15s, background 0.15s, color 0.15s;
  padding: 0;
}
.msg-thread-item:hover .msg-thread-del-btn { opacity: 1; }
.msg-thread-del-btn:hover { background: rgba(239,68,68,0.15); color: var(--c-danger); }

/* チャネルバッジ */
.msg-ch-badge {
  font-size: 9px; font-weight: 700;
  padding: 2px 5px; border-radius: 4px;
  flex-shrink: 0; letter-spacing: 0.2px;
}
.msg-ch-badge.line {
  background: rgba(6,199,85,0.15);
  border: 1px solid rgba(6,199,85,0.5);
  color: #06C755;
}
.msg-ch-badge.instagram {
  background: rgba(244,114,182,0.15);
  border: 1px solid rgba(244,114,182,0.5);
  color: #f472b6;
}

/* 未読ドット */
.msg-unread-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-accent); flex-shrink: 0; margin-left: auto;
}

/* ─ 右ペイン: メイン ─ */
.msg-main {
  flex: 1; display: flex; flex-direction: column; overflow: hidden;
  min-width: 0;
}

/* モック告知バナー */
.msg-mock-banner {
  background: rgba(245,158,11,0.08);
  border-bottom: 1px solid rgba(245,158,11,0.28);
  padding: 7px 14px; font-size: 11px; color: var(--c-orange);
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
  line-height: 1.4;
}

/* 空状態 */
.msg-empty {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
}
.msg-empty-text {
  font-size: 13px; color: var(--c-text-mute);
}

/* 会話パネル */
.msg-conv {
  flex: 1; display: flex; flex-direction: column; overflow: hidden;
}

/* ─ 会話ヘッダ ─ */
.msg-conv-hd {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-bottom: 1px solid var(--c-border);
  flex-shrink: 0; background: var(--c-surface2);
}
.msg-conv-hd-name {
  font-size: 14px; font-weight: 700; color: var(--c-text);
}

/* ─ メッセージ本文 ─ */
.msg-conv-body {
  flex: 1; overflow-y: auto; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 10px;
}

.msg-bubble-wrap {
  display: flex; flex-direction: column;
  align-items: flex-start; gap: 3px;
}
.msg-bubble-wrap.out { align-items: flex-end; }

.msg-bubble {
  max-width: 70%; padding: 9px 13px;
  border-radius: 4px 12px 12px 12px;
  font-size: 13px; line-height: 1.6; word-break: break-word;
  background: var(--c-surface-2); color: var(--c-text);
}
.msg-bubble-wrap.out .msg-bubble {
  border-radius: 12px 4px 12px 12px;
  background: rgba(57,189,248,0.16);
  border: 1px solid rgba(57,189,248,0.22);
}
.msg-bubble-time {
  font-size: 10px; color: var(--c-text-mute); padding: 0 4px;
}

/* ─ 返信フォーム ─ */
.msg-conv-ft {
  display: flex; gap: 8px; padding: 10px 14px;
  border-top: 1px solid var(--c-border); flex-shrink: 0;
  align-items: flex-end; background: var(--c-surface2);
}
.msg-input {
  flex: 1; background: var(--c-surface-2);
  border: 1px solid var(--c-border); border-radius: 10px;
  color: var(--c-text); font-size: 13px; padding: 9px 12px;
  resize: none; font-family: inherit; line-height: 1.5;
  transition: border-color 0.15s; max-height: 120px;
}
.msg-input:focus { outline: none; border-color: var(--c-accent); }
.msg-input::placeholder { color: var(--c-text-mute); }

.msg-send-btn {
  background: var(--c-accent-18); border: 1px solid var(--c-accent-72);
  color: var(--c-text); font-size: 13px; font-weight: 700;
  padding: 9px 18px; border-radius: 10px; cursor: pointer;
  font-family: inherit; transition: all 0.15s; flex-shrink: 0;
}
.msg-send-btn:hover { background: rgba(57,189,248,0.28); border-color: var(--c-accent); }
.msg-send-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ─ ファイル添付 ─ */
/* 入力行（クリップ + textarea + 送信ボタンを横並び） */
.msg-input-row {
  display: flex; align-items: flex-end; gap: 8px; width: 100%;
}
.msg-conv-ft { flex-direction: column; align-items: stretch; gap: 0; }

/* クリップボタン */
.msg-attach-btn {
  width: 36px; height: 36px; flex-shrink: 0;
  background: transparent; border: 1px solid var(--c-border);
  border-radius: 9px; cursor: pointer; color: var(--c-text-sub);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.13s; align-self: flex-end; margin-bottom: 0;
}
.msg-attach-btn:hover { border-color: var(--c-accent); color: var(--c-accent); background: var(--c-accent-dim); }
.msg-attach-btn.has-file { border-color: var(--c-accent); color: var(--c-accent); background: var(--c-accent-dim); }

/* ファイルプレビューエリア（textarea上部に表示） */
.msg-file-preview {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; margin-bottom: 8px;
  background: var(--c-surface-2); border: 1px solid var(--c-border);
  border-radius: 10px; flex-shrink: 0;
}
.msg-file-preview-img {
  width: 52px; height: 52px; object-fit: cover;
  border-radius: 7px; display: block; flex-shrink: 0;
}
.msg-file-preview-video {
  width: 80px; height: 52px; object-fit: cover;
  border-radius: 7px; display: block; flex-shrink: 0;
}
.msg-file-preview-icon {
  width: 52px; height: 52px; border-radius: 7px;
  background: var(--c-surface); display: flex;
  align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--c-text-sub);
}
.msg-file-preview-name {
  flex: 1; font-size: 12px; color: var(--c-text-sub);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.msg-file-preview-clear {
  background: transparent; border: none; color: var(--c-text-mute);
  font-size: 16px; cursor: pointer; line-height: 1;
  padding: 2px 4px; flex-shrink: 0; transition: color 0.13s;
}
.msg-file-preview-clear:hover { color: var(--c-danger); }

/* ─ バブル内ファイル表示 ─ */
.msg-bubble-img {
  max-width: 220px; max-height: 180px; border-radius: 8px;
  display: block; margin-top: 6px; cursor: zoom-in;
  object-fit: cover;
}
.msg-bubble-video {
  max-width: 240px; border-radius: 8px;
  display: block; margin-top: 6px;
}
.msg-bubble-audio {
  display: block; margin-top: 6px;
  width: 240px; max-width: 100%;
  accent-color: var(--c-accent, #60a5fa);
}
.msg-bubble-file {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 6px; padding: 7px 11px;
  background: rgba(255,255,255,0.06); border: 1px solid var(--c-border);
  border-radius: 8px; font-size: 12px; color: var(--c-text-sub);
  text-decoration: none; max-width: 220px; overflow: hidden;
}
.msg-bubble-file:hover { color: var(--c-text); border-color: var(--c-accent); }
.msg-bubble-file-name {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── ファイルカード（PDF・その他）─────────────────────── */
.msg-file-card {
  display: flex; align-items: center; gap: 10px;
  margin-top: 6px; padding: 10px 12px;
  border: 1px solid var(--c-border); border-radius: 10px;
  max-width: 280px; background: rgba(255,255,255,0.04);
  cursor: default; text-decoration: none;
}
.msg-file-card-link {
  cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.msg-file-card-link:hover {
  background: rgba(255,255,255,0.09); border-color: var(--c-accent);
}
.msg-file-card-ico { flex-shrink: 0; color: var(--c-text-sub); }
.msg-file-card-body {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px;
}
.msg-file-card-name {
  font-size: 12px; color: var(--c-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.msg-file-card-meta {
  font-size: 10px; color: var(--c-text-sub);
}
.msg-file-card.msg-file-expired { opacity: 0.55; }
/* アップロード中ステータス */
.msg-file-preview-status {
  font-size: 11px; color: var(--c-text-sub);
  padding: 0 4px;
}

/* 画像ライトボックス（クリックで全画面表示） */
.msg-lightbox {
  position: fixed; inset: 0; background: rgba(0,0,0,0.88);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999; cursor: zoom-out;
}
.msg-lightbox img {
  max-width: 90vw; max-height: 90vh;
  border-radius: 6px; object-fit: contain;
}
.ig-btn-add:hover { background: rgba(57,189,248,0.28); }

/* ════════════════════════════════════════════════
   StateMessages — 記念日カードモード (3ペイン)  v1.20.0
   ════════════════════════════════════════════════ */

/* ─ 3ペインラッパー ─ */
.msg-anniv-wrap {
  flex: 1; display: flex; overflow: hidden;
}

/* ─ 左: 顧客リスト ─ */
.man-list-pane {
  width: 200px; flex-shrink: 0;
  border-right: 1px solid var(--c-border);
  overflow-y: auto; padding: 8px 0;
  background: var(--c-surface2);
}
.man-list-hd {
  font-size: 10px; font-weight: 700; color: var(--c-text-mute);
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 4px 12px 6px;
}
.man-section-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 700; color: var(--c-text-mute);
  padding: 10px 12px 4px;
}
.man-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 7px 12px 7px 14px; cursor: pointer;
  border-left: 3px solid transparent; transition: background 0.12s;
}
.man-item:hover { background: var(--c-hover); }
.man-item.active { background: var(--c-active); border-left-color: var(--c-accent); }
.man-item-name { font-size: 12.5px; font-weight: 600; color: var(--c-text); }
.man-item-date { font-size: 11px; color: var(--c-text-sub); }
.man-item-badge {
  display: inline-block; font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: 4px; margin-top: 2px; width: fit-content;
}
.man-item-badge.this-month { background: rgba(57,189,248,0.15); color: var(--c-accent); }
.man-item-badge.next-month { background: var(--c-surface-2); color: var(--c-text-mute); }
.man-no-line { opacity: 0.45; }

/* ─ 中: 写真グリッド ─ */
.man-photos-pane {
  flex: 1; display: flex; flex-direction: column;
  border-right: 1px solid var(--c-border); overflow: hidden; min-width: 0;
}
.man-photos-hd {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  padding: 9px 14px 8px; border-bottom: 1px solid var(--c-border);
  background: var(--c-surface2); flex-wrap: wrap;
}
.man-photos-title { font-size: 12.5px; font-weight: 700; color: var(--c-text); }
.man-photos-hint { font-size: 10.5px; color: var(--c-text-mute); }
.man-photos-empty {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.man-photos-grid {
  flex: 1; overflow-y: auto; padding: 10px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  align-content: start;
}
.man-photo-thumb {
  aspect-ratio: 1; border-radius: 6px; overflow: hidden; cursor: pointer;
  border: 2.5px solid transparent; position: relative;
  transition: border-color 0.12s, transform 0.1s;
}
.man-photo-thumb:hover { border-color: var(--c-accent); transform: scale(1.02); }
.man-photo-thumb.selected { border-color: var(--c-accent); }
.man-photo-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.man-photo-num {
  position: absolute; top: 4px; right: 4px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--c-accent); color: #fff;
  font-size: 10px; font-weight: 700;
  display: none; align-items: center; justify-content: center;
}
.man-photo-thumb.selected .man-photo-num { display: flex; }
.man-photos-mock-note {
  flex-shrink: 0; padding: 4px 14px 6px;
  font-size: 10px; color: var(--c-text-mute);
  display: flex; align-items: center; gap: 4px;
}

/* ─ 右: Canvasエディタ ─ */
.man-editor-pane {
  width: 340px; flex-shrink: 0; display: flex; flex-direction: column;
  overflow-y: auto;
}
.mae-canvas-wrap {
  position: relative; flex-shrink: 0;
  background: #111; line-height: 0;
}
body.theme-light .mae-canvas-wrap { background: #e9eaee; }
body.theme-warm  .mae-canvas-wrap { background: #F0EBE5; }
#mae-canvas {
  display: block; width: 100%; height: auto; cursor: crosshair;
}
.mae-canvas-placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; font-size: 12px; color: var(--c-text-mute);
  pointer-events: none; line-height: 1.6;
}
.mae-tools {
  flex-shrink: 0; padding: 10px 12px 8px;
  border-bottom: 1px solid var(--c-border);
}
.mae-tool-section { margin-bottom: 10px; }
.mae-tool-section:last-child { margin-bottom: 0; }
.mae-tool-label {
  font-size: 10px; font-weight: 700; color: var(--c-text-mute);
  text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px;
}
.mae-tool-hint {
  font-size: 9.5px; font-weight: 400; text-transform: none;
  letter-spacing: 0; color: var(--c-text-mute);
}
.mae-tool-row {
  display: flex; align-items: center; gap: 6px; margin-bottom: 5px;
}
.mae-tool-row:last-child { margin-bottom: 0; }
.mae-text-field {
  flex: 1; padding: 5px 8px; border-radius: 6px;
  border: 1px solid var(--c-border); background: var(--c-surface);
  font-size: 12px; color: var(--c-text); font-family: inherit; outline: none;
}
.mae-text-field:focus { border-color: var(--c-accent); }
.mae-btn {
  padding: 5px 10px; border-radius: 6px; border: none;
  background: var(--c-accent); color: #fff;
  font-size: 11.5px; font-weight: 600; cursor: pointer; font-family: inherit;
  white-space: nowrap;
}
.mae-btn:hover { opacity: 0.86; }
.mae-btn-sm {
  padding: 4px 8px; border-radius: 5px;
  border: 1px solid var(--c-border); background: var(--c-surface);
  font-size: 11px; color: var(--c-text-sub); cursor: pointer; font-family: inherit;
  white-space: nowrap;
}
.mae-btn-sm:hover { background: var(--c-hover); }
.mae-clear-btn { color: var(--c-danger, #e05555); border-color: transparent; }
.mae-label { font-size: 11px; color: var(--c-text-sub); white-space: nowrap; }
.mae-range { flex: 1; min-width: 0; accent-color: var(--c-accent); }
.mae-color-input {
  width: 28px; height: 24px; border-radius: 4px;
  border: 1px solid var(--c-border); padding: 1px; cursor: pointer; background: none;
}
.mae-layout-btn {
  padding: 4px 10px; border-radius: 5px;
  border: 1px solid var(--c-border); background: var(--c-surface);
  font-size: 11px; color: var(--c-text-sub); cursor: pointer; font-family: inherit;
  transition: all 0.12s;
}
.mae-layout-btn:hover { background: var(--c-hover); color: var(--c-text); }
.mae-layout-btn.active {
  background: var(--c-accent-dim); color: var(--c-accent); border-color: var(--c-accent);
}
.mae-msg-wrap {
  flex: 1; display: flex; flex-direction: column; padding: 10px 12px; gap: 8px;
  min-height: 120px;
}
.mae-msg-input {
  flex: 1; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--c-border); background: var(--c-surface);
  color: var(--c-text); font-size: 12.5px; font-family: inherit;
  resize: none; outline: none; min-height: 70px;
}
.mae-msg-input:focus { border-color: var(--c-accent); }
.mae-send-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 0; border-radius: 8px; border: none;
  background: #06C755; color: #fff;
  font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit;
  transition: opacity 0.13s; flex-shrink: 0;
}
.mae-send-btn:hover { opacity: 0.86; }

/* ════════════════════════════════════════════════
   StateMessages — 記念日カードモード リニューアル  v1.21.0
   ════════════════════════════════════════════════ */

/* ─ 中央ペイン（縦分割） ─ */
.man-center-pane {
  flex: 1; display: flex; flex-direction: column;
  overflow: hidden; min-width: 0;
  border-right: 1px solid var(--c-border);
}

/* ─ カードプレビューエリア（下段） ─ */
.man-card-area {
  flex: 1; display: flex; flex-direction: column;
  overflow: hidden; border-top: 1px solid var(--c-border);
  background: var(--c-surface2);
}

/* テンプレート選択バー */
.man-tpl-bar {
  display: flex; flex-shrink: 0; gap: 6px;
  padding: 8px 12px; overflow-x: auto;
  border-bottom: 1px solid var(--c-border);
  scrollbar-width: none;
}
.man-tpl-bar::-webkit-scrollbar { display: none; }
.man-tpl-btn {
  flex-shrink: 0; padding: 4px 12px; border-radius: 20px;
  border: 1.5px solid var(--c-border); background: var(--c-surface);
  font-size: 11.5px; font-weight: 600; color: var(--c-text-sub);
  cursor: pointer; font-family: inherit; transition: all 0.13s;
  white-space: nowrap;
}
.man-tpl-btn:hover { border-color: var(--c-accent); color: var(--c-accent); }
.man-tpl-btn.active {
  background: var(--c-accent); border-color: var(--c-accent);
  color: #fff;
}

/* カードテキスト編集行 */
.mae-text-row {
  flex-shrink: 0; padding: 6px 12px;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-surface2);
}
.mae-card-text-input {
  width: 100%; box-sizing: border-box;
  padding: 6px 10px; border-radius: 6px;
  border: 1px solid var(--c-border); background: var(--c-surface);
  color: var(--c-text); font-size: 12.5px; font-family: inherit;
  outline: none; transition: border-color 0.15s;
}
.mae-card-text-input:focus { border-color: var(--c-accent); }
.mae-card-text-input::placeholder { color: var(--c-text-mute); }

/* Canvas 表示エリア (v1.73.11: テーマ別背景) */
.man-canvas-area {
  flex: 1; position: relative; display: flex;
  align-items: center; justify-content: center;
  overflow: hidden; background: #111; min-height: 0;
}
body.theme-light .man-canvas-area { background: #e9eaee; }
body.theme-warm  .man-canvas-area { background: #F0EBE5; }
#mae-canvas {
  display: block; max-width: 100%; max-height: 100%;
  width: auto; height: auto; object-fit: contain;
}
.mae-canvas-placeholder {
  position: absolute; inset: 0; pointer-events: none;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px;
  font-size: 12px; color: var(--c-text-mute); line-height: 1.7;
  text-align: center;
}

/* 送信バー */
.man-card-actions {
  flex-shrink: 0; padding: 8px 12px;
  border-top: 1px solid var(--c-border);
  background: var(--c-surface2);
}
.man-card-send-btn {
  width: 100%; display: flex; align-items: center;
  justify-content: center; gap: 7px;
  padding: 9px 0; border-radius: 8px; border: none;
  background: #06C755; color: #fff;
  font-size: 13px; font-weight: 700;
  cursor: pointer; font-family: inherit; transition: opacity 0.13s;
}
.man-card-send-btn:hover { opacity: 0.86; }

/* ─ 写真ストリップ（上段） ─ */
.man-photo-strip {
  flex-shrink: 0; height: 130px; display: flex; flex-direction: column;
  background: var(--c-surface2); border-bottom: 1px solid var(--c-border);
}
.man-photo-strip-hd {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  padding: 6px 12px 4px; font-size: 11.5px; font-weight: 700;
  color: var(--c-text-sub);
}
.man-photos-mock-note {
  display: flex; align-items: center; gap: 3px;
  font-size: 10px; color: var(--c-text-mute); font-weight: 400;
}
.man-photo-strip-body {
  flex: 1; overflow: hidden; position: relative;
}
.man-photos-empty {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  font-size: 11.5px; color: var(--c-text-mute);
}
/* strip モードでグリッドを横スクロール1行に */
.man-photo-strip-body .man-photos-grid {
  display: flex !important; flex-direction: row;
  overflow-x: auto; overflow-y: hidden;
  gap: 6px; padding: 4px 10px 6px;
  height: 100%; align-items: center;
  scrollbar-width: thin;
}
.man-photo-strip-body .man-photo-thumb {
  width: 76px; height: 76px; flex-shrink: 0;
}

/* ─ 右: LINE チャットペイン ─ */
.man-chat-pane {
  width: 272px; flex-shrink: 0; display: flex; flex-direction: column;
  overflow: hidden;
}
.man-chat-empty {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px; font-size: 12px; color: var(--c-text-mute);
  text-align: center;
}
.man-chat-conv {
  flex: 1; display: flex; flex-direction: column; overflow: hidden;
}
.man-chat-hd {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  padding: 10px 12px 9px; border-bottom: 1px solid var(--c-border);
  background: var(--c-surface2); font-size: 12.5px; font-weight: 700;
  color: var(--c-text);
}
.man-chat-body {
  flex: 1; overflow-y: auto; padding: 12px 10px; display: flex;
  flex-direction: column; gap: 8px;
}
.man-chat-ft {
  flex-shrink: 0; display: flex; gap: 6px;
  padding: 8px 10px; border-top: 1px solid var(--c-border);
  background: var(--c-surface2); align-items: flex-end;
}
.man-chat-input {
  flex: 1; padding: 7px 9px; border-radius: 8px;
  border: 1px solid var(--c-border); background: var(--c-surface);
  font-size: 12px; color: var(--c-text); font-family: inherit;
  resize: none; outline: none; line-height: 1.5;
}
.man-chat-input:focus { border-color: var(--c-accent); }
.man-chat-send-btn {
  flex-shrink: 0; padding: 7px 12px; border-radius: 8px; border: none;
  background: var(--c-accent); color: #fff;
  font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.man-chat-send-btn:hover { opacity: 0.86; }
/* チャットバブル（右ペイン流用） */
.man-chat-bubble-wrap {
  display: flex; flex-direction: column;
}
.man-chat-bubble-wrap.out { align-items: flex-end; }
.man-chat-bubble {
  max-width: 86%; padding: 7px 10px; border-radius: 12px;
  font-size: 12px; line-height: 1.55; word-break: break-word;
  background: var(--c-surface-2); color: var(--c-text);
}
.man-chat-bubble-wrap.out .man-chat-bubble {
  background: rgba(57,189,248,0.16); color: var(--c-text);
}
.man-chat-bubble-time {
  font-size: 10px; color: var(--c-text-mute);
  margin-top: 2px; padding: 0 2px;
}

/* ================================================================
   StateMessages — 紐付けエリア (mla-*) + 撮影通知パネル (mno-*)  v1.22.0
   ================================================================ */

/* ── 紐付けエリア コンテナ ── */
.msg-link-area {
  flex-shrink: 0;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-surface-2);
}

/* 未連携バナー */
.mla-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: rgba(255, 165, 50, 0.08);
  border-left: 3px solid #f5a623;
}
.mla-banner-icon {
  flex-shrink: 0;
  color: #f5a623;
  display: flex;
  align-items: center;
}
.mla-banner-text {
  flex: 1;
  font-size: 12px;
  color: var(--c-text-sub);
  line-height: 1.4;
}
.mla-banner-text strong {
  display: block;
  font-size: 12px;
  color: var(--c-text);
  font-weight: 600;
  margin-bottom: 1px;
}
.mla-banner-btn {
  flex-shrink: 0;
  padding: 5px 11px;
  background: #f5a623;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.mla-banner-btn:hover { opacity: 0.86; }

/* インライン検索パネル */
.mla-search-panel {
  padding: 8px 14px 10px;
}
.mla-search-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 6px;
}
.mla-search-input {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  font-size: 12px;
  background: var(--c-surface);
  color: var(--c-text);
  font-family: inherit;
  outline: none;
}
.mla-search-input:focus { border-color: var(--c-accent); }
.mla-search-cancel {
  padding: 5px 10px;
  background: none;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  font-size: 11px;
  color: var(--c-text-sub);
  cursor: pointer;
  font-family: inherit;
}
.mla-search-cancel:hover { background: var(--c-surface-2); }
.mla-results {
  max-height: 140px;
  overflow-y: auto;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background: var(--c-surface);
}
.mla-result-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  cursor: pointer;
  border-bottom: 1px solid var(--c-border);
  transition: background 0.12s;
}
.mla-result-item:last-child { border-bottom: none; }
.mla-result-item:hover { background: var(--c-surface-2); }
.mla-result-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--c-surface-2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: hidden;
  font-size: 11px; color: var(--c-text-sub);
}
.mla-result-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mla-result-name {
  flex: 1;
  font-size: 12px;
  color: var(--c-text);
  font-weight: 500;
}
.mla-result-sub {
  font-size: 10px;
  color: var(--c-text-mute);
}
.mla-result-divider {
  padding: 4px 10px 2px;
  font-size: 10px;
  color: var(--c-text-mute);
  background: var(--c-surface-2);
  border-bottom: 1px solid var(--c-border);
}
.mla-new-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  cursor: pointer;
  color: var(--c-accent);
  font-size: 12px;
  font-weight: 500;
}
.mla-new-item:hover { background: var(--c-surface-2); }

/* 連携済みカード */
.mla-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
}
.mla-card-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--c-surface-2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: hidden;
  color: var(--c-text-sub);
}
.mla-card-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mla-card-info {
  flex: 1;
  min-width: 0;
}
.mla-card-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-text);
}
.mla-card-project {
  font-size: 11px;
  color: var(--c-text-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mla-card-unlink {
  padding: 4px 9px;
  background: none;
  border: 1px solid var(--c-border);
  border-radius: 5px;
  font-size: 10px;
  color: var(--c-text-mute);
  cursor: pointer;
  font-family: inherit;
}
.mla-card-unlink:hover { color: #e05555; border-color: #e05555; }
.mla-linked-badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 6px;
  background: rgba(57, 189, 248, 0.12);
  border-radius: 4px;
  font-size: 10px;
  color: var(--c-accent);
  font-weight: 600;
}
/* v1.71: 検索結果グループ見出し */
.mla-result-group {
  padding: 5px 10px 4px;
  font-size: 10px;
  font-weight: 700;
  color: var(--c-text-mute);
  background: var(--c-surface-2);
  border-bottom: 1px solid var(--c-border);
  letter-spacing: 0.04em;
}
/* v1.71: タイプ別バッジ (顧客/スタッフ/外注) */
.mla-result-typebadge {
  display: inline-flex; align-items: center;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  flex-shrink: 0;
}
.mla-type-customer   { background: rgba(57,189,248,0.14);  color: var(--c-blue, #39BDF8); }
.mla-type-staff      { background: rgba(168,139,250,0.16); color: var(--c-purple, #A78BFA); }
.mla-type-outsourcer { background: rgba(244,114,182,0.16); color: var(--c-pink, #F472B6); }
body.theme-warm .mla-type-customer   { background: #F0F7FA; color: #4A8C9E; }
body.theme-warm .mla-type-staff      { background: rgba(224,122,95,0.12); color: #D06A50; }
body.theme-warm .mla-type-outsourcer { background: #FFF4F0; color: #D06A50; }
body.theme-light .mla-type-customer   { background: rgba(2,132,199,0.10); color: #0284c7; }
body.theme-light .mla-type-staff      { background: rgba(168,139,250,0.14); color: #7c3aed; }
body.theme-light .mla-type-outsourcer { background: rgba(244,114,182,0.14); color: #db2777; }

/* スレッドリストの未連携バッジ */
.msg-unlinked-badge {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #f5a623;
  margin-left: 4px;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ================================================================
   撮影通知 2ペイン (mno-*)  v1.22.0
   ================================================================ */

/* ラッパー: 受信トレイと同じ 2ペイン構造 */
.msg-notify-wrap {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* テンプレートエリア */
.mno-tpl-area {
  flex-shrink: 0;
  border-bottom: 1px solid var(--c-border);
}
.mno-tpl-banner {
  padding: 10px 14px;
  background: rgba(6, 199, 85, 0.06);
  border-left: 3px solid #06C755;
}
.mno-tpl-banner.sent {
  background: rgba(57, 189, 248, 0.05);
  border-left-color: var(--c-border);
  opacity: 0.72;
}
.mno-tpl-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.mno-tpl-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: #06C755;
}
.mno-tpl-banner.sent .mno-tpl-label { color: var(--c-text-sub); }
.mno-tpl-setting-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 1px solid var(--c-border);
  border-radius: 5px;
  padding: 3px 8px;
  font-size: 10px;
  color: var(--c-text-mute);
  cursor: pointer;
  font-family: inherit;
}
.mno-tpl-setting-btn:hover { color: var(--c-text); }
.mno-tpl-input {
  width: 100%;
  min-height: 68px;
  padding: 7px 9px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  font-size: 12px;
  font-family: inherit;
  background: var(--c-surface);
  color: var(--c-text);
  resize: vertical;
  outline: none;
  line-height: 1.55;
  box-sizing: border-box;
}
.mno-tpl-input:focus { border-color: #06C755; }
.mno-tpl-sent-text {
  font-size: 12px;
  color: var(--c-text-sub);
  line-height: 1.55;
  padding: 2px 0;
}
.mno-tpl-ft {
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
}
.mno-tpl-send-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  background: #06C755;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.mno-tpl-send-btn:hover { opacity: 0.86; }

/* スレッドリスト内 送信ステータスバッジ */
.mno-pending-mark {
  font-size: 10px; color: #06C755; font-weight: 600; flex-shrink: 0;
}
.mno-sent-mark {
  font-size: 10px; color: var(--c-text-mute); flex-shrink: 0;
}
.mno-noline-mark {
  font-size: 10px; color: #f5a623; flex-shrink: 0;
}

/* ================================================================
   撮影通知 設定ペイン (mno-settings-*)  v1.22.0
   ================================================================ */

/* サイドバーヘッダー 設定ボタン */
.mno-settings-btn {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 9px;
  background: none; border: 1px solid var(--c-border); border-radius: 5px;
  font-size: 11px; color: var(--c-text-sub); cursor: pointer; font-family: inherit;
  flex-shrink: 0;
}
.mno-settings-btn:hover { color: var(--c-text); background: var(--c-surface-2); }
.mno-settings-btn.active { color: var(--c-accent); border-color: var(--c-accent); background: rgba(57,189,248,0.08); }

/* 設定ペイン（右ペイン全体） */
.mno-settings-pane {
  flex: 1; display: flex; flex-direction: column; overflow: hidden;
}
.mno-settings-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--c-border); flex-shrink: 0;
  background: var(--c-surface);
}
.mno-settings-title {
  font-size: 13px; font-weight: 700; color: var(--c-text);
  display: flex; align-items: center; gap: 6px;
}
.mno-settings-close-btn {
  background: none; border: 1px solid var(--c-border); border-radius: 5px;
  padding: 4px 10px; font-size: 11px; color: var(--c-text-sub);
  cursor: pointer; font-family: inherit;
}
.mno-settings-close-btn:hover { color: var(--c-text); }

/* 条件リスト */
.mno-type-list { flex: 1; overflow-y: auto; }
.mno-type-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px; border-bottom: 1px solid var(--c-border);
}
.mno-type-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.mno-type-info { flex: 1; min-width: 0; }
.mno-type-label { font-size: 12px; font-weight: 600; color: var(--c-text); display: block; }
.mno-type-trigger { font-size: 11px; color: var(--c-text-mute); }
.mno-type-actions { display: flex; gap: 6px; }
.mno-type-edit-btn, .mno-type-del-btn {
  background: none; border: 1px solid var(--c-border); border-radius: 5px;
  padding: 4px 8px; cursor: pointer; color: var(--c-text-mute);
  display: flex; align-items: center;
}
.mno-type-edit-btn:hover { color: var(--c-accent); border-color: var(--c-accent); }
.mno-type-del-btn:hover { color: #e05555; border-color: #e05555; }

/* 追加ボタン */
.mno-add-type-btn {
  display: flex; align-items: center; gap: 6px; justify-content: center;
  margin: 10px 16px; padding: 8px 14px;
  background: rgba(57,189,248,0.07); border: 1px dashed var(--c-accent);
  border-radius: 8px; color: var(--c-accent);
  font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.mno-add-type-btn:hover { background: rgba(57,189,248,0.13); }
.mno-no-types { padding: 24px; text-align: center; font-size: 12px; color: var(--c-text-mute); }

/* 編集フォーム */
.mno-edit-form {
  flex: 1; overflow-y: auto; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 14px;
}
.mno-form-row { display: flex; flex-direction: column; gap: 5px; }
.mno-form-label { font-size: 11px; font-weight: 600; color: var(--c-text-sub); }
.mno-form-input {
  padding: 7px 10px; border: 1px solid var(--c-border); border-radius: 6px;
  font-size: 12px; font-family: inherit; background: var(--c-surface); color: var(--c-text); outline: none;
}
.mno-form-input:focus { border-color: var(--c-accent); }
.mno-form-select {
  padding: 7px 10px; border: 1px solid var(--c-border); border-radius: 6px;
  font-size: 12px; font-family: inherit; background: var(--c-surface); color: var(--c-text);
  outline: none; cursor: pointer;
}
.mno-trigger-row { display: flex; align-items: center; gap: 8px; }
.mno-days-input { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--c-text-sub); }
.mno-days-num { width: 54px; text-align: center; }
.mno-color-swatches { display: flex; gap: 8px; flex-wrap: wrap; padding: 2px 0; }
.mno-color-swatch {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer; outline: none;
  transition: transform 0.1s;
}
.mno-color-swatch.selected { border-color: var(--c-text); transform: scale(1.25); }
.mno-var-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.mno-var-chip {
  padding: 3px 8px; background: var(--c-surface-2);
  border: 1px solid var(--c-border); border-radius: 4px;
  font-size: 11px; color: var(--c-text-sub); cursor: pointer; font-family: monospace;
}
.mno-var-chip:hover { background: rgba(57,189,248,0.10); color: var(--c-accent); border-color: var(--c-accent); }
.mno-form-textarea {
  padding: 8px 10px; border: 1px solid var(--c-border); border-radius: 6px;
  font-size: 12px; font-family: inherit; background: var(--c-surface); color: var(--c-text);
  resize: vertical; min-height: 86px; outline: none; line-height: 1.55;
}
.mno-form-textarea:focus { border-color: var(--c-accent); }
.mno-form-actions { display: flex; gap: 8px; justify-content: flex-end; padding-top: 4px; }
.mno-form-cancel-btn {
  padding: 7px 14px; background: none; border: 1px solid var(--c-border);
  border-radius: 6px; font-size: 12px; color: var(--c-text-sub); cursor: pointer; font-family: inherit;
}
.mno-form-cancel-btn:hover { color: var(--c-text); }
.mno-form-save-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 7px 16px; background: var(--c-accent); color: #fff;
  border: none; border-radius: 6px; font-size: 12px; font-weight: 700;
  cursor: pointer; font-family: inherit;
}
.mno-form-save-btn:hover { opacity: 0.86; }

/* ================================================================
   受信トレイ 設定ペイン・文例ピッカー  v1.23.0
   ================================================================ */

/* サイドバーヘッダー 設定ボタン（受信トレイ用） */
.msg-settings-btn {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 9px;
  background: none; border: 1px solid var(--c-border); border-radius: 5px;
  font-size: 11px; color: var(--c-text-sub); cursor: pointer; font-family: inherit;
  flex-shrink: 0; white-space: nowrap;
}
.msg-settings-btn:hover { color: var(--c-text); background: var(--c-surface-2); }
.msg-settings-btn.active { color: var(--c-accent); border-color: var(--c-accent); background: rgba(57,189,248,0.08); }

/* 文例ボタン（入力行） */
.msg-tpl-btn {
  width: 36px; height: 36px; flex-shrink: 0;
  background: transparent; border: 1px solid var(--c-border);
  border-radius: 8px; cursor: pointer; color: var(--c-text-sub);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s; font-family: inherit;
}
.msg-tpl-btn:hover { border-color: var(--c-accent); color: var(--c-accent); background: var(--c-accent-dim); }
.msg-tpl-btn.active { border-color: var(--c-accent); color: var(--c-accent); background: rgba(57,189,248,0.12); }

/* テンプレートピッカー（入力エリアの上に展開） */
.msg-tpl-picker {
  border: 1px solid var(--c-border); border-radius: 8px;
  background: var(--c-surface); overflow-y: auto; max-height: 210px;
  margin-bottom: 6px;
  box-shadow: 0 -6px 20px rgba(0,0,0,0.10);
}
.msg-tpl-picker-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 12px; border-bottom: 1px solid var(--c-border);
  font-size: 11px; font-weight: 700; color: var(--c-text-sub);
}
.msg-tpl-picker-hd-close {
  background: none; border: none; cursor: pointer;
  color: var(--c-text-mute); font-size: 14px; line-height: 1;
  padding: 0 2px;
}
.msg-tpl-picker-hd-close:hover { color: var(--c-text); }
.msg-tpl-picker-item {
  display: flex; align-items: baseline; gap: 8px;
  padding: 9px 12px; cursor: pointer;
  border-bottom: 1px solid var(--c-border);
  transition: background 0.1s;
}
.msg-tpl-picker-item:last-child { border-bottom: none; }
.msg-tpl-picker-item:hover { background: var(--c-surface-2); }
.msg-tpl-picker-name {
  font-size: 12px; font-weight: 600; color: var(--c-text); white-space: nowrap; flex-shrink: 0;
}
.msg-tpl-picker-preview {
  font-size: 11px; color: var(--c-text-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.msg-tpl-picker-empty {
  padding: 18px 12px; text-align: center;
  font-size: 12px; color: var(--c-text-mute); line-height: 1.7;
}

/* ════════════════════════════════════════════════════════════
   LINE連携設定パネル (ms-line-*)  v1.26.0
   ════════════════════════════════════════════════════════════ */

/* ── モードバーの LINE設定ボタン ── */
.ms-line-btn {
  display: flex; align-items: center; gap: 5px;
  margin-left: auto;
  padding: 5px 10px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background: transparent;
  color: var(--c-text-mute);
  font-size: 12px; cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ms-line-btn:hover,
.ms-line-btn.active {
  background: var(--c-accent-soft, #eef5ff);
  color: var(--c-accent, #3b82f6);
  border-color: var(--c-accent, #3b82f6);
}
.ms-line-status-dot {
  display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: var(--c-text-mute);
  transition: background 0.2s;
}
.ms-line-status-dot.connected { background: #22c55e; }
.ms-line-status-dot.disconnected { background: #f59e0b; }

/* ── パネル本体 ── */
.ms-line-pane {
  position: absolute; top: 0; right: 0;
  width: 380px; max-width: 100%;
  height: 100%;
  background: var(--c-bg, #fff);
  border-left: 1px solid var(--c-border);
  box-shadow: -4px 0 18px rgba(0,0,0,.08);
  display: flex; flex-direction: column;
  z-index: 120;
  animation: msLinePaneIn 0.2s ease;
}
@keyframes msLinePaneIn {
  from { transform: translateX(20px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* ── ヘッダー ── */
.ms-line-pane-hd {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--c-border);
  flex-shrink: 0;
}
.ms-line-pane-title {
  font-size: 13px; font-weight: 700;
  color: var(--c-text);
}
.ms-line-status-badge {
  display: flex; align-items: center; gap: 5px;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  background: var(--c-bg-subtle, #f5f5f5);
  color: var(--c-text-mute);
}
.ms-line-dot {
  width: 6px; height: 6px;
  border-radius: 50%; background: var(--c-text-mute);
}
.ms-line-dot.connected    { background: #22c55e; }
.ms-line-dot.disconnected { background: #f59e0b; }
.ms-line-close {
  margin-left: auto;
  background: none; border: none; cursor: pointer;
  color: var(--c-text-mute); padding: 4px;
  border-radius: 4px; display: flex;
  transition: background 0.15s;
}
.ms-line-close:hover { background: var(--c-bg-subtle, #f0f0f0); }

/* ── スクロール可能ボディ ── */
.ms-line-pane-body {
  flex: 1; overflow-y: auto;
  padding: 16px;
  display: flex; flex-direction: column; gap: 0;
}

/* ── セクション見出し ── */
.ms-line-section-title {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700;
  color: var(--c-text-mute);
  letter-spacing: .04em; text-transform: uppercase;
  padding: 10px 0 6px;
}
.ms-line-divider {
  height: 1px; background: var(--c-border);
  margin: 12px 0;
}

/* ── フィールド ── */
.ms-line-field {
  display: flex; flex-direction: column; gap: 3px;
  margin-bottom: 12px;
}
.ms-line-label {
  font-size: 12px; font-weight: 600;
  color: var(--c-text);
}
.ms-line-label-hint {
  font-size: 10.5px; color: var(--c-text-mute); line-height: 1.5;
}
.ms-line-section { margin-bottom: 4px; }
.ms-line-section-label {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600;
  color: var(--c-text); margin-bottom: 5px;
}
.ms-line-hint {
  font-size: 10.5px; color: var(--c-accent, #3b82f6);
  font-weight: 400; margin-left: 2px;
}

/* ── Webhook URL 説明ブロック ── */
.ms-line-hint-block {
  margin-top: 6px; padding: 7px 10px;
  background: rgba(59,130,246,0.08); border-radius: 6px;
  border-left: 2px solid rgba(59,130,246,0.4);
  font-size: 11px; color: var(--c-text-sub); line-height: 1.6;
}
.ms-line-hint-block strong { color: var(--c-text); font-weight: 700; }

/* ── Webhook URL コピー行 ── */
.ms-line-copy-row {
  display: flex; gap: 6px; align-items: center;
}
.ms-line-input {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  font-size: 12px;
  background: var(--c-bg);
  color: var(--c-text);
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.ms-line-input:focus { border-color: var(--c-accent, #3b82f6); }
.ms-line-input[readonly] {
  background: var(--c-bg-subtle, #f7f7f7);
  color: var(--c-text-mute);
  cursor: text; user-select: all;
}
.ms-line-url { font-size: 11px; font-family: monospace; }
.ms-line-copy-btn {
  flex-shrink: 0;
  padding: 7px 9px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background: var(--c-bg);
  color: var(--c-text-mute);
  cursor: pointer; display: flex; align-items: center;
  transition: background 0.15s, color 0.15s;
}
.ms-line-copy-btn:hover { background: var(--c-accent-soft, #eef5ff); color: var(--c-accent, #3b82f6); }
.ms-line-copy-btn.copied { background: #dcfce7; color: #16a34a; border-color: #86efac; }

/* ── パスワード行（入力 + 表示ボタン） ── */
.ms-line-pw-row {
  display: flex; gap: 6px; align-items: center;
}
.ms-line-pw-row .ms-line-input { flex: 1; }
.ms-line-toggle-btn {
  flex-shrink: 0;
  padding: 7px 10px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background: var(--c-bg);
  color: var(--c-text-mute);
  font-size: 11px; cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.ms-line-toggle-btn:hover { background: var(--c-bg-subtle, #f0f0f0); }

/* ── フッター（保存ボタン） ── */
.ms-line-footer {
  margin-top: 8px;
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
}
.ms-line-save-msg {
  font-size: 12px; color: var(--c-text-mute);
  flex: 1;
}
.ms-line-save-msg.ok  { color: #16a34a; }
.ms-line-save-msg.err { color: #dc2626; }
.ms-line-save-btn {
  padding: 8px 18px;
  background: var(--c-accent, #3b82f6);
  color: #fff;
  border: none; border-radius: 7px;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.ms-line-save-btn:hover    { opacity: .88; }
.ms-line-save-btn:disabled { opacity: .5; cursor: default; }

/* ════════════════════════════════════════════════════════════
   予約管理 (res-*)  v1.27.0
   ════════════════════════════════════════════════════════════ */

.res-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  padding: 0;
}

/* ── ツールバー ── */
.res-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid var(--c-border);
  flex-shrink: 0;
  gap: 12px;
  flex-wrap: wrap;
}
.res-month-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.res-nav-btn {
  background: none;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  color: var(--c-text);
  font-size: 20px;
  line-height: 1;
  width: 30px;
  height: 30px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s;
}
.res-nav-btn:hover { background: var(--c-hover); }
.res-month-label {
  font-size: 16px;
  font-weight: 700;
  min-width: 120px;
  text-align: center;
  color: var(--c-text);
}
.res-today-btn {
  background: none;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  color: var(--c-text-sub);
  font-size: 12px;
  padding: 4px 10px;
  cursor: pointer;
  transition: background 0.1s;
}
.res-today-btn:hover { background: var(--c-hover); }
.res-toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.res-filter-status {
  font-size: 13px;
  padding: 5px 8px;
  height: 32px;
}

/* ── カレンダー本体 ── */
.res-calendar-wrap {
  flex: 1;
  overflow-y: auto;
  padding: 0 12px 12px;
}
.res-cal-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  padding: 8px 0 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--c-text-sub);
  border-bottom: 1px solid var(--c-border);
  position: sticky;
  top: 0;
  background: var(--c-bg);
  z-index: 1;
}
.res-cal-header span:first-child { color: #e06060; }
.res-cal-header span:last-child  { color: #4080d0; }

.res-calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  padding-top: 4px;
}
.res-day-cell {
  min-height: 80px;
  padding: 4px 5px;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.res-day-cell:hover { background: var(--c-hover); }
.res-day-cell.res-today .res-day-num {
  background: var(--c-accent, #3b82f6);
  color: #fff;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.res-day-cell.res-selected {
  background: var(--c-accent-mute, rgba(59,130,246,0.1));
  border-color: var(--c-accent, #3b82f6);
}
.res-day-cell.res-other-month .res-day-num {
  color: var(--c-text-mute);
}
.res-day-cell.res-sunday  .res-day-num { color: #e06060; }
.res-day-cell.res-saturday .res-day-num { color: #4080d0; }
.res-day-num {
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}
.res-dot-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}
.res-dot {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5;
}
.res-dot.res-status-pending   { background: rgba(251,146,60,0.18); color: #c2410c; }
.res-dot.res-status-confirmed { background: rgba(34,197,94,0.18);  color: #15803d; }
.res-dot.res-status-cancelled { background: rgba(148,163,184,0.15); color: var(--c-text-mute); text-decoration: line-through; }
.res-dot-more {
  font-size: 10px;
  color: var(--c-text-mute);
  padding-left: 5px;
}

/* ── 選択日詳細ペイン ── */
.res-day-panel {
  border-top: 1px solid var(--c-border);
  padding: 12px 20px;
  flex-shrink: 0;
  background: var(--c-bg-sub, var(--c-bg));
  max-height: 260px;
  overflow-y: auto;
}
.res-day-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.res-day-panel-header span {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-text);
}
.res-day-close-btn {
  background: none;
  border: none;
  color: var(--c-text-mute);
  font-size: 16px;
  cursor: pointer;
  padding: 0 4px;
}
.res-day-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}
.res-day-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--c-card, var(--c-bg));
  border: 1px solid var(--c-border);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s;
}
.res-day-item:hover { background: var(--c-hover); }
.res-day-item-time {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-text-sub);
  min-width: 48px;
}
.res-day-item-name {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text);
}
.res-day-item-type {
  font-size: 11px;
  color: var(--c-text-mute);
}
.res-status-badge {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 10px;
  font-weight: 600;
}
.res-status-badge.res-status-pending   { background: rgba(251,146,60,0.18); color: #c2410c; }
.res-status-badge.res-status-confirmed { background: rgba(34,197,94,0.18);  color: #15803d; }
.res-status-badge.res-status-cancelled { background: rgba(148,163,184,0.15); color: var(--c-text-mute); }
.res-day-new-btn {
  font-size: 12px;
  padding: 6px 14px;
}

/* ── 編集モーダル ── */
.res-modal-inner {
  width: 620px;
  max-width: 96vw;
  max-height: 90vh;
  overflow-y: auto;
}
.res-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 14px 0;
}
.res-form-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.res-form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 120px;
  flex: 1;
}
.res-form-group--wide { flex: 2; min-width: 160px; }
.res-form-group label {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-text-sub);
}
.res-form-group input,
.res-form-group select,
.res-form-group textarea {
  background: var(--c-input-bg, var(--c-bg-sub));
  border: 1px solid var(--c-border);
  border-radius: 7px;
  padding: 7px 10px;
  font-size: 13px;
  color: var(--c-text);
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
  width: 100%;
  box-sizing: border-box;
}
.res-form-group input:focus,
.res-form-group select:focus,
.res-form-group textarea:focus {
  border-color: var(--c-accent, #3b82f6);
}
.res-form-group textarea {
  resize: vertical;
  min-height: 64px;
}
.res-form-group .req { color: #e06060; }
.res-modal-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--c-border);
}
.res-btn-convert {
  background: var(--c-bg-sub);
  border: 1px solid var(--c-border);
  border-radius: 7px;
  color: var(--c-text);
  font-size: 13px;
  padding: 7px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background 0.12s;
}
.res-btn-convert:hover { background: var(--c-hover); }

/* ════════════════════════════════════════════════════════════
   カードUIリフレッシュ: 案件一覧・顧客管理・スタッフ  v1.28.0
   各ページのリスト行 → カードグリッドに変換
   ════════════════════════════════════════════════════════════ */

/* ── 共通カードスタイル ── */
.project-row,
.customer-row,
.staff-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 0 !important;
  border-bottom: none !important;
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  transition: box-shadow 0.2s, transform 0.15s !important;
  grid-template-columns: none !important;
}
.project-row:hover,
.customer-row:hover,
.staff-row:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.28) !important;
  transform: translateY(-1px) !important;
  background: var(--c-surface) !important;
}
.project-row.deleted,
.customer-row.deleted,
.staff-row.deleted {
  opacity: 0.48 !important;
  transform: none !important;
}

/* ── 案件一覧 ── */
#ap-list-wrap {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
#ap-list-header { display: none !important; }
#ap-project-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)) !important;
  gap: 12px !important;
  padding: 16px !important;
  overflow-y: auto !important;
  align-content: start !important;
}

/* カード内カラム: 撮影日 */
.project-row .col-date {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  padding: 12px 14px 10px !important;
  background: rgba(255,255,255,0.025) !important;
  border-bottom: 1px solid var(--c-border) !important;
  flex-direction: row !important;
}
.project-row .col-date .date-main { font-size: 15px !important; font-weight: 700 !important; }
.project-row .col-date .date-sub  { margin-top: 0 !important; font-size: 11px !important; color: var(--c-text-mute) !important; }

/* カード内カラム: 案件名・顧客名 */
.project-row .col-names {
  padding: 12px 14px 6px !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  min-width: 0 !important;
  justify-content: flex-start !important;
}
.project-row .proj-title { font-size: 14px !important; white-space: normal !important; line-height: 1.3 !important; }
.project-row .proj-cust  { margin-top: 0 !important; }

/* カード内カラム: カテゴリー */
.project-row .col-category { padding: 2px 14px 8px !important; }

/* カード内カラム: ステータス */
.project-row .col-status { padding: 0 14px 12px !important; }

/* カード内フッター: アクション */
.project-row .actions {
  padding: 10px 14px !important;
  border-top: 1px solid var(--c-border) !important;
  background: rgba(255,255,255,0.025) !important;
  display: flex !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}

/* ── 顧客管理 ── */
#cu-list-wrap {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
#cu-list-header { display: none !important; }
#cu-customer-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
  gap: 10px !important;
  padding: 16px !important;
  overflow-y: auto !important;
  align-content: start !important;
}

/* カード内: 顧客番号 */
.customer-row .customer-no {
  display: block !important;
  padding: 10px 14px 4px !important;
  font-size: 10px !important;
  color: var(--c-text-mute) !important;
  font-family: monospace !important;
  white-space: nowrap !important;
}
/* カード内: 顧客名 */
.customer-row .customer-names {
  padding: 2px 14px 10px !important;
  border-bottom: 1px solid var(--c-border) !important;
  min-width: 0 !important;
}
.customer-row .name1 { font-size: 15px !important; white-space: normal !important; overflow: visible !important; }
.customer-row .name2 { font-size: 12px !important; white-space: normal !important; overflow: visible !important; }

/* カード内: LINEバッジ */
.customer-row .line-badge {
  display: inline-block !important;
  margin: 8px 14px 0 !important;
  width: auto !important;
}
/* カード内: 最新案件 */
.customer-row .latest-info {
  padding: 4px 14px 10px !important;
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  flex: 1 !important;
}
.customer-row .latest-category { font-size: 11px !important; color: var(--c-text-sub) !important; }
.customer-row .latest-date     { font-size: 11px !important; color: var(--c-text-mute) !important; }
.customer-row .no-project      { font-size: 11px !important; color: var(--c-text-mute) !important; }

/* カード内フッター: アクション */
.customer-row .actions {
  padding: 10px 14px !important;
  border-top: 1px solid var(--c-border) !important;
  background: rgba(255,255,255,0.025) !important;
  display: flex !important;
  justify-content: flex-start !important;
  gap: 5px !important;
  flex-wrap: wrap !important;
}

/* ── スタッフ一覧 ── */
#sf-list-wrap {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
#sf-list-header { display: none !important; }
#sf-staff-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 10px !important;
  padding: 16px !important;
  overflow-y: auto !important;
  background: transparent !important;
  align-content: start !important;
}

/* カード内: 役割バッジ (first div child) */
.staff-row > div:first-child {
  padding: 10px 14px 8px !important;
  background: rgba(255,255,255,0.025) !important;
  border-bottom: 1px solid var(--c-border) !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
}
/* カード内: 氏名・アバター */
.staff-row .col-info {
  padding: 14px !important;
  align-items: flex-start !important;
  flex: 1 !important;
  gap: 10px !important;
}
.staff-row .avatar    { width: 40px !important; height: 40px !important; }
.staff-row .avatar-ph { width: 40px !important; height: 40px !important; }
.staff-row .st-name   { font-size: 14px !important; white-space: normal !important; overflow: visible !important; }

/* カード内: 権限バッジ */
.staff-row .col-perms { padding: 0 14px 12px !important; }

/* カード内フッター: アクション */
.staff-row .actions {
  padding: 10px 14px !important;
  border-top: 1px solid var(--c-border) !important;
  background: rgba(255,255,255,0.025) !important;
  display: flex !important;
  justify-content: flex-start !important;
  gap: 6px !important;
}

/* ── ボタンをカードコンテキスト用に少し大きく ── */
.project-row .btn-act,
.customer-row .btn-action,
.staff-row .btn-act {
  padding: 5px 13px !important;
  font-size: 11px !important;
}

/* ── モバイル: 1カラム ── */
@media (max-width: 600px) {
  #ap-project-list,
  #cu-customer-list,
  #sf-staff-list {
    grid-template-columns: 1fr !important;
    padding: 10px !important;
  }
}

/* ════════════════════════════════════════════════════════════
   共通サイドパネルフレームワーク (sp-*)  v1.29.0
   各ステートの編集モーダルをインラインサイドパネルに変換
   ════════════════════════════════════════════════════════════ */

/* ── レイアウト: 左リスト＋右詳細 ── */
.sp-layout {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;
}
.sp-list-pane {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ── 編集モーダル → サイドパネル変換 (共通) ── */
/* position:fixed のオーバーレイを解除してインライン右パネルにする */
#em-edit-modal,
#cu-edit-modal,
#sf-edit-modal,
#os-edit-modal,
#ps-edit-modal {
  position: static !important;
  inset: auto !important;
  background: transparent !important;
  z-index: auto !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  flex-direction: column !important;
  width: 0 !important;
  max-width: 0 !important;
  flex-shrink: 0 !important;
  border-left: none !important;
  overflow: hidden !important;
  transition: width 0.26s cubic-bezier(0.4,0,0.2,1),
              max-width 0.26s cubic-bezier(0.4,0,0.2,1),
              border-color 0.26s !important;
  display: flex !important;   /* 常に flex: 幅 0 で hidden */
}
#em-edit-modal.open,
#cu-edit-modal.open,
#sf-edit-modal.open,
#os-edit-modal.open,
#ps-edit-modal.open {
  width: 420px !important;
  max-width: 420px !important;
  border-left: 1px solid var(--c-border) !important;
}

/* ── モーダル内アプリ: フル高さ・角丸なし ── */
#em-edit-modal #em-app,
#cu-edit-modal #cu-app,
#sf-edit-modal .em-app,
#os-edit-modal .em-app,
#ps-edit-modal .em-app {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  flex: 1 !important;
}

/* ── ヘッダーのドラッグカーソルを無効化 ── */
#em-edit-modal #em-header,
#cu-edit-modal #cu-header {
  cursor: default !important;
}
#em-edit-modal #em-header:active,
#cu-edit-modal #cu-header:active {
  cursor: default !important;
}

/* ── ローディングオーバーレイの角丸も除去 ── */
#em-loading-overlay,
#cu-loading-overlay {
  border-radius: 0 !important;
}

/* ── スタッフ・外注先モーダルのヘッダーを適切なパディングに ── */
#sf-em-header,
#os-em-header {
  padding: 16px 20px 12px !important;
  border-bottom: 1px solid var(--c-border) !important;
  background: rgba(255,255,255,0.02) !important;
  cursor: default !important;
}

/* ── 設定: 左メニュー＋右コンテンツ ── */
.settings-sp-layout {
  display: flex;
  flex-direction: row;
  height: 100%;
  overflow: hidden;
}
.settings-sp-menu {
  width: 200px;
  flex-shrink: 0;
  border-right: 1px solid var(--c-border);
  padding: 16px 0;
  overflow-y: auto;
  background: rgba(255,255,255,0.015);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.settings-sp-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text-sub);
  cursor: pointer;
  border-radius: 0;
  transition: background 0.12s, color 0.12s;
  border: none;
  background: none;
  text-align: left;
  width: 100%;
}
.settings-sp-menu-item:hover {
  background: var(--c-hover);
  color: var(--c-text);
}
.settings-sp-menu-item.active {
  background: rgba(59,130,246,0.12);
  color: var(--c-accent, #3b82f6);
  font-weight: 600;
}
.settings-sp-content {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 24px 28px;
}
.settings-sp-section {
  display: none;
}
.settings-sp-section.active {
  display: block;
}

/* ── モバイル: サイドパネルをフルスクリーンオーバーレイに戻す ── */
@media (max-width: 700px) {
  #em-edit-modal.open,
  #cu-edit-modal.open,
  #sf-edit-modal.open,
  #os-edit-modal.open,
  #ps-edit-modal.open {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    background: var(--c-surface) !important;
    z-index: 9000 !important;
    border-left: none !important;
  }
  .settings-sp-menu { width: 160px; }
}

/* ════════════════════════════════════════════════════════════
   サイドパネル統合補完 CSS  v1.29.1
   各 wrap コンテナ内で sp-layout がフル高さを取れるよう調整
   ════════════════════════════════════════════════════════════ */

/* ── 各 wrap: padding 維持しつつ sp-layout にフル高さを渡す ── */
.projects-wrap .sp-layout,
.customers-wrap .sp-layout,
.staff-wrap .sp-layout,
.outsourcing-wrap .sp-layout,
.photosession-wrap .sp-layout {
  flex: 1 !important;
  min-height: 0 !important;
  height: auto !important;  /* flex: 1 で制御するため height: 100% を無効化 */
}

/* ── sp-list-pane: スクロール可能に ── */
.sp-list-pane {
  overflow-y: auto;
}

/* ── em-edit-modal が projects-wrap 内に来たため高さ調整 ── */
#state-projects #em-edit-modal {
  height: 100% !important;
  align-self: stretch !important;
  /* 常時表示: 画面サイズに合わせてフレキシブル */
  flex: 1 !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  border-left: 1px solid var(--c-border) !important;
}
#state-projects #em-edit-modal #em-app {
  height: 100% !important;
  max-height: 100% !important;
}
/* StateProjects: LINEパネルも常時表示 */
#state-projects #slp-em {
  width: 300px !important;
  flex: 0 0 300px !important;
  border-left: 1px solid var(--c-border) !important;
}
/* 未選択時: em-app・ローディングを隠してプレースホルダーを表示 */
#state-projects #em-edit-modal:not(.open) #em-loading-overlay,
#state-projects #em-edit-modal:not(.open) #em-app {
  display: none !important;
}
#em-edit-placeholder,
#cu-edit-placeholder,
#sf-edit-placeholder,
#os-edit-placeholder,
#ps-edit-placeholder,
#aq-edit-placeholder {
  display: none;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--c-text-mute);
  font-size: 13px;
}
#state-projects #em-edit-modal:not(.open) #em-edit-placeholder {
  display: flex !important;
}

/* ── StateCustomers: 常時3パネル表示 ── */
#state-customers #cu-edit-modal {
  height: 100% !important;
  align-self: stretch !important;
  max-width: none !important;
  border-left: 1px solid var(--c-border) !important;
}
#state-customers #cu-edit-modal #cu-app {
  height: 100% !important;
  max-height: 100% !important;
}
#state-customers #slp-cu {
  width: 300px !important;
  flex: 0 0 300px !important;
  border-left: 1px solid var(--c-border) !important;
}
#state-customers #cu-edit-modal:not(.open) #cu-app {
  display: none !important;
}
#state-customers #cu-edit-modal:not(.open) #cu-edit-placeholder {
  display: flex !important;
}

/* ── StateStaff: 常時3パネル表示 ── */
#state-staff #sf-edit-modal {
  height: 100% !important;
  align-self: stretch !important;
  max-width: none !important;
  border-left: 1px solid var(--c-border) !important;
}
#state-staff #slp-sf {
  width: 300px !important;
  flex: 0 0 300px !important;
  border-left: 1px solid var(--c-border) !important;
}
#state-staff #sf-edit-modal:not(.open) .em-app {
  display: none !important;
}
#state-staff #sf-edit-modal:not(.open) #sf-edit-placeholder {
  display: flex !important;
}

/* ── StateOutsourcing: 常時3パネル表示 ── */
#state-outsourcing #os-edit-modal {
  height: 100% !important;
  align-self: stretch !important;
  max-width: none !important;
  border-left: 1px solid var(--c-border) !important;
}
#state-outsourcing #slp-os {
  width: 300px !important;
  flex: 0 0 300px !important;
  border-left: 1px solid var(--c-border) !important;
}
#state-outsourcing #os-edit-modal:not(.open) .em-app {
  display: none !important;
}
#state-outsourcing #os-edit-modal:not(.open) #os-edit-placeholder {
  display: flex !important;
}

/* ── StatePhotoSession: 常時3パネル表示 ── */
#state-photosession #ps-edit-modal {
  display: flex !important;
  max-width: none !important;
  border-left: 1px solid var(--c-border) !important;
}
#state-photosession #ps-edit-modal:not(.open) .modal-inner {
  display: none !important;
}
#state-photosession #ps-edit-modal:not(.open) #ps-edit-placeholder {
  display: flex !important;
}
#state-photosession #ps-right-pane {
  display: flex !important;
}

/* ── StateSurvey: 常時3パネル表示 ── */
#state-survey #aq-edit-modal {
  display: flex !important;
  border-left: 1px solid var(--c-border) !important;
}
#state-survey #aq-edit-modal:not(.open) .modal-inner {
  display: none !important;
}
#state-survey #aq-edit-modal:not(.open) #aq-edit-placeholder {
  display: flex !important;
}
#state-survey #aq-right-pane {
  display: flex !important;
}

/* ── photosession の modal-inner をサイドパネル内でフル高さに ── */
#ps-edit-modal .modal-inner {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* ── 設定: settings-sp-layout がフル高さを占有 ── */
.settings-wrap .settings-sp-layout {
  flex: 1 !important;
  min-height: 0 !important;
}

/* ── 設定セクションコンテンツ: overflow-y スクロール ── */
.settings-sp-section.active {
  overflow-y: auto;
}

/* ════════════════════════════════════════════════
   sp-list-item  スレッド型リストアイテム (v1.30.0)
   全ステート（案件・顧客・スタッフ・外注・撮影会）共通
   ════════════════════════════════════════════════ */
.sp-list-pane {
  border-right: 1px solid var(--c-border);
  min-width: 0;
}
.sp-list-item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 14px; cursor: pointer;
  border-left: 3px solid transparent;
  border-bottom: 1px solid var(--c-border);
  transition: background 0.12s, border-color 0.12s;
}
.sp-list-item:hover { background: var(--c-hover); }
.sp-list-item.active {
  background: var(--c-active);
  border-left-color: var(--c-accent);
}
.sp-list-item.deleted { opacity: 0.5; }
.sli-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--c-surface-2); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: var(--c-text-sub);
  overflow: hidden;
}
.sli-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.sli-avatar-sq {
  width: 44px; height: 38px; border-radius: 6px;
  background: var(--c-surface-2); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.sli-avatar-sq img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.sli-body { flex: 1; min-width: 0; }
.sli-date {
  margin-bottom: 2px;
}
.sli-date-text {
  font-size: 10.5px; color: var(--c-text-mute); white-space: nowrap;
}
.sli-badge-col {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 3px; flex-shrink: 0;
}
.sli-top {
  display: flex; align-items: center; gap: 5px;
  margin-bottom: 3px; flex-wrap: nowrap;
}
.sli-name {
  font-size: 13px; font-weight: 600; color: var(--c-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1; min-width: 0;
}
.sli-time {
  font-size: 10px; color: var(--c-text-mute); flex-shrink: 0;
}
.sli-sub {
  display: flex; align-items: center; gap: 5px;
  font-size: 11.5px; color: var(--c-text-sub);
}
.sli-sub-text {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sli-badge {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 700; padding: 2px 6px; height: 18px;
  border-radius: 10px; flex-shrink: 0; white-space: nowrap;
  background: var(--c-surface-2); color: var(--c-text-sub);
  box-sizing: border-box;
}
.sli-badge-sm { font-size: 8px; padding: 2px 5px; }
/* ステータスバッジ色 */
.sli-st-打合済み, .sli-st-打合せ済み { background: var(--c-orange); color: #fff; }
.sli-st-撮影済み  { background: var(--c-blue);   color: #fff; }
.sli-st-納品済み  { background: var(--c-orange);  color: #fff; }
.sli-st-完了      { background: var(--c-green);   color: #fff; }
.sli-st-要対応    { background: var(--c-danger);  color: #fff; }
/* 支払いステータスバッジ色 */
.sli-pay-未払い             { background: var(--c-danger);  color: #fff; }
.sli-pay-ご予約金支払い済み  { background: var(--c-orange);  color: #fff; }
.sli-pay-支払い済み          { background: var(--c-green);   color: #fff; }
/* 役割・ジャンルバッジ */
.sli-role { background: var(--c-surface-2); color: var(--c-text-sub); }
.sli-line-ok { background: #06c755; color: #fff; }

/* ── 顧客詳細パネル 案件タブ ── */
#cu-pj-list-wrap { padding: 8px 0; }
#cu-pj-empty {
  padding: 24px 16px; text-align: center;
  font-size: 12px; color: var(--c-text-mute);
}
.cu-pj-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-bottom: 1px solid var(--c-border);
  cursor: pointer; transition: background .12s;
}
.cu-pj-row:hover { background: var(--c-hover); }
.cu-pj-main { flex: 1; min-width: 0; }
.cu-pj-top { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; flex-wrap: nowrap; }
.cu-pj-title { font-size: 13px; font-weight: 600; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.cu-pj-sub { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--c-text-sub); }
.cu-pj-cat { background: var(--c-surface-2); color: var(--c-text-sub); font-size: 10px; padding: 1px 6px; border-radius: 10px; flex-shrink: 0; }
.cu-pj-arrow { color: var(--c-text-mute); flex-shrink: 0; }

/* ステータス open/closed/draft */
.sli-ps-open   { background: var(--c-green);  color: #fff; }
.sli-ps-closed { background: var(--c-text-mute); color: #fff; }
.sli-ps-draft  { background: var(--c-surface-2); color: var(--c-text-sub); }
/* 削除ボタン（ホバーで表示） */
.sli-del-btn {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 5px; border: none;
  background: transparent; color: var(--c-text-mute);
  cursor: pointer; opacity: 0; transition: opacity 0.15s, background 0.15s, color 0.15s;
  padding: 0;
}
.sp-list-item:hover .sli-del-btn { opacity: 1; }
.sli-del-btn:hover { background: rgba(239,68,68,0.15); color: var(--c-danger); }
/* 空状態 */
.sp-list-pane .sli-empty {
  padding: 40px 20px; text-align: center;
  font-size: 13px; color: var(--c-text-mute);
}

/* ════════════════════════════════════════════════════════════
   v1.31.0  左ペイン400px固定 / 右パネル flex:1 / 配色刷新
   ════════════════════════════════════════════════════════════ */

/* ── 左ペイン: 400px 固定 ── */
.sp-list-pane {
  width: 400px !important;
  flex: 0 0 400px !important;
  background: #1e1e1e !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  border-right: 1px solid var(--c-border) !important;
}

/* ── 右パネル閉: width=0, flex:1 で開時に伸びる ── */
#em-edit-modal,
#cu-edit-modal,
#sf-edit-modal,
#os-edit-modal,
#ps-edit-modal {
  flex: 1 !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  overflow: hidden !important;
  transition: max-width 0.26s cubic-bezier(0.4,0,0.2,1),
              border-color 0.26s !important;
  position: static !important;
  inset: auto !important;
  background: transparent !important;
  z-index: auto !important;
  align-items: stretch !important;
  flex-direction: column !important;
  display: flex !important;
}

/* ── 右パネル開: max-width 解放 → flex:1 で残りを占有 ── */
#em-edit-modal.open,
#cu-edit-modal.open,
#sf-edit-modal.open,
#os-edit-modal.open,
#ps-edit-modal.open {
  max-width: 100vw !important;
  width: 0 !important;       /* width は 0 のまま; flex:1 が支配する */
  border-left: 1px solid var(--c-border) !important;
  overflow: hidden !important;
}


/* ── 右パネルアプリ本体: 暗め背景 ── */
#em-edit-modal #em-app,
#cu-edit-modal #cu-app,
#sf-edit-modal .em-app,
#os-edit-modal .em-app,
#ps-edit-modal .modal-inner {
  background: #0d0d0d !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* ── 右パネルヘッダー: 明るめ ── */
#em-edit-modal #em-header,
#cu-edit-modal #cu-header,
#sf-edit-modal #sf-em-header,
#os-edit-modal #os-em-header,
#ps-edit-modal #ps-em-header {
  background: #1e1e1e !important;
  cursor: default !important;
  border-bottom: 1px solid var(--c-border) !important;
  flex-shrink: 0 !important;
}
#em-edit-modal #em-header:active,
#cu-edit-modal #cu-header:active { cursor: default !important; }

/* ── 右パネルタブバー: 明るめ ── */
#em-edit-modal #em-tab-bar,
#cu-edit-modal #cu-tab-bar,
#ps-edit-modal #ps-em-tabs {
  background: #1a1a1a !important;
  border-bottom: 1px solid var(--c-border) !important;
}

/* ── 統一フィルターバー ── */
#ap-filter-bar,
#cu-filter-bar,
#sf-filter-bar,
#os-filter-bar,
#ps-toolbar {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  padding: 10px 12px 14px !important;
  border-bottom: 1px solid var(--c-border) !important;
  background: #252525 !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

/* 検索インプット: 全幅 */
#ap-search, #cu-search, #sf-search, #os-search {
  width: 100% !important;
  flex: 1 1 100% !important;
  background: #1a1a1a !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 7px !important;
  padding: 6px 10px !important;
  font-size: 12px !important;
  color: var(--c-text) !important;
  outline: none !important;
  order: -2 !important;
}
#ap-search:focus, #cu-search:focus,
#sf-search:focus, #os-search:focus {
  border-color: var(--c-accent) !important;
}

/* サマリーバー */
#ap-summary-bar, #cu-summary-bar, #sf-summary-bar, #os-summary-bar {
  padding: 4px 14px 18px !important;
  font-size: 11px !important;
  color: var(--c-text-mute) !important;
  border-bottom: 1px solid var(--c-border) !important;
  flex-shrink: 0 !important;
  background: #1e1e1e !important;
}

/* フィルタースセレクト */
#ap-filter-bar .filter-select,
#cu-filter-bar .filter-select,
#sf-filter-role,
#os-filter-field {
  background: #1a1a1a !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 7px !important;
  padding: 4px 8px !important;
  font-size: 11px !important;
  color: var(--c-text-sub) !important;
  cursor: pointer !important;
}

/* 新規ボタン: アクセントグリーン */
#ap-btn-new,
#cu-btn-new,
#sf-btn-new,
#os-btn-new,
#ps-btnNew,
#ps-btnNewEmpty {
  background: var(--c-green-18) !important;
  color: var(--c-green) !important;
  border: 1px solid var(--c-green-72) !important;
  border-radius: 7px !important;
  padding: 5px 10px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  order: -1 !important;
  margin-left: auto !important;
}
#ap-btn-new:hover,
#cu-btn-new:hover,
#sf-btn-new:hover,
#os-btn-new:hover,
#ps-btnNew:hover { background: rgba(12,199,85,0.28) !important; }

/* 削除済み・一括削除トグルボタン */
#ap-btn-done-toggle,
#ap-btn-deleted-toggle,
#ap-btn-bulk-delete,
#cu-btn-deleted-toggle,
#cu-btn-bulk-delete,
#sf-btn-deleted-toggle,
#sf-btn-bulk-delete,
#os-btn-deleted-toggle,
#os-btn-bulk-delete {
  background: transparent !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 7px !important;
  padding: 4px 8px !important;
  font-size: 11px !important;
  color: var(--c-text-mute) !important;
  cursor: pointer !important;
}
#ap-btn-bulk-delete, #cu-btn-bulk-delete,
#sf-btn-bulk-delete, #os-btn-bulk-delete {
  display: none;
}
#ap-btn-done-toggle:hover,
#ap-btn-deleted-toggle:hover,
#cu-btn-deleted-toggle:hover,
#sf-btn-deleted-toggle:hover,
#os-btn-deleted-toggle:hover {
  color: var(--c-text) !important;
  border-color: var(--c-text-sub) !important;
}
#ap-btn-done-toggle.active,
#ap-btn-deleted-toggle.active,
#cu-btn-deleted-toggle.active,
#sf-btn-deleted-toggle.active,
#os-btn-deleted-toggle.active {
  color: var(--c-accent) !important;
  border-color: var(--c-accent) !important;
  background: var(--c-accent-dim) !important;
}

/* ローディング・空状態 */
#ap-loading-state, #ap-empty-state,
#cu-loading-state, #cu-empty-state,
#sf-loading-state, #sf-empty-state,
#os-loading-state, #os-empty-state,
#ps-empty {
  padding: 32px 20px !important;
  text-align: center !important;
  font-size: 13px !important;
  color: var(--c-text-mute) !important;
}

/* カラムヘッダー非表示 */
#ap-list-header,
#cu-list-header,
#sf-list-header,
#os-list-header { display: none !important; }

/* リストラッパー */
#ap-list-wrap,
#cu-list-wrap,
#sf-list-wrap,
#os-list-wrap {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  overflow-y: auto !important;
}
#ap-project-list,
#cu-customer-list,
#sf-staff-list,
#os-outsourcer-list,
#ps-cards {
  flex: 1 !important;
  overflow-y: auto !important;
}

/* ── 行ミニアクションボタン ── */
.sli-actions {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s;
}
.sp-list-item:hover .sli-actions { opacity: 1; }
.sli-act-btn {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 6px; border: none;
  background: transparent; color: var(--c-text-mute);
  cursor: pointer; padding: 0;
  transition: background 0.13s, color 0.13s;
}
.sli-act-btn:hover { background: var(--c-surface-2); color: var(--c-text); }
.sli-act-btn.danger:hover { background: rgba(239,68,68,0.15); color: var(--c-danger); }
.sli-act-btn.restore:hover { background: var(--c-green-18); color: var(--c-green); }

/* ps-toolbar h1 サイズ調整 */
#ps-toolbar h1 {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--c-text) !important;
  margin: 0 !important;
}

/* ps-content: スクロール */
#ps-content {
  flex: 1 !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
}

/* ════════════════════════════════════════════════════════════
   v1.31.1  wrap の padding 除去 → sp-layout をエッジまで拡張
            配色を StateMessages (msg-sidebar) に揃える
   ════════════════════════════════════════════════════════════ */

/* wrap コンテナのパディング除去 */
.projects-wrap,
.customers-wrap,
.staff-wrap,
.outsourcing-wrap,
.photosession-wrap {
  padding: 0 !important;
  gap: 0 !important;
}

/* 左ペイン配色: StateMessages sidebar と同じ */
.sp-list-pane {
  background: var(--c-surface2) !important;   /* #181818 */
}

/* フィルターバー: msg-sidebar-hd と同トーン */
#ap-filter-bar,
#cu-filter-bar,
#sf-filter-bar,
#os-filter-bar {
  background: #1e1e1e !important;
  margin-bottom: 0 !important;
  margin: 0 !important;
}

/* サマリーバー */
#ap-summary-bar, #cu-summary-bar,
#sf-summary-bar, #os-summary-bar {
  background: #181818 !important;
  padding: 5px 14px 18px !important;
}

/* リストラッパー: 背景を左ペインと統一 */
#ap-list-wrap,
#cu-list-wrap,
#sf-list-wrap,
#os-list-wrap,
#ps-content {
  background: var(--c-surface2) !important;
}

/* ローディング・空状態 */
#ap-loading-state, #ap-empty-state,
#cu-loading-state, #cu-empty-state,
#sf-loading-state, #sf-empty-state,
#os-loading-state, #os-empty-state,
#ps-empty {
  background: var(--c-surface2) !important;
}

/* 行のボーダー色をより暗く（surface2 上では明るすぎる） */
.sp-list-item {
  border-bottom-color: rgba(255,255,255,0.06) !important;
}
.sp-list-item:hover {
  background: rgba(255,255,255,0.04) !important;
}
.sp-list-item.active {
  background: rgba(57,189,248,0.09) !important;
  border-left-color: var(--c-accent) !important;
}

/* 右パネル: msg の detail ペインと同じ暗さ */
#em-edit-modal #em-app,
#cu-edit-modal #cu-app,
#sf-edit-modal .em-app,
#os-edit-modal .em-app,
#ps-edit-modal .modal-inner {
  background: #0a0a0a !important;
}

/* 右パネルヘッダー: msg-detail-hd と同トーン */
#em-edit-modal #em-header,
#cu-edit-modal #cu-header,
#sf-edit-modal #sf-em-header,
#os-edit-modal #os-em-header,
#ps-edit-modal #ps-em-header {
  background: #1e1e1e !important;
}

/* 右パネルのフォーム背景 */
#em-edit-modal #em-form-wrap,
#cu-edit-modal #cu-form-wrap {
  background: #0a0a0a !important;
}

/* sp-list-pane の scroll bar を細く */
.sp-list-pane::-webkit-scrollbar { width: 3px; }
.sp-list-pane::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; }

/* ps-toolbar の高さを左パネルに合わせる */
#ps-toolbar {
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  min-height: auto !important;
}

/* ════════════════════════════════════════════════════════════
   v1.31.2  左300px・ステートタイトル・アクティブ色統一
            ミニアクションボタンをホバー表示・ローディング除去
   ════════════════════════════════════════════════════════════ */

/* 左ペイン幅を 400→300px に変更 */
.sp-list-pane {
  width: 300px !important;
  flex: 0 0 300px !important;
}

/* ── ステートタイトルバー（StateMessages の msg-sidebar-hd に相当） ── */
.sp-state-title {
  padding: 14px 14px 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--c-text);
  border-bottom: 1px solid var(--c-border);
  flex-shrink: 0;
  background: var(--c-surface2);
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.01em;
}

/* ── アクティブ・ホバーを msg-thread-item と完全統一 ── */
.sp-list-item:hover {
  background: var(--c-hover) !important;
}
.sp-list-item.active {
  background: var(--c-active) !important;
  border-left-color: var(--c-accent) !important;
}

/* ── ミニアクションボタン: 非ホバー時は非表示 ── */
.sli-actions {
  opacity: 0 !important;
  transition: opacity 0.13s !important;
  flex-shrink: 0 !important;
}
.sp-list-item:hover .sli-actions {
  opacity: 1 !important;
}

/* ── ローディングオーバーレイをサイドパネルモードで完全非表示 ── */
#em-loading-overlay,
#cu-loading-overlay {
  display: none !important;
}

/* ════════════════════════════════════════════════════════════
   v1.31.3  sp-top-bar: タイトル＋フィルターを両パネル貫通ヘッダーに
   ════════════════════════════════════════════════════════════ */

/* ── sp-top-bar: 両パネルを横断する最上部バー ── */
.sp-top-bar {
  flex-shrink: 0 !important;
  background: var(--c-surface2) !important;
  border-bottom: 1px solid var(--c-border) !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
}

/* ── タイトル行 ── */
.sp-bar-title {
  padding: 12px 16px 8px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--c-text) !important;
  flex-shrink: 0 !important;
}

/* ── フィルターバーを top-bar 内用に上書き ── */
#ap-filter-bar,
#cu-filter-bar,
#sf-filter-bar,
#os-filter-bar {
  background: transparent !important;
  margin: 0 !important;
  border-bottom: none !important;
  padding: 0 12px 10px !important;
}

/* サマリーバーは top-bar 内で区切り線を消す */
#ap-summary-bar,
#cu-summary-bar,
#sf-summary-bar,
#os-summary-bar {
  border-top: 1px solid var(--c-border) !important;
  border-bottom: none !important;
  margin: 0 !important;
  padding: 4px 14px 18px !important;
  background: transparent !important;
}

/* sp-layout: top-bar の下で残りの高さを占有 */
.projects-wrap .sp-layout,
.customers-wrap .sp-layout,
.staff-wrap .sp-layout,
.outsourcing-wrap .sp-layout,
.photosession-wrap .sp-layout {
  flex: 1 !important;
  min-height: 0 !important;
  height: auto !important;
}

/* sp-list-pane: top-bar が上にある分、border-top 不要 */
.sp-list-pane {
  border-top: none !important;
}

/* ps-toolbar を sp-top-bar として上書き整合 */
#ps-toolbar {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 16px 10px !important;
  gap: 8px !important;
  border-bottom: 1px solid var(--c-border) !important;
  min-height: auto !important;
}
#ps-toolbar h1 { display: none !important; } /* sp-bar-title に置き換え済み */

/* ════════════════════════════════════════════════════════════
   v1.31.3b  リストラップのカードスタイルを除去 → 幅いっぱいに拡張
   ════════════════════════════════════════════════════════════ */

/* リストコンテナのカード外観を除去 */
.sp-list-pane #ap-list-wrap,
.sp-list-pane #cu-list-wrap,
.sp-list-pane #sf-list-wrap,
.sp-list-pane #os-list-wrap,
.sp-list-pane #ps-content {
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  overflow: visible !important;
  flex-shrink: 0 !important;
  flex: unset !important;
  width: 100% !important;
}

/* 内側リスト: 独立スクロールを解除 → sp-list-pane がスクロール担う */
.sp-list-pane #ap-project-list,
.sp-list-pane #cu-customer-list,
.sp-list-pane #sf-staff-list,
.sp-list-pane #os-outsourcer-list,
.sp-list-pane #ps-cards {
  overflow-y: visible !important;
  min-height: 0 !important;
  flex: unset !important;
  width: 100% !important;
}

/* sp-list-pane を唯一のスクロールコンテナに */
.sp-list-pane {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* ════════════════════════════════════════════════════════════
   v1.31.5  右パネルタイトル非表示 / ap-list-controls スタイル
   ════════════════════════════════════════════════════════════ */

/* 右詳細パネルのタイトル行を非表示 */
#em-edit-modal #em-header,
#cu-edit-modal #cu-header {
  display: none !important;
}

/* ap-list-controls: サマリー + トグルボタン行 */
#ap-list-controls {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 5px 10px 14px !important;
  background: var(--c-surface2) !important;
  border-bottom: 1px solid var(--c-border) !important;
  flex-shrink: 0 !important;
  flex-wrap: wrap !important;
}
#ap-list-controls #ap-summary-bar {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  font-size: 11px !important;
  color: var(--c-text-mute) !important;
  flex: 1 !important;
  white-space: nowrap !important;
}
#ap-list-controls #ap-btn-done-toggle,
#ap-list-controls #ap-btn-deleted-toggle {
  order: unset !important;
  margin-left: 0 !important;
  font-size: 11px !important;
  padding: 3px 7px !important;
}
#ap-list-controls #ap-btn-bulk-delete {
  font-size: 11px !important;
  padding: 3px 7px !important;
}

/* ════════════════════════════════════════════════════════════
   v1.31.6  リストラップ・内側リスト 完全フラット化（末尾配置で確実に上書き）
   ════════════════════════════════════════════════════════════ */

/* ── リストラップ: カード外観を完全除去 ── */
#ap-list-wrap,
#cu-list-wrap,
#sf-list-wrap,
#os-list-wrap {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  overflow: visible !important;
  flex: none !important;
  min-height: 0 !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ── 内側リスト: スクロール・グリッドを解除して block 積み ── */
#ap-project-list,
#cu-customer-list,
#os-outsourcer-list {
  display: block !important;
  overflow-y: visible !important;
  flex: none !important;
  width: 100% !important;
  padding: 0 !important;
  gap: unset !important;
}

/* スタッフ一覧: v1.30.0 で grid に変更されていたのをリセット */
#sf-staff-list {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: unset !important;
  overflow-y: visible !important;
  flex: none !important;
  width: 100% !important;
  padding: 0 !important;
  gap: 0 !important;
  align-content: unset !important;
}

/* sp-list-item に幅を明示 */
.sp-list-item {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ════════════════════════════════════════════════════════════
   v1.31.7  フィルターバー左揃え・高さ統一 / 全ステート list-controls 追加
   ════════════════════════════════════════════════════════════ */

/* ── 新規ボタン: margin-left:auto / order:-1 を解除して左揃え ── */
#ap-btn-new,
#cu-btn-new,
#sf-btn-new,
#os-btn-new {
  margin-left: 0 !important;
  order: unset !important;
}

/* ── フィルターバー内の全要素を高さ統一（30px） ── */
#ap-filter-bar .filter-select,
#cu-filter-bar .filter-select,
#sf-filter-role,
#os-filter-field {
  height: 30px !important;
  box-sizing: border-box !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
#ap-btn-new,
#cu-btn-new,
#sf-btn-new,
#os-btn-new {
  height: 30px !important;
  box-sizing: border-box !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* ── cu / sf / os list-controls (ap と同パターン) ── */
#cu-list-controls,
#sf-list-controls,
#os-list-controls {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 5px 10px 14px !important;
  background: var(--c-surface2) !important;
  border-bottom: 1px solid var(--c-border) !important;
  flex-shrink: 0 !important;
  flex-wrap: wrap !important;
}

/* サマリーバーを list-controls 内でリセット */
#cu-list-controls #cu-summary-bar,
#sf-list-controls #sf-summary-bar,
#os-list-controls #os-summary-bar {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  font-size: 11px !important;
  color: var(--c-text-mute) !important;
  flex: 1 !important;
  white-space: nowrap !important;
}

/* 削除済み・一括削除ボタンのサイズを list-controls 内で統一 */
#cu-list-controls #cu-btn-deleted-toggle,
#cu-list-controls #cu-btn-bulk-delete,
#sf-list-controls #sf-btn-deleted-toggle,
#sf-list-controls #sf-btn-bulk-delete,
#os-list-controls #os-btn-deleted-toggle,
#os-list-controls #os-btn-bulk-delete {
  order: unset !important;
  margin-left: 0 !important;
  font-size: 11px !important;
  padding: 3px 7px !important;
  flex: 1 !important;
}

/* ap の同ボタンも flex:1 で等幅に ── 3ボタン300px均等 */
#ap-list-controls #ap-btn-done-toggle,
#ap-list-controls #ap-btn-deleted-toggle,
#ap-list-controls #ap-btn-bulk-delete {
  flex: 1 !important;
}

/* サマリーバーは独立した行に（flex:0 0 100%） */
#ap-list-controls #ap-summary-bar,
#cu-list-controls #cu-summary-bar,
#sf-list-controls #sf-summary-bar,
#os-list-controls #os-summary-bar {
  flex: 0 0 100% !important;
  order: -1 !important;
}

/* ── list-controls のボタン: 複数のとき均等、1本のときは auto 幅 ── */
#cu-list-controls #cu-btn-deleted-toggle,
#cu-list-controls #cu-btn-bulk-delete,
#sf-list-controls #sf-btn-deleted-toggle,
#sf-list-controls #sf-btn-bulk-delete,
#os-list-controls #os-btn-deleted-toggle,
#os-list-controls #os-btn-bulk-delete {
  flex: 0 0 auto !important;
  min-width: 80px !important;
}

/* ── 撮影会: ps-filter-bar をアンケートと同スタイルに ── */
#ps-filter-bar {
  background: transparent !important;
  margin: 0 !important;
  border-bottom: none !important;
  padding: 0 12px 10px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  align-items: center !important;
}

/* ps-toolbar は列方向（sp-bar-title + ps-filter-bar を縦積み）に変更 */
#ps-toolbar {
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  gap: 0 !important;
}

/* ps-btnNew の order / margin をリセットして左揃え */
#ps-btnNew {
  order: 0 !important;
  margin-left: 0 !important;
  height: 30px !important;
  box-sizing: border-box !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* ════════════════════════════════════════════════════════════
   v1.31.9  sf/os ヘッダー制御（編集非表示・新規オレンジ）/ ps list-controls
   ════════════════════════════════════════════════════════════ */

/* ── スタッフ: 編集モードはヘッダー非表示 ── */
#sf-edit-modal[data-mode="edit"] #sf-em-header {
  display: none !important;
}

/* ── スタッフ: 新規モードはオレンジバナー ── */
#sf-edit-modal[data-mode="new"] #sf-em-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 20px !important;
  background: linear-gradient(135deg, rgba(251,146,60,0.22) 0%, rgba(234,88,12,0.14) 100%) !important;
  border-bottom: 2px solid rgba(251,146,60,0.5) !important;
  flex-shrink: 0 !important;
}
#sf-edit-modal[data-mode="new"] #sf-em-header-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #fb923c !important;
}
#sf-edit-modal[data-mode="new"] #sf-em-header-sub {
  font-size: 11px !important;
  color: rgba(251,146,60,0.7) !important;
  background: rgba(251,146,60,0.15) !important;
  border: 1px solid rgba(251,146,60,0.35) !important;
  border-radius: 20px !important;
  padding: 2px 8px !important;
}

/* ── 外注先: 編集モードはヘッダー非表示 ── */
#os-edit-modal[data-mode="edit"] #os-em-header {
  display: none !important;
}

/* ── 外注先: 新規モードはオレンジバナー ── */
#os-edit-modal[data-mode="new"] #os-em-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 20px !important;
  background: linear-gradient(135deg, rgba(251,146,60,0.22) 0%, rgba(234,88,12,0.14) 100%) !important;
  border-bottom: 2px solid rgba(251,146,60,0.5) !important;
  flex-shrink: 0 !important;
}
#os-edit-modal[data-mode="new"] #os-em-header-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #fb923c !important;
}
#os-edit-modal[data-mode="new"] #os-em-header-sub {
  font-size: 11px !important;
  color: rgba(251,146,60,0.7) !important;
  background: rgba(251,146,60,0.15) !important;
  border: 1px solid rgba(251,146,60,0.35) !important;
  border-radius: 20px !important;
  padding: 2px 8px !important;
}

/* ── 撮影会: ps-list-controls（他ステートの list-controls と同スタイル） ── */
#ps-list-controls {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 5px 10px !important;
  background: var(--c-surface2) !important;
  border-bottom: 1px solid var(--c-border) !important;
  flex-shrink: 0 !important;
  flex-wrap: wrap !important;
}
#ps-list-controls #ps-summary-bar {
  flex: 0 0 100% !important;
  order: -1 !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  font-size: 11px !important;
  color: var(--c-text-mute) !important;
  white-space: nowrap !important;
}

/* ════════════════════════════════════════════════════════════
   v1.32.0  撮影会フィルターバー完全統一（btn/btn-green クラスリセット）
   ════════════════════════════════════════════════════════════ */

/* ps-search: 他ステートの検索インプットと同スタイル */
#ps-search {
  width: 100% !important;
  flex: 1 1 100% !important;
  background: #1a1a1a !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 7px !important;
  padding: 6px 10px !important;
  font-size: 12px !important;
  color: var(--c-text) !important;
  outline: none !important;
  order: -2 !important;
}
#ps-search:focus {
  border-color: var(--c-accent) !important;
}

/* ps-btnNew: btn/btn-green クラスを完全上書きして ap-btn-new と同スタイルに */
#ps-btnNew {
  background: var(--c-green-18) !important;
  color: var(--c-green) !important;
  border: 1px solid var(--c-green-72) !important;
  border-radius: 7px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  order: 0 !important;
  margin-left: 0 !important;
  height: 30px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  font-family: inherit !important;
  /* btn-green の pill 形状をリセット */
  border-radius: 7px !important;
  opacity: 1 !important;
  transition: background 0.15s !important;
}
#ps-btnNew:hover {
  background: rgba(12,199,85,0.28) !important;
  opacity: 1 !important;
}

/* ════════════════════════════════════════════════════════════
   v1.32.1  ps-toolbar カード外観完全除去 / ps 右パネルヘッダー制御
   ════════════════════════════════════════════════════════════ */

/* ── ps-toolbar: 旧IIFE の border-radius / box-shadow / border / margin を全消去 ── */
#ps-toolbar {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
}

/* sp-bar-title の下線（他ステートと同様） */
#ps-toolbar .sp-bar-title {
  padding: 10px 16px 8px !important;
  border-bottom: none !important;
}

/* ps-filter-bar も border-radius / box-shadow 除去 */
#ps-filter-bar {
  border-radius: 0 !important;
  box-shadow: none !important;
  border-top: none !important;
}

/* photosession-wrap の padding 除去（他ステートの wrap と統一） */
.photosession-wrap {
  padding: 0 !important;
}

/* ── ps-new-banner: 新規モードのみ amber バナー（aq-new-banner と同仕様） ── */
#ps-new-banner {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: #201b12;
  border-bottom: 1px solid #453419;
  font-size: 12.5px;
  font-weight: 500;
  color: #c78b34;
  line-height: 1.4;
  flex-shrink: 0;
}
/* 新規モード: ps-new-banner 表示・ヘッダー非表示 */
#ps-edit-modal[data-mode="new"] #ps-new-banner {
  display: flex;
}
#ps-edit-modal[data-mode="new"] #ps-em-header {
  display: none !important;
}
#ps-em-header-title { font-size: 15px !important; font-weight: 700 !important; letter-spacing: 0.02em !important; }
#ps-em-header-sub   { font-size: 11px !important; opacity: 0.55 !important; margin-top: 3px !important; letter-spacing: 0.04em !important; }

/* ════════════════════════════════════════════════════════════
   v1.32.2  撮影会フィルターバー背景統一 / ステータス選択 / 削除済みボタン
   ════════════════════════════════════════════════════════════ */

/* ── ps-filter-bar: 他ステートと同じく transparent ── */
#ps-filter-bar {
  background: transparent !important;
  margin: 0 !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 12px 10px !important;
}

/* ── ps-toolbar: IIFE の card スタイルを完全リセット ── */
#ps-toolbar {
  background: var(--c-surface2) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  border-bottom: 1px solid var(--c-border) !important;
}

/* ── ps-filter-status: 他ステートの filter-select と同スタイル ── */
#ps-filter-status {
  background: #1a1a1a !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 7px !important;
  padding: 4px 8px !important;
  font-size: 11px !important;
  color: var(--c-text-sub) !important;
  cursor: pointer !important;
  height: 30px !important;
  box-sizing: border-box !important;
}

/* ── ps-search: 高さ統一 ── */
#ps-search {
  height: 30px !important;
  box-sizing: border-box !important;
  padding: 0 10px !important;
}

/* ── ps-list-controls: summary + ボタン行 ── */
#ps-list-controls #ps-summary-bar {
  flex: 0 0 100% !important;
  order: -1 !important;
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
  font-size: 11px !important;
  color: var(--c-text-mute) !important;
}

/* ── ps 削除済み / 一括削除ボタン ── */
#ps-btn-deleted-toggle,
#ps-btn-bulk-delete {
  background: transparent !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 7px !important;
  padding: 3px 7px !important;
  font-size: 11px !important;
  color: var(--c-text-mute) !important;
  cursor: pointer !important;
  flex: 0 0 auto !important;
  min-width: 80px !important;
}
#ps-btn-deleted-toggle.active {
  background: rgba(239,68,68,0.15) !important;
  border-color: rgba(239,68,68,0.5) !important;
  color: var(--c-danger) !important;
}
#ps-btn-deleted-toggle:hover,
#ps-btn-bulk-delete:hover {
  background: rgba(255,255,255,0.06) !important;
}

/* ════════════════════════════════════════════════════════════
   v1.32.3  案件編集モーダル（em-modal）右パネル UI リデザイン
             対象: 基本情報・スタッフ進捗・プラン詳細 の3タブ
   ════════════════════════════════════════════════════════════ */

/* ── フォームラップ: 余白・スクロール ── */
#em-edit-modal #em-form-wrap {
  padding: 20px 20px 8px !important;
}

/* ── タブパネル: セクション間の縦余白を広げる ── */
#em-edit-modal .em-tab-panel {
  gap: 20px !important;
}


/* ── 新規モードバナー ── */
#em-new-banner {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: #201b12;
  border-bottom: 1px solid #453419;
  font-size: 12.5px;
  font-weight: 500;
  color: #c78b34;
  line-height: 1.4;
}
#em-new-banner.visible { display: flex; }

/* ── 顧客管理: 新規モードバナー ── */
#cu-new-banner {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: #201b12;
  border-bottom: 1px solid #453419;
  font-size: 12.5px;
  font-weight: 500;
  color: #c78b34;
  line-height: 1.4;
  flex-shrink: 0;
}
#cu-new-banner.visible { display: flex; }

/* ── 顧客管理: 新規モード時は em-modal と同様ヘッダー非表示・バナーのみ表示 ── */
/* ヘッダーは display:none のまま。バナー(#cu-new-banner)だけ visible になる。 */

/* ── 顧客管理: 非アクティブタブを常時非表示 ── */
#cu-edit-modal .tab-btn.tab-disabled {
  display: none !important;
}

/* ── セクションタイトル: 青帯を廃止 → アクセント左ボーダーのみ ── */
#em-edit-modal .em-section-title {
  background: transparent !important;
  border-left: 2px solid var(--c-accent-72) !important;
  border-radius: 0 !important;
  padding: 2px 0 2px 10px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  color: rgba(255,255,255,0.6) !important;
  margin-top: 0 !important;
  margin-bottom: -8px !important;
  text-transform: uppercase !important;
}

/* ── フィールドグループ: カード化 ── */
#em-edit-modal .em-field-group {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 12px !important;
  padding: 16px !important;
  gap: 14px !important;
}

/* ── フィールドラベル: 少し大きめ・視認性UP ── */
#em-edit-modal .em-field-label {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--c-text-sub) !important;
  letter-spacing: 0.02em !important;
}

/* ── インプット: 高さ・パディング統一 ── */
#em-edit-modal .em-field-input {
  height: 38px !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
}

/* ── 読み取り専用（自動計算フィールド）: より明確に区別 ── */
#em-edit-modal .em-field-input[readonly],
#em-edit-modal .em-field-input.calc-out {
  background: rgba(255,255,255,0.04) !important;
  border-color: transparent !important;
  color: rgba(255,255,255,0.45) !important;
  font-weight: 500 !important;
  cursor: default !important;
}

/* ── textarea: 最小高さ調整 ── */
#em-edit-modal textarea.em-field-input {
  height: auto !important;
  min-height: 76px !important;
}

/* ── 顧客検索グループ: 背景なし（検索ボックス単体なので目立たせない） ── */
#em-edit-modal #em-tab-basic > div:first-child > .em-field-group {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* ── em-search-section: 顧客検索ドロップダウンは正常なカードスタイルを維持 ── */
#em-edit-modal #em-search-section {
  margin-bottom: 4px;
}
#em-edit-modal #em-search-section > .em-field-group {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 12px !important;
  padding: 16px !important;
}
#em-edit-modal #em-search-section > .em-section-title {
  margin-bottom: 4px !important;
  font-size: 11px !important;
  color: rgba(255,255,255,0.8) !important;
}

/* ── フッター: 固定 + 影 ── */
#em-edit-modal #em-footer {
  padding: 12px 20px !important;
  box-shadow: 0 -1px 0 var(--c-border) !important;
}

/* ── フォーム全体の最大幅（大画面での読みやすさ） ── */
#em-edit-modal #em-form-wrap .em-tab-panel {
  max-width: 560px !important;
}

/* ════════════════════════════════════════════════════════════
   v1.32.4  スタッフ・進捗 / プラン詳細タブのラッパーにgap適用
             em-tab-panel の直接子でないため gap が効いていなかった
   ════════════════════════════════════════════════════════════ */

/* ── 各タブのラッパーdivにもセクション間gapを適用 ── */
#em-edit-modal #em-progress-project-section,
#em-edit-modal #em-plan-content,
#em-edit-modal #em-payment-content,
#em-edit-modal #em-survey-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}

/* ── 書類発行ボタンエリア: フィールド行内に配置（左寄せ） ── */
#em-edit-modal .em-invoice-action-area {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
  justify-content: flex-start !important;
}

/* ════════════════════════════════════════════════════════════
   支払いタブ: ステップ見出し + 金額サマリー
   ════════════════════════════════════════════════════════════ */

/* ── ステップ番号付きセクション見出し ── */
#em-edit-modal .em-section-title.em-pay-step {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  border-left: none !important;
  padding-left: 0 !important;
  font-size: 11.5px !important;
  color: var(--c-text) !important;
}
#em-edit-modal .em-pay-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--c-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

/* ── 金額サマリー ── */
#em-edit-modal .em-pay-summary {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 12px 14px;
  background: var(--c-accent-18);
  border-radius: 10px;
}
#em-edit-modal .em-pay-sum-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12.5px;
  color: var(--c-text-sub);
}
#em-edit-modal .em-pay-sum-row .em-pay-sum-val {
  font-weight: 600;
  color: var(--c-text);
}
#em-edit-modal .em-pay-sum-total {
  border-top: 1px solid var(--c-border);
  padding-top: 8px;
  margin-top: 2px;
}
#em-edit-modal .em-pay-sum-total .em-pay-sum-label {
  font-weight: 700;
  color: var(--c-text);
  font-size: 13px;
}
#em-edit-modal .em-pay-sum-total .em-pay-sum-val {
  font-size: 16px;
  font-weight: 800;
  color: var(--c-accent);
}

/* ── オプション選択リスト: カード内で浮かないよう背景透過 ── */
#em-edit-modal .em-option-check-item {
  background: rgba(255,255,255,0.04) !important;
}

/* ════════════════════════════════════════════════════════════
   v1.32.5  em-modal 内の緑要素をアクセントブルーに統一
   ════════════════════════════════════════════════════════════ */

/* ── オプション選択: チェック済み → ブルー ── */
#em-edit-modal .em-option-check-item.checked {
  border-color: var(--c-accent-72) !important;
  background: var(--c-accent-18) !important;
}
#em-edit-modal .em-option-check-item.checked .em-oci-box {
  background: var(--c-accent-18) !important;
  border-color: var(--c-accent-72) !important;
}
#em-edit-modal .em-option-check-item.checked .em-oci-box::after {
  color: var(--c-accent) !important;
}
#em-edit-modal .em-option-check-item.checked .em-oci-price {
  color: rgba(255,255,255,0.88) !important;
}

/* ── 税区分ピル: 選択済み → ブルー ── */
#em-edit-modal .em-tax-radio-label.selected {
  background: var(--c-accent-18) !important;
  border-color: var(--c-accent-72) !important;
  color: rgba(255,255,255,0.88) !important;
}

/* ── 住所検索ボタン → ブルー ── */
#em-edit-modal #em-btnZip {
  background: var(--c-accent-18) !important;
  border-color: var(--c-accent-72) !important;
  color: rgba(255,255,255,0.88) !important;
}
#em-edit-modal #em-btnZip:hover {
  background: rgba(57,189,248,0.28) !important;
}

/* ════════════════════════════════════════════════════════════
   v1.32.6  新規ボタン青化 / em-modal 新規モード オレンジヘッダー
   ════════════════════════════════════════════════════════════ */

/* ── 全ステートの新規ボタン: 緑 → アクセントブルー ── */
#ap-btn-new,
#cu-btn-new,
#sf-btn-new,
#os-btn-new,
#ps-btnNew,
#ps-btnNewEmpty {
  background: var(--c-accent-18) !important;
  color: var(--c-accent) !important;
  border: 1px solid var(--c-accent-72) !important;
}
#ap-btn-new:hover,
#cu-btn-new:hover,
#sf-btn-new:hover,
#os-btn-new:hover,
#ps-btnNew:hover,
#ps-btnNewEmpty:hover {
  background: rgba(57,189,248,0.28) !important;
}

/* ── em-modal 新規モード: ヘッダーをオレンジグラデーション ── */
#em-edit-modal[data-mode="new_project"] #em-header,
#em-edit-modal[data-mode="new"] #em-header {
  background: linear-gradient(135deg, rgba(251,146,60,0.22) 0%, rgba(234,88,12,0.14) 100%) !important;
  border-bottom: 2px solid rgba(251,146,60,0.5) !important;
}
#em-edit-modal[data-mode="new_project"] #em-header-title,
#em-edit-modal[data-mode="new"] #em-header-title {
  color: #fb923c !important;
}
#em-edit-modal[data-mode="new_project"] #em-header-sub,
#em-edit-modal[data-mode="new"] #em-header-sub {
  color: rgba(251,146,60,0.7) !important;
  opacity: 1 !important;
}

/* ════════════════════════════════════════════════════════════
   v1.33.5  DatePicker グローバル化（全モーダル対応）・アクセントブルー化
   v1.33.6  サマリーバー下パディング拡大（ボタン↔区切り線の余白増）
   v1.33.7  モバイルレスポンシブ（ナビ開閉 + 左右パネル切り替え）
   v1.33.9  詳細パネルフォーム refinement を全ステート（cu / sf / os / ps）へ横展開
   v1.33.10 バグ修正: cu-edit-modal を420px固定幅に（全幅になる問題を修正） ※ v1.33.11 で再修正
   v1.33.11 cu-edit-modal: em-modal と同じ flex:1 全幅に統一 / btnZip ブルー化 / 新規モードバナー追加
   v1.33.12 新規モードヘッダーバグ修正（ヘッダー非表示・バナーのみ）/ タブ名「基本」/ 非アクティブタブを新規モード時に非表示
   v1.33.13 非アクティブタブ常時非表示化 / SLP（サイドバーLINEパネル）追加
   ════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════
   v1.33.9  詳細パネルフォーム refinement — 全ステート横展開
   sf / os / ps は em- プレフィックスクラスを使用
   cu のみ非プレフィックスクラス（.section-title 等）を使用
   ════════════════════════════════════════════════════════════ */

/* ── sf / os: フォームボディ padding ── */
#sf-edit-modal #sf-em-form-body,
#os-edit-modal #os-em-form-body {
  padding: 20px 20px 8px !important;
}

/* ── sf / os: タブパネル縦余白 ── */
#sf-edit-modal .em-tab-panel,
#os-edit-modal .em-tab-panel {
  gap: 20px !important;
}

/* ── sf / os / ps: セクションタイトル（アクセント左ボーダー） ── */
#sf-edit-modal .em-section-title,
#os-edit-modal .em-section-title,
#ps-edit-modal .em-section-title {
  background: transparent !important;
  border-left: 2px solid var(--c-accent-72) !important;
  border-radius: 0 !important;
  padding: 2px 0 2px 10px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  color: rgba(255,255,255,0.6) !important;
  margin-top: 0 !important;
  margin-bottom: -8px !important;
  text-transform: uppercase !important;
}

/* ── sf / os / ps: フィールドグループ（カード化） ── */
#sf-edit-modal .em-field-group,
#os-edit-modal .em-field-group,
#ps-edit-modal .em-field-group {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 12px !important;
  padding: 16px !important;
  gap: 14px !important;
}

/* ── sf / os / ps: フィールドラベル ── */
#sf-edit-modal .em-field-label,
#os-edit-modal .em-field-label,
#ps-edit-modal .em-field-label {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--c-text-sub) !important;
  letter-spacing: 0.02em !important;
}

/* ── sf / os / ps: インプット高さ統一 ── */
#sf-edit-modal .em-field-input,
#os-edit-modal .em-field-input,
#ps-edit-modal .em-field-input {
  height: 38px !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
}

/* ── sf / os / ps: 読み取り専用フィールド ── */
#sf-edit-modal .em-field-input[readonly],
#os-edit-modal .em-field-input[readonly],
#ps-edit-modal .em-field-input[readonly] {
  background: rgba(255,255,255,0.04) !important;
  border-color: transparent !important;
  color: rgba(255,255,255,0.45) !important;
  cursor: default !important;
}

/* ── sf / os / ps: textarea ── */
#sf-edit-modal textarea.em-field-input,
#os-edit-modal textarea.em-field-input,
#ps-edit-modal textarea.em-field-input {
  height: auto !important;
  min-height: 76px !important;
}

/* ── sf / os / ps: フッター ── */
#sf-edit-modal #sf-em-footer,
#os-edit-modal #os-em-footer,
#ps-edit-modal #ps-em-footer {
  padding: 12px 20px !important;
  box-shadow: 0 -1px 0 var(--c-border) !important;
}

/* ────────────────────────────────────────────────────────────
   cu: 非プレフィックスクラスに個別 refinement を適用
   ──────────────────────────────────────────────────────────── */

/* フォームラップ padding */
#cu-edit-modal #cu-form-wrap {
  padding: 20px 20px 8px !important;
}

/* タブパネル縦余白 */
#cu-edit-modal .tab-panel {
  gap: 20px !important;
}

/* セクションタイトル（アクセント左ボーダー） */
#cu-edit-modal .section-title {
  background: transparent !important;
  border-bottom: none !important;
  border-left: 2px solid var(--c-accent-72) !important;
  border-radius: 0 !important;
  padding: 2px 0 2px 10px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  color: rgba(255,255,255,0.6) !important;
  margin-top: 0 !important;
  margin-bottom: -8px !important;
  text-transform: uppercase !important;
}

/* フィールドグループ（カード化） */
#cu-edit-modal .field-group {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 12px !important;
  padding: 16px !important;
  gap: 14px !important;
}

/* フィールドラベル */
#cu-edit-modal .field-label {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--c-text-sub) !important;
  letter-spacing: 0.02em !important;
}

/* インプット高さ統一 */
#cu-edit-modal .field-input {
  height: 38px !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
}

/* 読み取り専用フィールド */
#cu-edit-modal .field-input[readonly] {
  background: rgba(255,255,255,0.04) !important;
  border-color: transparent !important;
  color: rgba(255,255,255,0.45) !important;
  cursor: default !important;
}

/* textarea */
#cu-edit-modal textarea.field-input {
  height: auto !important;
  min-height: 76px !important;
}

/* cu-footer: select 要素は height を inherit して正しく表示 */
#cu-edit-modal .field-group select.field-input {
  height: 38px !important;
}

/* フッター */
#cu-edit-modal #cu-footer {
  padding: 12px 20px !important;
  box-shadow: 0 -1px 0 var(--c-border) !important;
}

/* ────────────────────────────────────────────────────────────
   モバイルUI: body.mob-mode クラスベース制御
   （CSS @media ではなく JS で mob-mode を付与 → iframe 幅問題を回避）
   ──────────────────────────────────────────────────────────── */

/* ── ハンバーガー・戻るボタン: デフォルト非表示 ── */
#mob-hamburger { display: none; }
.mob-back-btn  { display: none; }

/* ── ナビオーバーレイ ── */
#mob-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 140;
}
#mob-nav-overlay.visible { display: block; }

/* ════════════════ mob-mode（JS が付与） ════════════════ */

/* ── ハンバーガーボタン ── */
body.mob-mode #mob-hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 11px;
  left: 10px;
  z-index: 200;
  width: 34px;
  height: 34px;
  background: var(--c-surface2);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  cursor: pointer;
  color: var(--c-text);
  padding: 0;
}

/* ── サイドバー: 画面外に退避、開閉アニメーション ── */
body.mob-mode .fp-sidebar {
  position: fixed !important;
  top: 0 !important; left: 0 !important; bottom: 0 !important;
  z-index: 150 !important;
  transform: translateX(-100%) !important;
  transition: transform 0.25s ease !important;
  width: 220px !important;
  min-width: 220px !important;
  box-shadow: 4px 0 20px rgba(0,0,0,0.4) !important;
}
body.mob-mode .fp-sidebar.mob-open {
  transform: translateX(0) !important;
}

/* ── メインエリア: フル幅 ── */
body.mob-mode .fp-main {
  width: 100% !important;
  min-width: 0 !important;
}

/* ── タイトルバー: ハンバーガー分の余白 ── */
body.mob-mode .sp-bar-title {
  padding-left: 44px !important;
}

/* ── sp-layout: 右パネルの absolute 配置の基準 ── */
body.mob-mode .sp-layout {
  position: relative !important;
  overflow: hidden !important;
}

/* ── 左ペイン: フル幅 ── */
body.mob-mode .sp-list-pane {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  border-right: none !important;
  min-width: 0 !important;
}

/* ── 右パネル: デフォルトは右外に隠す ── */
body.mob-mode #em-edit-modal,
body.mob-mode #cu-edit-modal,
body.mob-mode #sf-edit-modal,
body.mob-mode #os-edit-modal,
body.mob-mode #ps-edit-modal {
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  flex: none !important;
  transform: translateX(110%) !important;
  transition: transform 0.3s ease !important;
  z-index: 10 !important;
  border-left: none !important;
}

/* ── mob-detail: 左ペインを隠し右パネルを表示 ── */
body.mob-mode .sp-layout.mob-detail .sp-list-pane {
  display: none !important;
}
body.mob-mode .sp-layout.mob-detail #em-edit-modal,
body.mob-mode .sp-layout.mob-detail #cu-edit-modal,
body.mob-mode .sp-layout.mob-detail #sf-edit-modal,
body.mob-mode .sp-layout.mob-detail #os-edit-modal,
body.mob-mode .sp-layout.mob-detail #ps-edit-modal {
  transform: translateX(0) !important;
}

/* ── 戻るボタン: mob-detail のときのみ表示 ── */
body.mob-mode .sp-layout.mob-detail .mob-back-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  padding: 4px 10px 4px 6px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  color: var(--c-text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  margin-bottom: 4px;
  white-space: nowrap;
}
body.mob-mode .sp-layout.mob-detail .mob-back-btn:hover {
  background: rgba(255,255,255,0.1);
}

/* ── モーダルヘッダー: 戻るボタンが入るよう調整 ── */
body.mob-mode #em-header,
body.mob-mode #cu-header,
body.mob-mode #sf-em-header,
body.mob-mode #os-em-header,
body.mob-mode #ps-em-header {
  flex-wrap: wrap !important;
  gap: 4px !important;
}

/* ── ギャラリー 2ペイン: mob-mode 対応 ── */
body.mob-mode #gl-sp-layout .gl-sp-detail {
  position: absolute;
  inset: 0;
  transform: translateX(100%);
  transition: transform 0.26s cubic-bezier(0.4,0,0.2,1);
  background: var(--c-bg);
  z-index: 10;
}
body.mob-mode #gl-sp-layout.mob-detail .gl-sp-list {
  display: none;
}
body.mob-mode #gl-sp-layout.mob-detail .gl-sp-detail {
  transform: translateX(0);
}
body.mob-mode #gl-sp-layout.mob-detail #mob-back-gl {
  display: inline-flex !important;
}

/* ════════════════════════════════════════════════════════════
   v1.33.14  SLP — Sidebar LINE Panel（右固定300px パネル）
   対象ステート: 案件一覧(em) / 顧客管理(cu) / スタッフ(sf) / 外注先(os)
   ════════════════════════════════════════════════════════════ */

/* ── SLP パネル本体（未選択時は非表示） ── */
.sp-line-panel {
  width: 0;
  flex: 0 0 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--c-bg);
  border-left: none;
  min-height: 0;
  flex-shrink: 0;
  transition: width 0.2s ease, flex-basis 0.2s ease;
}
.sp-line-panel.slp-visible {
  width: 300px;
  flex: 0 0 300px;
  border-left: 1px solid var(--c-border);
}

/* ── ヘッダー ── */
.slp-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--c-border);
  flex-shrink: 0;
  min-width: 0;
  background: var(--c-bg);
}
.slp-hd-icon {
  flex-shrink: 0;
  color: var(--c-accent);
  display: flex;
  align-items: center;
}
.slp-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.slp-status {
  font-size: 10.5px;
  color: var(--c-text-sub);
  flex-shrink: 0;
  white-space: nowrap;
}
.slp-status.slp-linked {
  color: #4bd48c;
}
.slp-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--c-text-sub);
  padding: 2px 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  font-size: 16px;
  line-height: 1;
}
.slp-close-btn:hover {
  background: var(--c-hover);
  color: var(--c-text);
}

/* ── メッセージ本文エリア ── */
.slp-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  background: var(--c-bg);
}
.slp-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--c-text-sub);
  font-size: 12px;
  gap: 8px;
  text-align: center;
}
.slp-empty svg {
  opacity: 0.35;
}

/* ── バブル ── */
.slp-bubble-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.slp-bubble-wrap.slp-out {
  align-items: flex-end;
}
.slp-bubble-wrap.slp-in {
  align-items: flex-start;
}
.slp-bubble {
  max-width: 220px;
  padding: 7px 10px;
  border-radius: 12px;
  font-size: 12.5px;
  line-height: 1.55;
  word-break: break-word;
  white-space: pre-wrap;
}
.slp-bubble-wrap.slp-out .slp-bubble {
  background: rgba(57,189,248,0.16);
  border: 1px solid rgba(57,189,248,0.22);
  color: var(--c-text);
  border-bottom-right-radius: 3px;
}
.slp-bubble-wrap.slp-in .slp-bubble {
  background: var(--c-surface-2);
  color: var(--c-text);
  border-bottom-left-radius: 3px;
}
.slp-bubble-time {
  font-size: 10px;
  color: var(--c-text-sub);
  padding: 0 2px;
}
.slp-bubble-img {
  max-width: 200px;
  max-height: 180px;
  border-radius: 8px;
  object-fit: cover;
  display: block;
  cursor: pointer;
}
.slp-bubble-file {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 12px;
  color: var(--c-text-sub);
  max-width: 200px;
}
.slp-loading {
  text-align: center;
  font-size: 11px;
  color: var(--c-text-sub);
  padding: 10px;
}

/* ── 送信フッター ── */
.slp-footer {
  border-top: 1px solid var(--c-border);
  padding: 8px 10px;
  display: flex;
  gap: 6px;
  align-items: flex-end;
  flex-shrink: 0;
}
.slp-no-line-notice {
  padding: 10px 14px;
  border-top: 1px solid var(--c-border);
  font-size: 11.5px;
  color: var(--c-text-sub);
  text-align: center;
  flex-shrink: 0;
}
.slp-input {
  flex: 1;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  color: var(--c-text);
  font-size: 12.5px;
  padding: 7px 10px;
  resize: none;
  min-height: 36px;
  max-height: 100px;
  line-height: 1.5;
  font-family: inherit;
}
.slp-input:focus {
  outline: none;
  border-color: var(--c-accent-72);
}
.slp-send-btn {
  background: var(--c-accent);
  border: none;
  border-radius: 8px;
  color: #000;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 12px;
  cursor: pointer;
  white-space: nowrap;
  align-self: flex-end;
  flex-shrink: 0;
}
.slp-send-btn:hover {
  background: var(--c-accent-hover, var(--c-accent));
  opacity: 0.9;
}
.slp-send-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── LINEトグルボタン（廃止: パネルは常時表示） ── */

/* ── モバイル時は SLP を非表示 ── */
body.mob-mode .sp-line-panel {
  display: none !important;
}

/* ── SLP追加後: 詳細パネルを sp-layout 内で確実に全幅化 ── */
.sp-layout > #em-edit-modal.open,
.sp-layout > #cu-edit-modal.open,
.sp-layout > #sf-edit-modal.open,
.sp-layout > #os-edit-modal.open,
.sp-layout > #ps-edit-modal.open {
  flex: 1 1 0% !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  align-self: stretch !important;
  overflow: hidden !important;
}
.sp-layout > #em-edit-modal.open #em-app,
.sp-layout > #cu-edit-modal.open #cu-app,
.sp-layout > #sf-edit-modal.open .em-app,
.sp-layout > #os-edit-modal.open .em-app,
.sp-layout > #ps-edit-modal.open .modal-inner {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

/* ── SLP追加後: タブパネル内フォームの max-width 制限を解除 ── */
.sp-layout > #em-edit-modal.open #em-form-wrap .em-tab-panel {
  max-width: none !important;
}

/* ════════════════════════════════════════════════════════════
   v1.33.15  sf / os 詳細パネル UI 整理
             ① フィールドをセクション単位の1カードに統合
             ② グリーン系 → アクセントブルーに統一
   ════════════════════════════════════════════════════════════ */

/* ── sf / os ヘッダーを常時非表示（em/cu と同じバナー方式に統一） ── */
/* [data-mode] で旧ルール(specificity 2,1,0)を上書き */
#sf-edit-modal #sf-em-header,
#sf-edit-modal[data-mode] #sf-em-header,
#sf-edit-modal[data-mode="new"] #sf-em-header,
#sf-edit-modal[data-mode="edit"] #sf-em-header,
#os-edit-modal #os-em-header,
#os-edit-modal[data-mode] #os-em-header,
#os-edit-modal[data-mode="new"] #os-em-header,
#os-edit-modal[data-mode="edit"] #os-em-header {
  display: none !important;
}

/* ── sf / os 新規モードバナー（em-new-banner / cu-new-banner と同仕様） ── */
#sf-new-banner,
#os-new-banner {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: #201b12;
  border-bottom: 1px solid #453419;
  font-size: 12.5px;
  font-weight: 500;
  color: #c78b34;
  line-height: 1.4;
  flex-shrink: 0;
}
#sf-new-banner.visible,
#os-new-banner.visible {
  display: flex;
}

/* ── em-field-row が sf/os form-body の直接子になる場合の調整 ── */
#sf-edit-modal #sf-em-form-body,
#os-edit-modal #os-em-form-body {
  gap: 14px !important;
}

/* ── em-field-group 内の em-field-row: display確保 ── */
#sf-edit-modal .em-field-group .em-field-row,
#os-edit-modal .em-field-group .em-field-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
#sf-edit-modal .em-field-group .em-field-row.em-row-2col,
#os-edit-modal .em-field-group .em-field-row.em-row-2col {
  flex-direction: row !important;
  gap: 12px !important;
}
#sf-edit-modal .em-field-group .em-row-2col > .em-field-row,
#os-edit-modal .em-field-group .em-row-2col > .em-field-row {
  flex: 1 !important;
}

/* ── 写真セクション: em-field-group 内でも display:flex 維持 ── */
#sf-edit-modal #sf-em-photo-section,
#os-edit-modal #os-em-photo-section {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

/* ── LINE連携: em-field-group 内の line-section ── */
#sf-edit-modal #sf-em-line-section,
#os-edit-modal #os-em-line-section {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

/* ── 写真選択ボタン: グリーン → ブルー ── */
#sf-edit-modal #sf-em-btn-select-photo,
#os-edit-modal #os-em-btn-select-photo {
  background: var(--c-accent-18) !important;
  border: 1px dashed var(--c-accent-72) !important;
  color: rgba(255,255,255,0.88) !important;
}
#sf-edit-modal #sf-em-btn-select-photo:hover,
#os-edit-modal #os-em-btn-select-photo:hover {
  background: rgba(57,189,248,0.28) !important;
}

/* ── LINE URL発行ボタン: グリーン → ブルー ── */
#sf-edit-modal #sf-em-btn-issue-url,
#os-edit-modal #os-em-btn-issue-url {
  background: var(--c-accent-18) !important;
  border: 1px solid var(--c-accent-72) !important;
  color: rgba(255,255,255,0.88) !important;
}
#sf-edit-modal #sf-em-btn-issue-url:hover,
#os-edit-modal #os-em-btn-issue-url:hover {
  background: rgba(57,189,248,0.28) !important;
}

/* ── LINE URLコピーボタン: グリーン → ブルー ── */
#sf-edit-modal #sf-em-btn-copy-url,
#os-edit-modal #os-em-btn-copy-url {
  background: var(--c-accent-18) !important;
  border: 1px solid var(--c-accent-72) !important;
  color: rgba(255,255,255,0.88) !important;
}
#sf-edit-modal #sf-em-btn-copy-url:hover,
#os-edit-modal #os-em-btn-copy-url:hover {
  background: rgba(57,189,248,0.28) !important;
}

/* ── 権限アイテム: グリーン → ブルー ── */
#sf-edit-modal .em-perm-item:hover {
  border-color: var(--c-accent-72) !important;
  background: var(--c-accent-18) !important;
}
#sf-edit-modal .em-perm-item.checked {
  border-color: var(--c-accent-72) !important;
  background: var(--c-accent-18) !important;
}
#sf-edit-modal .em-perm-item.checked .em-perm-check {
  border-color: var(--c-accent) !important;
  background: var(--c-accent-18) !important;
  color: var(--c-accent) !important;
}

/* ── perms-grid: em-field-group 内でグリッド維持 ── */
#sf-edit-modal #sf-em-perms-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}

/* ════════════════════════════════════════════════════════════
   v1.35.1  スタッフ招待ボタン: flex/padding/border-radius/hover整備
   v1.35.0  撮影会: em-section カード化（基本情報タブUI統一）
   v1.34.1  撮影会: デザイン設定UI + カバーアップロード + SPFプレビューCSS
   v1.34.0  SLP バブル背景修正（--c-card未定義→実色）・Realtime対応
   v1.33.17  撮影会 3パネルレイアウト + 予約カレンダー案件表示
   ════════════════════════════════════════════════════════════ */

/* ── 3パネルラッパー ── */
.ps-3panel-wrap {
  display: flex !important;
  flex: 1 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
.ps-left-pane {
  flex-shrink: 0 !important;
}

/* ── 中央編集パネル（ps-edit-modal をインライン化）── */
.ps-center-pane {
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
  background: none !important;
  flex: 1 !important;
  display: none !important;
  min-width: 0 !important;
  overflow: hidden !important;
  flex-direction: column !important;
  border-radius: 0 !important;
}
.ps-center-pane.open {
  display: flex !important;
}
.ps-center-pane .modal-inner {
  position: static !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  border-radius: 0 !important;
  border: none !important;
  border-right: 1px solid var(--c-border) !important;
  box-shadow: none !important;
  margin: 0 !important;
  transform: none !important;
  left: auto !important;
  top: auto !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
/* ドラッグ無効化（インラインパネルでは不要） */
.ps-center-pane #ps-em-header { cursor: default !important; user-select: auto !important; }

/* ── 右プレビューパネル ── */
.ps-right-pane {
  width: 300px !important;
  flex-shrink: 0 !important;
  border-left: 1px solid var(--c-border) !important;
  overflow-y: auto !important;
  background: var(--c-surface) !important;
  display: none !important;
  flex-direction: column !important;
}
.ps-right-pane.open {
  display: flex !important;
}
.ps-preview-wrap {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.ps-preview-header {
  padding: 10px 14px;
  font-size: 10px;
  font-weight: 700;
  color: var(--c-text-mute);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--c-border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--c-surface-2);
}
.ps-preview-status {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
  letter-spacing: 0.04em;
  text-transform: none;
}
.ps-preview-status.open   { background: rgba(34,197,94,0.18); color: #22c55e; }
.ps-preview-status.draft  { background: rgba(148,163,184,0.12); color: var(--c-text-mute); }
.ps-preview-status.closed { background: rgba(239,68,68,0.12); color: #ef4444; }
.ps-preview-body {
  font-size: 12px;
  color: var(--c-text-light);
}
.ps-preview-empty {
  text-align: center;
  color: var(--c-text-mute);
  font-size: 12px;
  padding: 40px 16px;
  line-height: 2;
}
.ps-prev-cover {
  width: 100%;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 10px;
  display: block;
}
.ps-prev-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 6px;
  line-height: 1.4;
}
.ps-prev-meta {
  font-size: 11px;
  color: var(--c-text-mute);
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 8px;
}
.ps-prev-desc {
  font-size: 11px;
  color: var(--c-text-light);
  line-height: 1.7;
  margin-bottom: 10px;
  white-space: pre-line;
}
.ps-prev-divider {
  border: none;
  border-top: 1px solid var(--c-border);
  margin: 8px 0;
}
.ps-prev-section-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--c-text-mute);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 5px;
  margin-top: 2px;
}
.ps-prev-slot {
  padding: 5px 8px;
  border: 1px solid var(--c-border);
  border-radius: 5px;
  font-size: 11px;
  color: var(--c-text);
  margin-bottom: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ps-prev-slot-cap { font-size: 10px; color: var(--c-text-mute); }
.ps-prev-field { margin-bottom: 7px; }
.ps-prev-field-label { font-size: 10px; color: var(--c-text-mute); margin-bottom: 3px; }
.ps-prev-input {
  width: 100%;
  box-sizing: border-box;
  padding: 5px 7px;
  border: 1px solid var(--c-border);
  border-radius: 5px;
  background: var(--c-surface-2);
  color: var(--c-text-mute);
  font-size: 11px;
  min-height: 26px;
}
.ps-prev-btn {
  width: 100%;
  padding: 9px;
  background: var(--c-accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  margin-top: 10px;
  display: block;
  opacity: 0.85;
}
.ps-prev-plan {
  border: 1px solid var(--c-border);
  border-radius: 5px;
  padding: 5px 8px;
  margin-bottom: 4px;
}
.ps-prev-plan-name  { font-size: 11px; font-weight: 600; color: var(--c-text); }
.ps-prev-plan-price { font-size: 10px; color: var(--c-text-mute); }

/* ── セッションリスト: ステータス別グループヘッダー ── */
.ps-group-header {
  padding: 5px 14px 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-mute);
  border-bottom: 1px solid var(--c-border);
  background: var(--c-surface-2);
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ps-group-header::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.ps-group-header.status-open   { color: #22c55e; }
.ps-group-header.status-draft  { color: var(--c-text-mute); }
.ps-group-header.status-closed { color: var(--c-text-mute); opacity: 0.6; }

/* ── 予約カレンダー: 案件ドット（青系）── */
.res-dot.res-dot-project {
  background: rgba(96,165,250,0.18);
  color: #3b82f6;
  font-size: 10px;
}
.res-day-section-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--c-text-mute);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 0 2px;
  border-bottom: 1px solid var(--c-border);
  margin-bottom: 4px;
}
.res-day-item-project {
  background: rgba(96,165,250,0.06);
  border-left: 2px solid #3b82f6;
}
.res-day-item-project:hover { background: rgba(96,165,250,0.12); }

/* ── ps-toolbar に sp-bar-title（撮影会）の文字 ── */
#ps-toolbar .sp-bar-title { display: block !important; }

/* ════════════════════════════════════════════════════════════
   v1.34.0  撮影会: デザイン設定 + カバー画像アップロード
   ════════════════════════════════════════════════════════════ */

/* ── カバー画像行（URL + アップロードボタン） ── */
.ps-cover-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.ps-cover-row .em-field-input {
  flex: 1;
  min-width: 0;
}
.ps-cover-upload-btn {
  flex-shrink: 0;
  padding: 6px 10px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  color: var(--c-text);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.ps-cover-upload-btn:hover { background: var(--c-hover); border-color: var(--c-accent-72); }
.ps-cover-upload-btn.uploading { opacity: .6; pointer-events: none; }

/* ── カラーピッカー行 ── */
.ps-color-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ps-color-input {
  width: 34px;
  height: 34px;
  padding: 2px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background: var(--c-surface);
  cursor: pointer;
  flex-shrink: 0;
}
.ps-color-text {
  flex: 1;
  min-width: 0;
  font-size: 12px;
}

/* ── プレビューパネル内：実フォームデザイン ── */
.ps-preview-body { overflow-y: auto; overflow-x: hidden; }
.spf-wrap {
  min-height: 100%;
  font-family: 'Hiragino Sans','Yu Gothic','Helvetica Neue',sans-serif;
  font-size: 13px;
  color: #1a1a1a;
}
.spf-header {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 140px;
}
.spf-cover-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.spf-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.2) 65%);
}
.spf-hcontent {
  position: relative;
  padding: 16px 14px 14px;
  color: #fff;
}
.spf-title {
  font-size: 16px; font-weight: 800; line-height: 1.3; margin-bottom: 10px;
}
.spf-meta { display: flex; flex-direction: column; gap: 5px; }
.spf-meta-row {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; color: #fff;
}
.spf-meta-icon { font-size: 13px; flex-shrink: 0; }
.spf-main { padding: 12px; }
.spf-desc {
  border: 1px solid #ddd; border-radius: 10px;
  padding: 12px; margin-bottom: 12px;
  font-size: 11.5px; line-height: 1.8;
  white-space: pre-wrap;
}
.spf-form-card {
  border: 1px solid #ddd; border-radius: 10px;
  padding: 14px; margin-bottom: 12px;
}
.spf-form-card h2 { font-size: 12px; font-weight: 700; margin-bottom: 12px; }
.spf-section-label {
  font-size: 11px; font-weight: 700; margin-bottom: 8px;
  padding: 0 0 4px; border-bottom: 1px solid #eee;
}
.spf-field { margin-bottom: 10px; }
.spf-field-label {
  display: block; font-size: 10.5px; font-weight: 700; margin-bottom: 4px;
}
.spf-field-label .req { color: #d64040; margin-left: 2px; }
.spf-input {
  width: 100%; padding: 7px 9px;
  border: 1.5px solid #ddd; border-radius: 7px;
  font-size: 11.5px; background: #fff; color: #aaa;
  box-sizing: border-box;
}
.spf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 4px; }
.spf-card {
  border: 1.5px solid #ddd; border-radius: 7px;
  padding: 8px 10px; text-align: center;
  font-size: 11.5px; font-weight: 600; color: #333;
  background: #fff;
}
.spf-card-price {
  display: flex; align-items: center; justify-content: space-between;
  border: 1.5px solid #ddd; border-radius: 8px;
  padding: 8px 10px; background: #fff; margin-bottom: 4px;
}
.spf-card-price-name { font-size: 11.5px; font-weight: 600; }
.spf-submit {
  width: 100%; padding: 11px;
  border: none; border-radius: 8px;
  color: #fff; font-size: 13px; font-weight: 800;
  cursor: default; margin-top: 4px;
}
.spf-remain { font-size: 9.5px; font-weight: 400; opacity: .7; display: block; margin-top: 2px; }

/* ════════════════════════════════════════════════
   v1.35.0  撮影会: em-section をカード単位に統一
   ════════════════════════════════════════════════ */

/* em-section を1枚のカードに昇格 */
#ps-edit-modal .em-section {
  display: flex; flex-direction: column; gap: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
}
/* em-field-group 個別カードを解除（em-section がカードになるため） */
#ps-edit-modal .em-field-group {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  margin-bottom: 0 !important;
}
/* セクションタイトルのネガティブ margin を解除（gap が担う） */
#ps-edit-modal .em-section-title { margin-bottom: 0 !important; }

/* ════════════════════════════════════════════════
   v1.37.1  StateReservations 3パネル: min-height/width 修正でプレビューパネルを確実表示
   ════════════════════════════════════════════════ */

/* ── StateCalendar ── */
#state-calendar { overflow: hidden; }
#state-calendar.active { display: flex; flex-direction: column; }
/* カレンダー / 予約一覧 切替タブ */
.sc-view-tabs {
  display: flex; border-bottom: 1px solid var(--c-border); flex-shrink: 0; padding: 0 4px;
}
.sc-view-tab {
  display: flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; color: var(--c-text-mute);
  padding: 9px 14px; background: none; border: none; border-bottom: 2px solid transparent;
  cursor: pointer; font-family: inherit; transition: all 0.15s;
}
.sc-view-tab.active { color: var(--c-accent); border-bottom-color: var(--c-accent); }
.sc-view-tab:hover:not(.active) { color: var(--c-text-sub); }
/* 予約一覧ビュー */
.sc-res-wrap { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
.sc-res-toolbar {
  padding: 10px 16px; border-bottom: 1px solid var(--c-border); flex-shrink: 0;
}
.sc-res-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.sc-res-filter {
  font-size: 10.5px; font-weight: 600; padding: 4px 11px; border-radius: 20px;
  border: 1px solid var(--c-border); background: none; color: var(--c-text-sub);
  cursor: pointer; font-family: inherit; transition: all 0.15s;
}
.sc-res-filter.active { background: rgba(57,189,248,0.15); border-color: rgba(57,189,248,0.4); color: #39bdf8; }
.sc-res-filter:hover:not(.active) { border-color: rgba(255,255,255,0.25); color: var(--c-text); }
.sc-res-list { flex: 1; overflow-y: auto; padding: 8px 12px; }
.sc-res-empty { text-align: center; padding: 40px 16px; font-size: 12px; color: var(--c-text-mute); }
.sc-res-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-bottom: 1px solid var(--c-border); cursor: pointer; transition: background 0.12s;
  border-radius: 8px; margin-bottom: 2px;
}
.sc-res-item:hover { background: rgba(255,255,255,0.04); }
.sc-res-item-date { font-size: 11px; color: var(--c-text-sub); min-width: 100px; flex-shrink: 0; }
.sc-res-item-time { display: block; font-size: 10px; color: var(--c-text-mute); margin-top: 2px; }
.sc-res-item-body { flex: 1; min-width: 0; }
.sc-res-item-name { font-size: 13px; font-weight: 700; color: var(--c-text); }
.sc-res-item-svc { font-size: 10.5px; color: var(--c-text-sub); margin-top: 2px; }
.sc-res-item-st {
  font-size: 9.5px; font-weight: 700; padding: 3px 8px; border-radius: 10px; flex-shrink: 0;
}
.sc-res-st-confirmed { background: rgba(74,222,128,0.15); color: #4ade80; }
.sc-res-st-pending   { background: rgba(251,191,36,0.15);  color: #fbbf24; }
.sc-res-st-cancelled { background: rgba(148,163,184,0.12); color: var(--c-text-mute); }
/* 予約詳細モーダル内 */
.sc-res-detail-row { display:flex; gap:10px; padding:7px 0; border-bottom:1px solid var(--c-border); }
.sc-res-detail-row:last-child { border-bottom:none; }
.sc-res-detail-lbl { font-size:11px; color:var(--c-text-sub); width:56px; flex-shrink:0; padding-top:1px; }
.sc-res-detail-val { font-size:13px; color:var(--c-text); font-weight:500; word-break:break-all; }
/* 承認・否認ボタン */
.sc-res-modal-actions { display:flex; gap:10px; margin-top:16px; padding-top:14px; border-top:1px solid var(--c-border); }
.sc-res-approve-btn, .sc-res-reject-btn {
  flex:1; padding:10px 12px; border-radius:8px; font-size:13px; font-weight:700;
  cursor:pointer; border:1px solid; transition:opacity .15s; font-family:inherit;
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.sc-res-approve-btn { background:rgba(74,222,128,0.15); color:#4ade80; border-color:rgba(74,222,128,0.4); }
.sc-res-approve-btn:hover:not(:disabled) { background:rgba(74,222,128,0.25); }
.sc-res-reject-btn  { background:rgba(239,68,68,0.12);  color:#f87171; border-color:rgba(239,68,68,0.35); }
.sc-res-reject-btn:hover:not(:disabled)  { background:rgba(239,68,68,0.22); }
.sc-res-approve-btn:disabled, .sc-res-reject-btn:disabled { opacity:.5; cursor:not-allowed; }

/* 予約一覧 削除ボタン */
.sc-res-item-del {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 5px;
  background: transparent; border: 1px solid transparent;
  color: var(--c-text-mute); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s; opacity: 0.4;
}
.sc-res-item:hover .sc-res-item-del { opacity: 1; }
.sc-res-item-del:hover { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.3); color: #f87171; }
.sc-res-item-del--confirm { background: rgba(239,68,68,0.2) !important; border-color: rgba(239,68,68,0.5) !important; color: #f87171 !important; opacity: 1 !important; }
.sc-res-item-del:disabled { opacity: 0.35 !important; cursor: not-allowed; }

/* 削除済み一覧 タブ */
.sc-res-filter--deleted { margin-left: auto; }
.sc-res-filter--deleted.active { background: rgba(239,68,68,0.15); color: #f87171; border-color: rgba(239,68,68,0.35); }

/* 削除済み予約アイテム */
.sc-res-item--deleted { opacity: 0.7; cursor: default; }
.sc-res-item--deleted:hover { background: var(--c-surface); }
.sc-res-item--deleted .sc-res-item-name { text-decoration: line-through; color: var(--c-text-mute); }

/* 完全削除ボタン */
.sc-hard-del-btn {
  flex-shrink: 0; font-size: 11px; padding: 5px 10px;
  background: rgba(239,68,68,0.1); color: #f87171;
  border: 1px solid rgba(239,68,68,0.3); border-radius: 5px;
  cursor: pointer; display: flex; align-items: center; gap: 5px;
  white-space: nowrap; transition: all 0.15s;
}
.sc-hard-del-btn:hover:not(:disabled) { background: rgba(239,68,68,0.22); }
.sc-hard-del-btn--confirm { background: rgba(239,68,68,0.3) !important; border-color: rgba(239,68,68,0.6) !important; color: #fca5a5 !important; font-weight: 700; }
.sc-hard-del-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* 顧客登録ステータスバッジ */
.sc-cust-badge {
  display: inline-block; font-size: 10px; padding: 2px 7px; border-radius: 3px;
  margin-top: 4px; font-weight: 600; letter-spacing: 0.02em;
}
.sc-cust-badge--linked   { background: rgba(74,222,128,0.12); color:#4ade80; border:1px solid rgba(74,222,128,0.3); }
.sc-cust-badge--review   { background: rgba(251,146,60,0.12);  color:#fb923c; border:1px solid rgba(251,146,60,0.3); }
.sc-cust-badge--none     { background: rgba(148,163,184,0.08); color:var(--c-text-mute); border:1px solid rgba(148,163,184,0.18); }

/* 顧客紐づけ確認パネル（モーダル内） */
.sc-cust-review-panel {
  margin-top: 14px; padding: 12px 14px;
  background: rgba(251,146,60,0.07); border: 1px solid rgba(251,146,60,0.3); border-radius: 7px;
}
.sc-cust-review-title {
  font-size: 12px; font-weight: 700; color: #fb923c;
  display: flex; align-items: center; gap: 6px; margin-bottom: 5px;
}
.sc-cust-review-note { font-size: 11px; color: var(--c-text-mute); margin-bottom: 10px; }
.sc-cust-candidate {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; background: var(--c-surface); border-radius: 5px; margin-bottom: 6px;
}
.sc-cust-candidate-info { font-size: 11px; line-height: 1.65; color: var(--c-text); flex: 1; min-width: 0; }
.sc-cust-link-btn {
  flex-shrink: 0; font-size: 11px; padding: 5px 10px;
  background: rgba(99,179,237,0.12); color: #63b3ed;
  border: 1px solid rgba(99,179,237,0.3); border-radius: 4px;
  cursor: pointer; display: flex; align-items: center; gap: 4px; white-space: nowrap;
}
.sc-cust-link-btn:hover:not(:disabled) { background: rgba(99,179,237,0.22); }
.sc-cust-link-btn:disabled { opacity:.5; cursor:not-allowed; }
.sc-cust-new-btn {
  width: 100%; margin-top: 8px; font-size: 11px; padding: 7px;
  background: rgba(148,163,184,0.08); color: var(--c-text-mute);
  border: 1px solid rgba(148,163,184,0.2); border-radius: 5px;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px;
}
.sc-cust-new-btn:hover:not(:disabled) { background: rgba(148,163,184,0.16); color: var(--c-text); }
.sc-cust-new-btn:disabled { opacity:.5; cursor:not-allowed; }

/* v1.72: カレンダー + 詳細パネルを横並びにする flex コンテナ */
.sc-calendar-container {
  display: flex; flex: 1; min-height: 0; overflow: hidden;
}
.sc-wrap { display: flex; flex-direction: column; flex: 1; min-width: 0; height: 100%; overflow: hidden; }
.sc-toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 18px 12px; flex-shrink: 0; border-bottom: 1px solid var(--c-border);
}
.sc-month-nav { display: flex; align-items: center; gap: 8px; }
.sc-nav-btn {
  background: transparent; border: 1px solid var(--c-border); color: var(--c-text-sub);
  width: 28px; height: 28px; border-radius: 6px; font-size: 18px; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.15s;
}
.sc-nav-btn:hover { border-color: rgba(255,255,255,0.3); color: var(--c-text); }
.sc-month-label { font-size: 15px; font-weight: 700; color: var(--c-text); min-width: 110px; }
.sc-today-btn {
  background: transparent; border: 1px solid var(--c-border); color: var(--c-text-sub);
  font-size: 11.5px; font-weight: 600; padding: 5px 12px; border-radius: 6px;
  cursor: pointer; font-family: inherit; transition: all 0.15s;
}
.sc-today-btn:hover { border-color: rgba(255,255,255,0.3); color: var(--c-text); }
.sc-legend { display: flex; gap: 10px; margin-left: auto; align-items: center; flex-wrap: wrap; }
.sc-legend-item { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--c-text-sub); }
.sc-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sc-legend-dot.sc-dot-project { background: #39bdf8; }
.sc-legend-dot.sc-dot-session { background: #4ade80; }
.sc-legend-dot.sc-dot-application { background: #fbbf24; }
.sc-legend-dot.sc-dot-reservation { background: #fb923c; }
.sc-cal-area {
  flex: 1; overflow: hidden; display: flex; flex-direction: column; padding: 10px 14px 14px;
}
.sc-cal-header { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 2px; }
.sc-cal-hd {
  text-align: center; font-size: 10px; font-weight: 600; color: var(--c-text-sub);
  padding: 4px 0; text-transform: uppercase; letter-spacing: 0.05em;
}
.sc-cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 1px; background: var(--c-border);
  border: 1px solid var(--c-border); border-radius: 10px; overflow: hidden; flex: 1;
}
.sc-day-cell {
  background: var(--c-surface); padding: 5px; cursor: pointer;
  min-height: 80px; transition: background 0.1s; overflow: hidden;
}
.sc-day-cell:hover { background: rgba(255,255,255,0.03); }
.sc-day-cell.sc-today { background: rgba(57,189,248,0.05); }
.sc-day-cell.sc-selected { background: rgba(57,189,248,0.08); outline: 1px inset rgba(57,189,248,0.4); }
.sc-day-cell.sc-other-month { background: rgba(0,0,0,0.2); }
.sc-day-cell.sc-sunday .sc-day-num { color: #f87171; }
.sc-day-cell.sc-saturday .sc-day-num { color: #60a5fa; }
.sc-day-num { font-size: 11px; color: var(--c-text-sub); display: block; margin-bottom: 3px; }
.sc-today-badge {
  width: 20px; height: 20px; border-radius: 50%; background: var(--c-blue);
  color: #000; font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.sc-dot {
  font-size: 9.5px; padding: 1px 4px; border-radius: 3px;
  margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%; display: block;
}
.sc-dot.sc-dot-project     { background: rgba(57,189,248,0.15); color: #39bdf8; }
.sc-dot.sc-dot-session     { background: rgba(74,222,128,0.15); color: #4ade80; }
.sc-dot.sc-dot-application { background: rgba(251,191,36,0.15); color: #fbbf24; }
.sc-dot.sc-dot-reservation { background: rgba(251,146,60,0.15); color: #fb923c; }
.sc-dot-more { font-size: 9px; color: var(--c-text-mute); padding: 0 2px; }
/* v1.72: 日付詳細パネル — カレンダー横にインライン配置、開閉で幅アニメーション */
.sc-day-panel {
  flex: 0 0 0;
  width: 0;
  background: var(--c-surface);
  border-left: 1px solid transparent;
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: flex-basis 0.24s cubic-bezier(.4,0,.2,1), width 0.24s cubic-bezier(.4,0,.2,1), border-color 0.2s;
}
.sc-day-panel.open {
  flex: 0 0 320px;
  width: 320px;
  border-left-color: var(--c-border);
}
.sc-day-panel-hd {
  display: flex; align-items: center; padding: 14px 16px;
  border-bottom: 1px solid var(--c-border); flex-shrink: 0;
}
.sc-day-panel-title { font-size: 14px; font-weight: 700; color: var(--c-text); flex: 1; }
.sc-day-close {
  background: transparent; border: none; color: var(--c-text-sub); cursor: pointer;
  font-size: 18px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  border-radius: 6px; transition: background 0.15s;
}
.sc-day-close:hover { background: rgba(255,255,255,0.07); color: var(--c-text); }
.sc-day-list { flex: 1; overflow-y: auto; padding: 10px 12px; }
.sc-day-section { margin-bottom: 12px; }
.sc-day-section-label {
  font-size: 10px; font-weight: 700; color: var(--c-text-mute); text-transform: uppercase;
  letter-spacing: 0.08em; padding: 0 2px; margin-bottom: 5px;
}
.sc-day-item {
  background: var(--c-surface-2); border-radius: 8px; padding: 7px 9px;
  margin-bottom: 4px; cursor: default; transition: background 0.15s;
}
.sc-day-item.sc-clickable { cursor: pointer; }
.sc-day-item.sc-clickable:hover { background: rgba(255,255,255,0.07); }
.sc-day-item-top { display: flex; align-items: center; gap: 5px; }
.sc-day-item-name { font-size: 11.5px; font-weight: 600; color: var(--c-text); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-day-item-time { font-size: 10px; color: var(--c-text-sub); flex-shrink: 0; }
.sc-day-item-sub { font-size: 10px; color: var(--c-text-mute); margin-top: 1px; }
.sc-day-badge {
  font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 8px;
  letter-spacing: 0.02em; flex-shrink: 0; white-space: nowrap;
}
.sc-badge-project     { background: rgba(57,189,248,0.15); color: #39bdf8; }
.sc-badge-session     { background: rgba(74,222,128,0.15); color: #4ade80; }
.sc-badge-application { background: rgba(251,191,36,0.15); color: #fbbf24; }
.sc-badge-reservation { background: rgba(251,146,60,0.15); color: #fb923c; }
.sc-badge-cancelled   { background: rgba(148,163,184,0.15); color: var(--c-text-mute); }

/* v1.72: 時系列セパレーター (詳細パネル) */
.sc-day-timesep {
  display: flex; align-items: center; gap: 8px;
  font-size: 10px; font-weight: 700; color: var(--c-text-mute);
  letter-spacing: 0.06em;
  margin: 12px 0 6px;
}
.sc-day-timesep::before,
.sc-day-timesep::after {
  content: ''; flex: 1; height: 1px; background: var(--c-border);
}
.sc-day-timesep-notime { color: var(--c-text-sub); }

/* v1.72: 週ビュー (横軸=日付、縦軸=時間) */
.sc-week-area {
  flex: 1;
  position: relative;
  min-height: 0;
  padding: 10px 14px 14px;
}
.sc-week-scroll-wrap {
  position: absolute;
  top: 10px;
  right: 14px;
  bottom: 14px;
  left: 14px;
  overflow: auto;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  scrollbar-width: thin;
  /* v1.72.3: 横スクロールでブラウザ戻る/進むを発火させない */
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
}
.sc-week-scroll-wrap::-webkit-scrollbar { width: 10px; height: 10px; }
.sc-week-scroll-wrap::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 5px; }
.sc-week-scroll-wrap::-webkit-scrollbar-thumb:hover { background: var(--c-text-mute); }
.sc-week-header {
  display: grid;
  /* v1.72.2: 横スクロール対応 — JS で grid-template-columns を動的設定 */
  background: var(--c-surface-2);
  position: sticky;
  top: 0;
  z-index: 5;
  border-bottom: 1px solid var(--c-border);
  flex-shrink: 0;
  min-width: fit-content;
}
.sc-week-hd-time { /* 左上の空セル */ }
.sc-week-hd-day {
  text-align: center; padding: 6px 4px;
  border-left: 1px solid var(--c-border);
  font-size: 11px; color: var(--c-text-sub);
  min-width: 150px;
  cursor: pointer;
}
.sc-week-hd-day.sc-week-today { background: rgba(57,189,248,0.10); color: var(--c-accent); }
.sc-week-hd-day .sc-week-hd-dow { font-size: 10px; font-weight: 600; letter-spacing: 0.04em; }
.sc-week-hd-day .sc-week-hd-num { font-size: 13px; font-weight: 700; color: var(--c-text); }
.sc-week-hd-day.sc-week-sun .sc-week-hd-num { color: #f87171; }
.sc-week-hd-day.sc-week-sat .sc-week-hd-num { color: #60a5fa; }
/* v1.72.4: 月境界を視覚化 */
.sc-week-hd-day.sc-week-month-start { border-left: 2px solid var(--c-accent); }
.sc-week-day-col.sc-week-month-start { border-left: 2px solid var(--c-accent); }

.sc-week-allday {
  display: grid;
  /* v1.72.2: 横スクロール対応 — JS で grid-template-columns を動的設定 */
  background: var(--c-surface);
  flex-shrink: 0;
  min-height: 28px;
  max-height: 110px;
  border-bottom: 1px solid var(--c-border);
  position: sticky;
  top: 48px;
  z-index: 4;
  min-width: fit-content;
}
.sc-week-allday-label {
  font-size: 9px; color: var(--c-text-mute);
  padding: 4px 6px 4px 8px;
  display: flex; align-items: flex-start;
  border-right: 1px solid var(--c-border);
  background: var(--c-surface-2);
  width: 56px;
  position: sticky;
  left: 0;
  box-sizing: border-box;
}
.sc-week-allday-col {
  border-left: 1px solid var(--c-border);
  padding: 3px 3px;
  display: flex; flex-direction: column; gap: 2px;
  min-height: 28px;
  min-width: 150px;
  cursor: pointer;
}
.sc-week-allday-col:first-of-type { border-left: none; }
.sc-week-allday-evt {
  font-size: 10px;
  padding: 2px 5px;
  border-radius: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer;
}

.sc-week-grid {
  display: grid;
  /* v1.72.2: 横スクロール対応 — JS で grid-template-columns を動的設定 */
  position: relative;
  min-width: fit-content;
}
.sc-week-time-col {
  background: var(--c-surface-2);
  position: sticky;
  left: 0;
  z-index: 3;
  border-right: 1px solid var(--c-border);
  width: 56px;
}
.sc-week-hd-time {
  background: var(--c-surface-2);
  position: sticky;
  left: 0;
  z-index: 6;
  width: 56px;
  box-sizing: border-box;
  border-right: 1px solid var(--c-border);
}
.sc-week-time-row {
  height: 48px;
  width: 56px;
  font-size: 10px; color: var(--c-text-mute);
  text-align: right;
  padding: 2px 6px 0 0;
  border-bottom: 1px solid var(--c-border);
  box-sizing: border-box;
}
.sc-week-day-col {
  position: relative;
  border-left: 1px solid var(--c-border);
  min-width: 150px;
}
.sc-week-day-col:first-of-type { border-left: none; }
.sc-week-day-col.sc-week-today-col { background: rgba(57,189,248,0.04); }
.sc-week-hour-cell {
  height: 48px;
  border-bottom: 1px solid var(--c-border);
  cursor: pointer;
  transition: background 0.1s;
}
.sc-week-hour-cell:hover { background: rgba(255,255,255,0.03); }
body.theme-light .sc-week-hour-cell:hover { background: rgba(0,0,0,0.025); }
body.theme-warm  .sc-week-hour-cell:hover { background: rgba(61,53,49,0.025); }

/* 週ビューのイベントブロック (絶対配置) */
.sc-week-event {
  position: absolute;
  left: 2px; right: 2px;
  padding: 3px 6px;
  border-radius: 5px;
  font-size: 10px; line-height: 1.25;
  overflow: hidden;
  cursor: pointer;
  z-index: 2;
  border-left: 3px solid;
}
.sc-week-event-time { display: block; font-weight: 700; opacity: 0.85; }
.sc-week-event-name { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-week-event.sc-evt-project {
  background: rgba(57,189,248,0.15); color: #39bdf8; border-left-color: #39bdf8;
}
.sc-week-event.sc-evt-session {
  background: rgba(74,222,128,0.15); color: #4ade80; border-left-color: #4ade80;
}
.sc-week-event.sc-evt-application {
  background: rgba(251,191,36,0.15); color: #fbbf24; border-left-color: #fbbf24;
}
.sc-week-event.sc-evt-reservation {
  background: rgba(251,146,60,0.15); color: #fb923c; border-left-color: #fb923c;
}
body.theme-warm .sc-week-event.sc-evt-project     { background: rgba(74,140,158,0.14); color: #4A8C9E; border-left-color: #4A8C9E; }
body.theme-warm .sc-week-event.sc-evt-session     { background: rgba(5,138,90,0.12); color: #048A5A; border-left-color: #048A5A; }
body.theme-warm .sc-week-event.sc-evt-application { background: rgba(217,119,6,0.14); color: #D97706; border-left-color: #D97706; }
body.theme-warm .sc-week-event.sc-evt-reservation { background: rgba(208,106,80,0.14); color: #D06A50; border-left-color: #D06A50; }

/* ── StateReservations: 3パネルレイアウト ── */
#state-reservations { overflow: hidden; }
#state-reservations.active { display: flex; flex-direction: column; }
.bk-3panel-wrap { display: flex; flex: 1; min-height: 0; overflow: hidden; }
.bk-panel-list {
  width: 300px; flex-shrink: 0; border-right: 1px solid var(--c-border);
  display: flex; flex-direction: column; overflow: hidden; min-height: 0;
}
.bk-panel-edit {
  flex: 1; min-width: 0; border-right: 1px solid var(--c-border);
  display: flex; flex-direction: column; overflow: hidden; min-height: 0;
}
.bk-panel-preview {
  width: 300px; flex-shrink: 0; display: flex; flex-direction: column;
  overflow: hidden; min-height: 0;
}
.bk-panel-hd {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 12px; border-bottom: 1px solid var(--c-border); flex-shrink: 0;
}
.bk-panel-title { font-size: 12.5px; font-weight: 700; color: var(--c-text); flex: 1; }
/* 編集パネル内部 */
.bk-edit-empty {
  flex: 1; display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--c-text-mute); text-align: center; padding: 20px;
}
.bk-edit-form { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.bk-edit-hd {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px; border-bottom: 1px solid var(--c-border); flex-shrink: 0;
}
.bk-edit-title { font-size: 14px; font-weight: 800; color: var(--c-text); flex: 1; }
.bk-edit-actions { display: flex; gap: 8px; align-items: center; }
.bk-edit-body { flex: 1; overflow-y: auto; padding: 14px 16px; }
.bk-edit-sec {
  background: rgba(255,255,255,0.03); border: 1px solid var(--c-border); border-radius: 12px;
  padding: 14px; margin-bottom: 12px;
}
.bk-edit-sec-title {
  font-size: 10.5px; font-weight: 700; color: var(--c-text-sub); text-transform: uppercase;
  letter-spacing: 0.08em; margin-bottom: 10px;
}
.bk-btn-shop {
  background: transparent; border: 1px solid var(--c-border); color: var(--c-text-sub);
  font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 6px;
  cursor: pointer; font-family: inherit; transition: all 0.15s;
}
.bk-btn-shop:hover { border-color: rgba(255,255,255,0.3); color: var(--c-text); }
.bk-btn-create {
  background: rgba(57,189,248,0.15); color: #39bdf8;
  border: 1px solid rgba(57,189,248,0.3); font-size: 11px; font-weight: 700;
  padding: 4px 9px; border-radius: 6px; cursor: pointer; font-family: inherit; transition: background 0.15s;
}
.bk-btn-create:hover { background: rgba(57,189,248,0.25); }
.bk-service-list { flex: 1; overflow-y: auto; padding: 8px; }
.bk-service-empty {
  text-align: center; padding: 40px 16px;
  font-size: 12px; color: var(--c-text-mute); line-height: 1.7;
}
.bk-service-card {
  background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: 10px;
  padding: 9px 11px; margin-bottom: 6px; cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.bk-service-card:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.2); }
.bk-service-card.active { border-color: rgba(57,189,248,0.5); background: rgba(57,189,248,0.07); }
.bk-service-card-name { font-size: 13px; font-weight: 700; color: var(--c-text); margin-bottom: 4px; }
.bk-service-card-meta { font-size: 11px; color: var(--c-text-sub); display: flex; gap: 8px; align-items: center; }
.bk-service-card-price { color: var(--c-accent); font-weight: 600; }
.bk-svc-badge {
  font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 8px;
  background: rgba(74,222,128,0.15); color: #4ade80;
}
.bk-svc-badge.hidden { background: rgba(148,163,184,0.12); color: var(--c-text-mute); }
/* 右パネル プレビュー */
.bk-preview-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px; border-bottom: 1px solid var(--c-border); flex-shrink: 0;
}
.bk-preview-title { font-size: 11.5px; font-weight: 600; color: var(--c-text-sub); }
.bk-preview-share-btn {
  background: transparent; border: 1px solid var(--c-border); color: var(--c-text-sub);
  font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 6px;
  cursor: pointer; font-family: inherit; transition: all 0.15s; display: flex; align-items: center; gap: 4px;
}
.bk-preview-share-btn:hover { border-color: rgba(255,255,255,0.3); color: var(--c-text); }
.aq-share-dropdown {
  position: absolute; top: calc(100% + 6px); right: 0;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,0.32);
  overflow: hidden; z-index: 200; min-width: 140px;
}
.aq-share-opt {
  display: block; width: 100%; text-align: left;
  padding: 10px 14px; font-size: 12px; font-weight: 500;
  color: var(--c-text); background: transparent; border: none;
  cursor: pointer; font-family: inherit; transition: background 0.12s;
}
.aq-share-opt:hover { background: var(--c-surface-2); }
.aq-share-opt + .aq-share-opt { border-top: 1px solid var(--c-border); }

/* ── kzShareMenu（共有リンク選択ポップオーバー）── */
.kz-share-menu {
  position: fixed;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.42);
  overflow: hidden;
  z-index: 100000;
  min-width: 210px;
  white-space: nowrap;
}
.kz-share-opt {
  display: flex; align-items: center; gap: 8px;
  width: 100%; text-align: left;
  padding: 11px 14px; font-size: 12.5px; font-weight: 500;
  color: var(--c-text); background: transparent; border: none;
  cursor: pointer; font-family: inherit; transition: background 0.12s;
}
.kz-share-opt:hover { background: var(--c-surface-2); }
.kz-share-opt + .kz-share-opt { border-top: 1px solid var(--c-border); }
.bk-preview-nav {
  display: flex; border-bottom: 1px solid var(--c-border); flex-shrink: 0;
}
.bk-preview-nav-tab {
  flex: 1; text-align: center; font-size: 10.5px; font-weight: 600;
  padding: 7px 0; color: var(--c-text-mute); cursor: pointer;
  border-bottom: 2px solid transparent; transition: all 0.15s;
}
.bk-preview-nav-tab.active { color: var(--c-accent); border-bottom-color: var(--c-accent); }
.bk-preview-nav-tab:hover:not(.active) { color: var(--c-text-sub); }
.bk-preview-body {
  flex: 1; overflow-y: auto; display: flex; justify-content: center;
  padding: 14px 8px; background: var(--c-surface-2);
}
.bk-preview-phone {
  width: 238px; background: #fff; border-radius: 28px;
  box-shadow: 0 8px 36px rgba(0,0,0,0.45); overflow: hidden; border: 7px solid #18182e;
  flex-shrink: 0; align-self: flex-start;
}
.bk-phone-bar { background: #f0f0f4; height: 10px; display: flex; justify-content: center; }
.bk-phone-notch { width: 56px; height: 8px; background: #18182e; border-radius: 0 0 8px 8px; }
.bk-phone-content { padding: 14px; background: #fff; }
.bk-phone-shop-logo {
  width: 46px; height: 46px; border-radius: 12px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 20px; font-weight: 800; margin-bottom: 7px;
}
.bk-phone-shop-name { font-size: 14px; font-weight: 800; color: #111; margin-bottom: 3px; }
.bk-phone-shop-desc { font-size: 10px; color: #666; margin-bottom: 12px; line-height: 1.5; }
.bk-phone-section-label { font-size: 9.5px; font-weight: 700; color: #999; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 7px; }
.bk-phone-svc-card {
  border: 1.5px solid #eee; border-radius: 9px; padding: 9px 10px; margin-bottom: 7px;
}
.bk-phone-svc-name { font-size: 12px; font-weight: 700; color: #111; margin-bottom: 3px; }
.bk-phone-svc-meta { font-size: 9.5px; color: #888; display: flex; justify-content: space-between; }
.bk-phone-svc-price { font-weight: 700; color: #333; }
.bk-phone-empty { text-align: center; padding: 24px 10px; font-size: 10px; color: #aaa; line-height: 1.6; }
.bk-phone-powered { font-size: 9px; color: #ccc; text-align: center; padding: 6px 0 10px; }
/* プレビュー各画面パーツ */
.bk-ph-back-row { font-size: 9.5px; color: #999; margin-bottom: 10px; cursor: pointer; }
.bk-ph-detail-title { font-size: 14px; font-weight: 800; color: #111; margin-bottom: 5px; line-height: 1.3; }
.bk-ph-detail-meta { display: flex; gap: 8px; align-items: baseline; margin-bottom: 8px; }
.bk-ph-price { font-size: 14px; font-weight: 800; color: #333; }
.bk-ph-dur { font-size: 10px; color: #999; }
.bk-ph-detail-desc { font-size: 10px; color: #555; line-height: 1.5; margin-bottom: 10px; }
.bk-ph-detail-section {
  font-size: 8.5px; font-weight: 700; color: #aaa; text-transform: uppercase;
  letter-spacing: 0.06em; margin: 8px 0 3px;
}
.bk-ph-detail-text { font-size: 10px; color: #666; line-height: 1.5; margin-bottom: 4px; }
.bk-ph-reserve-btn {
  display: block; width: 100%; background: #222; color: #fff; border: none;
  font-size: 11px; font-weight: 700; padding: 9px; border-radius: 8px;
  cursor: pointer; font-family: inherit; margin-top: 14px; text-align: center; box-sizing: border-box;
}
.bk-ph-form-hd { font-size: 12px; font-weight: 800; color: #111; margin-bottom: 10px; }
.bk-ph-field { margin-bottom: 7px; }
.bk-ph-field-lbl { font-size: 9px; font-weight: 600; color: #777; margin-bottom: 3px; display: flex; align-items: center; gap: 4px; }
.bk-ph-req { font-size: 7.5px; color: #e06b8b; font-weight: 700; padding: 1px 4px; background: rgba(224,107,139,0.1); border-radius: 3px; }
.bk-ph-field-input { background: #f5f6fa; border: 1px solid #e8eaf0; border-radius: 6px; height: 22px; }
.bk-ph-confirm-card { background: #f8f9fb; border: 1px solid #eee; border-radius: 8px; padding: 10px; }
.bk-ph-confirm-row {
  display: flex; justify-content: space-between; padding: 5px 0;
  border-bottom: 1px solid #eef0f3; font-size: 9.5px; color: #777;
}
.bk-ph-confirm-row:last-child { border-bottom: none; }
.bk-ph-confirm-row span:last-child { font-weight: 700; color: #333; max-width: 55%; text-align: right; }
.bk-form-row { display: flex; gap: 10px; margin-bottom: 9px; }
.bk-form-row:last-child { margin-bottom: 0; }
.bk-form-group { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.bk-form-label { font-size: 11px; font-weight: 600; color: var(--c-text-sub); }
.bk-form-input, .bk-form-select, .bk-form-textarea {
  background: var(--c-surface-2); border: 1px solid var(--c-border); color: var(--c-text);
  font-size: 13px; padding: 7px 10px; border-radius: 8px; width: 100%;
  box-sizing: border-box; font-family: inherit; transition: border-color 0.15s;
}
.bk-form-input:focus, .bk-form-select:focus, .bk-form-textarea:focus { outline: none; border-color: rgba(57,189,248,0.5); }
.bk-form-textarea { resize: vertical; min-height: 68px; }
.bk-dur-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.bk-dur-input {
  background: var(--c-surface-2); border: 1px solid var(--c-border); color: var(--c-text);
  font-size: 13px; padding: 7px 8px; border-radius: 8px; width: 64px;
  box-sizing: border-box; font-family: inherit; text-align: center;
}
.bk-dur-lbl { font-size: 11px; color: var(--c-text-sub); }
.bk-toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 5px 0; }
.bk-toggle-lbl { font-size: 12px; color: var(--c-text); }
.bk-toggle-sub { font-size: 10px; color: var(--c-text-mute); margin-top: 2px; }
.bk-cb-row { display: flex; flex-wrap: wrap; gap: 8px; }
.bk-cb-item {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--c-text-sub); cursor: pointer;
}
.bk-cb-item input[type=checkbox] { accent-color: var(--c-accent); width: auto; }
.bk-radio-group { display: flex; gap: 8px; }
.bk-radio-card {
  flex: 1; border: 1.5px solid var(--c-border); border-radius: 10px; padding: 9px 11px;
  cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.bk-radio-card.selected { border-color: rgba(57,189,248,0.5); background: rgba(57,189,248,0.07); }
.bk-radio-card-title { font-size: 12px; font-weight: 700; color: var(--c-text); margin-bottom: 3px; }
.bk-radio-card-sub { font-size: 10px; color: var(--c-text-mute); line-height: 1.4; }
.bk-btn-delete {
  background: transparent; border: 1px solid rgba(239,68,68,0.4); color: #ef4444;
  font-size: 12px; font-weight: 700; padding: 7px 13px; border-radius: 8px;
  cursor: pointer; font-family: inherit; transition: all 0.15s;
}
.bk-btn-delete:hover { background: rgba(239,68,68,0.1); }
.bk-btn-save {
  background: rgba(57,189,248,0.15); color: #39bdf8; border: 1px solid rgba(57,189,248,0.4);
  font-size: 13px; font-weight: 700; padding: 8px 18px; border-radius: 8px;
  cursor: pointer; font-family: inherit; transition: background 0.15s;
}
.bk-btn-save:hover { background: rgba(57,189,248,0.25); }
.bk-btn-save:disabled { opacity: .5; cursor: not-allowed; }

/* Booking service editor – extended styles */
.bk-sec-type { transition: none; }
.bk-fixed-fields { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.bk-fixed-field-item { display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--c-text-sub); background:var(--c-bg); border:1px solid var(--c-border); border-radius:6px; padding:4px 10px; }
.bk-fixed-badge { font-size:10px; color:#888; background:#f0f0f4; border-radius:4px; padding:1px 6px; }
.bk-hours-grid { display:flex; flex-direction:column; gap:6px; margin-top:4px; }
.bk-hours-row { display:grid; grid-template-columns:30px 36px 1fr; align-items:center; gap:8px; }
.bk-hours-day { font-size:12px; font-weight:700; color:var(--c-text-sub); text-align:center; }
.bk-hours-times { display:flex; align-items:center; gap:6px; }
.bk-hours-time-input { width:90px; padding:5px 8px; border:1px solid var(--c-border); border-radius:6px; font-size:12px; color:var(--c-text); background:var(--c-card); font-family:inherit; }
.bk-hours-time-input:disabled { background:var(--c-bg); color:var(--c-text-sub); }
.bk-slots-list { display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.bk-slot-item { display:flex; align-items:center; gap:8px; background:var(--c-bg); border:1px solid var(--c-border); border-radius:8px; padding:8px 12px; font-size:12px; }
.bk-slot-item-info { flex:1; }
.bk-slot-item-date { font-weight:700; color:var(--c-text); }
.bk-slot-item-meta { color:var(--c-text-sub); margin-top:1px; }
.bk-slot-item-del { background:none; border:none; color:#d64040; cursor:pointer; font-size:13px; padding:2px 6px; border-radius:4px; }
.bk-slot-item-del:hover { background:rgba(214,64,64,.08); }
.bk-add-slot-row { display:flex; gap:6px; align-items:center; margin-bottom:8px; flex-wrap:wrap; }
.bk-btn-slot-add { padding:6px 14px; background:var(--c-accent); color:#fff; border:none; border-radius:7px; font-size:12px; font-weight:700; cursor:pointer; font-family:inherit; white-space:nowrap; }
.bk-btn-slot-cancel { padding:6px 10px; background:none; border:1px solid var(--c-border); color:var(--c-text-sub); border-radius:7px; font-size:12px; cursor:pointer; font-family:inherit; }
.bk-btn-add-slot { display:block; width:100%; padding:8px; background:none; border:1.5px dashed var(--c-border); color:var(--c-text-sub); border-radius:8px; font-size:12px; cursor:pointer; font-family:inherit; text-align:center; margin-top:4px; }
.bk-btn-add-slot:hover { border-color:var(--c-accent); color:var(--c-accent); }
.bk-btn-add-q { padding:4px 10px; background:none; border:1px solid var(--c-accent); color:var(--c-accent); border-radius:6px; font-size:11px; font-weight:700; cursor:pointer; font-family:inherit; }
.bk-q-item { display:flex; gap:6px; align-items:center; margin-bottom:6px; }
.bk-q-input { flex:1; padding:7px 10px; border:1px solid var(--c-border); border-radius:7px; font-size:12px; color:var(--c-text); background:var(--c-card); font-family:inherit; outline:none; }
.bk-q-input:focus { border-color:var(--c-accent); }
.bk-q-req { display:flex; align-items:center; gap:3px; font-size:11px; color:var(--c-text-sub); white-space:nowrap; }
.bk-q-del { background:none; border:none; color:#d64040; cursor:pointer; font-size:14px; padding:2px 6px; }
.bk-slots-empty { font-size:12px; color:var(--c-text-sub); text-align:center; padding:16px; background:var(--c-bg); border-radius:8px; margin-bottom:8px; }

/* Booking service editor – tabs */
#bk-edit-form #bk-svc-tabs{display:flex;border-bottom:1px solid var(--c-border);background:var(--c-card);flex-shrink:0;overflow-x:auto}
#bk-edit-form .bk-svc-tab{flex:1;text-align:center;padding:10px 6px;font-size:11px;font-weight:600;color:var(--c-text-sub);border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap;transition:color .15s,border-color .15s;margin-bottom:-1px}
#bk-edit-form .bk-svc-tab:hover{color:var(--c-text)}
#bk-edit-form .bk-svc-tab.active{color:var(--c-accent);border-bottom-color:var(--c-accent);font-weight:700}
#bk-edit-form #bk-svc-body{overflow-y:auto;flex:1}
#bk-edit-form .bk-svc-panel{display:none;padding:16px;flex-direction:column;gap:0}
#bk-edit-form .bk-svc-panel.active{display:block}
/* Form field grid */
.bk-ff-grid{width:100%;border-collapse:collapse}
.bk-ff-hd{display:grid;grid-template-columns:1fr 48px 48px;gap:4px;padding:4px 8px;font-size:10px;font-weight:700;color:var(--c-text-sub);text-align:center}
.bk-ff-hd span:first-child{text-align:left}
.bk-ff-row{display:grid;grid-template-columns:1fr 48px 48px;gap:4px;align-items:center;padding:7px 8px;border-radius:6px;margin-bottom:2px;background:var(--c-bg)}
.bk-ff-row:nth-child(even){background:var(--c-card)}
.bk-ff-name{font-size:12px;color:var(--c-text)}
.bk-ff-always{font-size:10px;color:var(--c-text-sub);text-align:center}
.bk-ff-row label{display:flex;justify-content:center}
/* Image list */
.bk-img-thumb-wrap{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.bk-img-thumb{position:relative;width:80px;height:80px;border-radius:7px;overflow:hidden;border:1px solid var(--c-border);flex-shrink:0}
.bk-img-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.bk-img-thumb-del{position:absolute;top:3px;right:3px;background:rgba(0,0,0,0.65);color:#fff;border:none;width:18px;height:18px;border-radius:50%;cursor:pointer;font-size:10px;line-height:1;padding:0;display:flex;align-items:center;justify-content:center}
/* Option item */
.bk-opt-item{background:var(--c-bg);border:1px solid var(--c-border);border-radius:8px;padding:10px 12px;margin-bottom:8px}
.bk-opt-row{display:flex;gap:6px;align-items:center;margin-bottom:6px}
.bk-opt-row:last-child{margin-bottom:0}
.bk-opt-name-input{flex:1;padding:7px 10px;border:1px solid var(--c-border);border-radius:7px;font-size:12px;color:var(--c-text);background:var(--c-card);font-family:inherit;outline:none}
.bk-opt-name-input:focus{border-color:var(--c-accent)}
.bk-opt-meta-label{font-size:11px;color:var(--c-text-sub);white-space:nowrap}
.bk-opt-num-input{width:80px;padding:6px 8px;border:1px solid var(--c-border);border-radius:6px;font-size:12px;text-align:right;background:var(--c-card);color:var(--c-text);font-family:inherit;outline:none}
.bk-opt-del{background:none;border:none;color:#d64040;cursor:pointer;font-size:14px;padding:2px 6px;flex-shrink:0}
/* Custom question types */
.bk-q-item{margin-bottom:8px;background:var(--c-bg);border:1px solid var(--c-border);border-radius:8px;padding:8px 10px}
.bk-q-row1{display:flex;gap:6px;align-items:center;margin-bottom:6px}
.bk-q-type-sel{padding:5px 8px;border:1px solid var(--c-border);border-radius:6px;font-size:11px;background:var(--c-card);color:var(--c-text);font-family:inherit;cursor:pointer}
.bk-q-row2{display:flex;gap:6px;align-items:center}
.bk-q-choices-wrap{margin-top:6px;padding-top:6px;border-top:1px solid var(--c-border)}
.bk-q-choice-row{display:flex;gap:4px;align-items:center;margin-bottom:4px}
.bk-q-choice-input{flex:1;padding:5px 8px;border:1px solid var(--c-border);border-radius:6px;font-size:11px;background:var(--c-card);color:var(--c-text);font-family:inherit;outline:none}
.bk-q-choice-del{background:none;border:none;color:#d64040;cursor:pointer;font-size:13px;padding:1px 4px}
.bk-btn-add-choice{font-size:11px;color:var(--c-accent);background:none;border:none;cursor:pointer;font-family:inherit;padding:0}
/* Group booking max row */
#bk-group-max-row{margin-top:8px}

/* ════════════════════════════════════════════════
   v1.35.1  スタッフ招待ボタン: デザイン整備
   ════════════════════════════════════════════════ */
#sf-edit-modal #sf-em-btnInvite {
  flex: 2;
  padding: 11px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.03em;
  transition: background .15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
#sf-edit-modal #sf-em-btnInvite:hover:not(:disabled) {
  background: rgba(167,139,250,0.28) !important;
}
#sf-edit-modal #sf-em-btnInvite:disabled {
  opacity: .5; cursor: not-allowed;
}

/* ════════════════════════════════════════════════
   v1.46.0  ダッシュボード設定: DnDアニメーション強化（lift/slide/snap-in）、プレビュー3列
   v1.47.0  fix: ds-drag-dragging の pointer-events:none を削除しドラッグ動作を修正
   v1.48.0  refactor: HTML5 DnD → SortableJS に移行（ghost/drag クラスに変更）
   v1.49.0  feat: ToDoリスト統合・完了モーダル・ステータス別todoDays入力フィールド追加
   ════════════════════════════════════════════════ */

/* ── ダッシュボード st-card カラードット ── */
.st-card-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
  flex-shrink: 0;
}
.st-card-label {
  display: flex;
  align-items: center;
}

/* ── settings-sp-content: ダッシュボードセクション用パディング無効 ── */
.settings-sp-content--no-pad {
  padding: 0 !important;
  overflow: hidden !important;
}
#st-section-dashboard.active {
  display: flex !important;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
#ds-app {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  position: relative;
}

/* ── ヘッダー ── */
.ds-header {
  padding: 14px 20px 12px;
  border-bottom: 1px solid var(--c-border);
  flex-shrink: 0;
}
.ds-header-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--c-text);
}
.ds-header-sub {
  font-size: 11px;
  color: var(--c-text-mute);
  margin-top: 3px;
}

/* ── 2パネルラッパー ── */
.ds-wrap {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
}

/* ── 左パネル: カード選択 ── */
.ds-sidebar {
  width: 260px;
  flex-shrink: 0;
  border-right: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  background: var(--c-surface2, rgba(255,255,255,0.02));
  overflow: hidden;
}
.ds-sidebar-hd {
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-shrink: 0;
}
.ds-side-tabs {
  display: flex;
  border-bottom: 1px solid var(--c-border);
  flex-shrink: 0;
}
.ds-side-tab {
  flex: 1;
  padding: 9px 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--c-text-sub);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-family: inherit;
  transition: color .12s, border-color .12s;
  white-space: nowrap;
}
.ds-side-tab:hover { color: var(--c-text); }
.ds-side-tab-active {
  color: var(--c-accent) !important;
  border-bottom-color: var(--c-accent) !important;
}
.ds-side-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}
.ds-sidebar-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--c-text);
}
.ds-sidebar-badge {
  font-size: 10px;
  color: var(--c-text-mute);
  background: var(--c-hover);
  padding: 2px 7px;
  border-radius: 10px;
  font-weight: 600;
}
.ds-card-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 6px;
}
.ds-card-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s;
  font-size: 12px;
  color: var(--c-text);
}
.ds-card-item:hover { background: var(--c-hover); }
.ds-card-section-hd {
  font-size: 10px;
  font-weight: 700;
  color: var(--c-text-mute);
  padding: 8px 10px 3px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ds-card-check {
  width: 14px; height: 14px;
  accent-color: var(--c-accent);
  cursor: pointer;
  flex-shrink: 0;
}
.ds-card-label {
  flex: 1;
  font-weight: 500;
}
.ds-card-unit {
  font-size: 10.5px;
  color: var(--c-text-mute);
}
.ds-card-dot-sm {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ds-card-row {
  display: flex;
  align-items: center;
  margin: 1px 4px;
}
.ds-card-row .ds-card-item {
  flex: 1;
  margin: 0;
}
.ds-move-btns {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0 2px;
  flex-shrink: 0;
}
.ds-move-btn {
  background: none;
  border: none;
  color: var(--c-text-mute);
  cursor: pointer;
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 13px;
  line-height: 1;
  transition: color .12s, background .12s;
  font-family: inherit;
}
.ds-move-btn:hover:not(:disabled) {
  color: var(--c-text);
  background: var(--c-hover);
}
.ds-move-btn:disabled { opacity: 0.2; cursor: default; }

/* ── 右パネル: ステータス管理 ── */
.ds-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}
.ds-main-hd {
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--c-border);
  flex-shrink: 0;
}
.ds-main-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--c-text);
}
.ds-main-note {
  font-size: 11px;
  color: var(--c-text-mute);
  padding: 6px 12px 5px;
  border-bottom: 1px solid var(--c-border);
  line-height: 1.5;
  flex-shrink: 0;
}
.ds-status-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 8px 4px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ds-list-hint {
  font-size: 11px;
  color: var(--c-text-mute);
  line-height: 1.6;
  padding: 6px 10px 4px;
  margin: 0;
}
.ds-list-hint-eg {
  font-size: 10.5px;
  color: var(--c-text-mute);
  opacity: 0.7;
}
.ds-status-empty {
  font-size: 12px;
  color: var(--c-text-mute);
  padding: 16px 4px;
  text-align: center;
}
.ds-status-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 7px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--c-border);
  font-size: 12.5px;
  color: var(--c-text);
}
.ds-status-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  align-self: center;
}
.ds-item-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.ds-status-name {
  font-weight: 500;
  line-height: 1.3;
}
.ds-todo-days-wrap {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}
.ds-todo-days-input {
  width: 48px;
  height: 24px;
  padding: 0 5px;
  font-size: 11.5px;
  text-align: center;
  border-radius: 5px;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-text);
  -moz-appearance: textfield;
}
.ds-todo-days-input::-webkit-inner-spin-button,
.ds-todo-days-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.ds-todo-days-label {
  font-size: 10.5px;
  color: var(--c-text-mute);
  white-space: nowrap;
}
.ds-todo-timing-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.ds-timing-btns {
  display: flex;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid var(--c-border);
}
.ds-timing-btn {
  padding: 0 6px;
  height: 24px;
  font-size: 10px;
  background: var(--c-surface);
  color: var(--c-text-mute);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, color .12s;
}
.ds-timing-btn + .ds-timing-btn {
  border-left: 1px solid var(--c-border);
}
.ds-timing-btn:hover { background: var(--c-surface-alt); color: var(--c-text); }
.ds-timing-active {
  background: var(--c-accent) !important;
  color: #fff !important;
}
.ds-status-del {
  background: none;
  border: none;
  color: var(--c-text-mute);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  align-self: center;
  flex-shrink: 0;
  transition: color .12s, background .12s;
}
.ds-status-del:hover {
  color: var(--c-danger);
  background: rgba(239,68,68,0.1);
}
.ds-builtin-badge {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--c-text-mute);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--c-border);
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── ドラッグ＆ドロップ共通 ── */
.ds-draggable { cursor: grab; }
.ds-draggable:active { cursor: grabbing; }
/* SortableJS: プレースホルダー（元位置） */
.ds-sortable-ghost { opacity: 0; }
/* SortableJS: ドラッグ中のクローン（浮遊） */
.ds-sortable-drag {
  cursor: grabbing !important;
  transform: scale(1.05) !important;
  box-shadow: 0 12px 24px rgba(0,0,0,0.25) !important;
  z-index: 9999;
}
.ds-drag-handle {
  color: var(--c-text-mute);
  font-size: 11px;
  letter-spacing: -2px;
  line-height: 1;
  flex-shrink: 0;
  padding-right: 2px;
  user-select: none;
  align-self: center;
}

/* ── ステータスアイテム: ホバー等トランジション ── */
.ds-status-item {
  transition: border-color .15s, background .15s, box-shadow .15s;
}

/* ── 右パネル上段: カードプレビュー ── */
.ds-card-preview-wrap {
  flex-shrink: 0;
  max-height: 252px;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--c-border);
  overflow: hidden;
}
.ds-card-preview-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px 6px;
  border-bottom: 1px solid var(--c-border);
  flex-shrink: 0;
}
.ds-card-preview-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--c-text-mute);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ds-card-preview-badge {
  font-size: 10px;
  color: var(--c-text-mute);
  background: var(--c-hover);
  padding: 1px 6px;
  border-radius: 8px;
}
.ds-card-preview {
  flex: 1;
  overflow-y: auto;
  padding: 7px 8px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  align-content: start;
}
/* 実際のst-cardと同じ見た目 */
.ds-prev-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 8px 12px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  cursor: grab;
  user-select: none;
  transition: border-color .15s, transform .15s, opacity .15s, background .15s;
  gap: 4px;
  min-width: 0;
  position: relative;
}
.ds-prev-card:active { cursor: grabbing; }
.ds-prev-card:hover { border-color: rgba(255,255,255,0.22); }
.ds-prev-handle {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--c-text-mute);
  font-size: 9px;
  letter-spacing: -1px;
  opacity: 0.45;
  user-select: none;
  line-height: 1;
}
.ds-prev-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ds-prev-lbl {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 9.5px;
  color: var(--c-text-sub);
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.03em;
}
.ds-prev-val {
  font-size: 22px;
  font-weight: 300;
  color: var(--c-text-mute);
  line-height: 1;
  letter-spacing: -0.02em;
}
.ds-prev-unit {
  font-size: 9px;
  color: var(--c-text-mute);
  font-weight: 400;
}
.ds-preview-empty {
  font-size: 11px;
  color: var(--c-text-mute);
  padding: 14px 6px;
  text-align: center;
  grid-column: 1 / -1;
}

/* ── 右パネル下段: カード選択 ── */
.ds-card-select-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.ds-card-select-hd {
  padding: 7px 12px 6px;
  border-bottom: 1px solid var(--c-border);
  flex-shrink: 0;
}
.ds-card-select-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--c-text-mute);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ── ステータス追加フォーム (2段) ── */
.ds-add-status-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--c-border);
  flex-shrink: 0;
}
.ds-name-row {
  display: flex;
  align-items: center;
  gap: 7px;
}
.ds-color-trigger {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.25);
  cursor: pointer;
  flex-shrink: 0;
  transition: transform .12s, box-shadow .12s;
  background: #4f7df8;
}
.ds-color-trigger:hover {
  transform: scale(1.12);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.15);
}
.ds-name-input {
  flex: 1;
  min-width: 0;
  height: 34px;
  font-size: 12px;
  box-sizing: border-box;
  padding: 0 10px;
  border: 1px solid var(--c-border);
  border-radius: 7px;
  background: var(--c-surface);
  color: var(--c-text);
  font-family: inherit;
  outline: none;
}
.ds-name-input:focus { border-color: var(--c-accent); }
.ds-name-input::placeholder { color: var(--c-text-mute); }
.ds-palette {
  display: none;
  flex-wrap: wrap;
  gap: 5px;
  padding: 4px 2px;
}
.ds-palette.ds-palette-open {
  display: flex;
}
.ds-palette-dot {
  width: 20px; height: 20px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  box-sizing: border-box;
  transition: transform .1s, box-shadow .1s;
  flex-shrink: 0;
}
.ds-palette-dot:hover { transform: scale(1.18); }
.ds-palette-dot-active {
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.9), 0 0 0 3.5px var(--c-text);
  transform: scale(1.12);
}
.ds-btn-add-status {
  padding: 8px 0;
  background: var(--c-accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: opacity .12s;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.ds-btn-add-status:hover { opacity: 0.85; }

/* ── 削除確認モーダル ── */
.ds-confirm-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
}
.ds-confirm-box {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 24px 22px 20px;
  width: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.4);
}
.ds-confirm-icon { line-height: 1; }
.ds-confirm-msg {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--c-text);
  text-align: center;
  margin: 0;
}
.ds-confirm-msg span { color: var(--c-accent); }
.ds-confirm-note {
  font-size: 11px;
  color: var(--c-text-mute);
  text-align: center;
  line-height: 1.55;
  margin: 0;
}
.ds-confirm-btns {
  display: flex;
  gap: 8px;
  margin-top: 4px;
  width: 100%;
}
.ds-confirm-cancel-btn, .ds-confirm-ok-btn {
  flex: 1;
  padding: 9px 0;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  border: none;
  transition: opacity .12s;
}
.ds-confirm-cancel-btn {
  background: var(--c-hover);
  color: var(--c-text-sub);
}
.ds-confirm-ok-btn {
  background: var(--c-danger);
  color: #fff;
}
.ds-confirm-cancel-btn:hover, .ds-confirm-ok-btn:hover { opacity: 0.82; }

/* ════════════════════════════════════════════════════════════════
   StateSurveyList — アンケート (aq-)  v1.52.0
   ════════════════════════════════════════════════════════════════ */
.aq-survey-wrap {
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── ステータスバッジ ── */
.sli-aq-open   { background: var(--c-accent); color: #fff; }
.sli-aq-closed { background: var(--c-text-mute); color: #fff; }
.sli-aq-draft  { background: var(--c-surface-2); color: var(--c-text-sub); }

/* ── 質問ビルダー ── */
.aq-no-questions {
  font-size: 12px;
  color: var(--c-text-mute);
  padding: 20px 0 10px;
  text-align: center;
}
.aq-question-item {
  border: 1px solid var(--c-border);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 10px;
  background: var(--c-surface-2);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Row 1: Q番号 + 質問テキスト */
.aq-q-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.aq-q-num {
  font-size: 11px;
  font-weight: 800;
  color: var(--c-accent);
  min-width: 22px;
  flex-shrink: 0;
}
.aq-q-top .aq-q-label {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  height: 36px;
}
/* Row 2: 形式選択ドロップダウン */
.aq-q-type {
  width: 100%;
  font-size: 12.5px;
  height: 34px;
  padding: 0 10px;
}
/* Row 3: 選択肢 */
.aq-opts-wrap { display: flex; flex-direction: column; gap: 6px; }
.aq-opt-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.aq-opt-input { flex: 1; font-size: 12.5px; height: 32px; }
.aq-opt-del-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--c-text-mute);
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.aq-opt-del-btn:hover { color: var(--c-danger); background: rgba(239,68,68,0.08); }
/* Row 4: 必須 + 削除ボタン */
.aq-q-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 4px;
  border-top: 1px solid var(--c-border);
  margin-top: 2px;
}
.aq-req-label {
  font-size: 11.5px;
  color: var(--c-text-sub);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}
.aq-q-del-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--c-text-mute);
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.aq-q-del-btn:hover { color: var(--c-danger); background: rgba(239,68,68,0.08); }

/* ── プレビュー ── */
.aq-prev-wrap { padding: 4px; }
.aq-prev-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 8px;
  line-height: 1.4;
}
.aq-prev-desc {
  font-size: 11px;
  color: var(--c-text-sub);
  margin-bottom: 12px;
  line-height: 1.6;
  padding: 8px;
  background: var(--c-surface-2);
  border-radius: 6px;
}
.aq-prev-questions { display: flex; flex-direction: column; gap: 10px; }
.aq-prev-q {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  padding: 10px;
}
.aq-prev-q-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: 6px;
  line-height: 1.4;
}
.aq-prev-input {
  height: 28px;
  border: 1px solid var(--c-border);
  border-radius: 5px;
  background: var(--c-bg);
}
.aq-prev-textarea {
  height: 52px;
  border: 1px solid var(--c-border);
  border-radius: 5px;
  background: var(--c-bg);
}
.aq-prev-opt {
  font-size: 11px;
  color: var(--c-text-sub);
  padding: 3px 0;
  display: flex;
  align-items: center;
  gap: 5px;
}
.aq-prev-opt-icon {
  font-size: 13px;
  color: var(--c-text-mute);
  line-height: 1;
}
.aq-prev-select {
  font-size: 11px;
  color: var(--c-text-sub);
  border: 1px solid var(--c-border);
  border-radius: 5px;
  padding: 5px 8px;
  background: var(--c-bg);
}
.aq-prev-no-q {
  font-size: 11px;
  color: var(--c-text-mute);
  text-align: center;
  padding: 16px 0;
}
.aq-prev-date,
.aq-prev-time {
  color: var(--c-text-mute);
  letter-spacing: 0.06em;
}
.aq-prev-file {
  font-size: 11px;
  color: var(--c-text-sub);
  border: 1px dashed var(--c-border);
  border-radius: 6px;
  padding: 7px 10px;
  background: var(--c-bg);
  display: flex;
  align-items: center;
  gap: 6px;
}
.aq-prev-rating {
  font-size: 18px;
  color: #f0a030;
  letter-spacing: 2px;
}

/* ── フッター（保存ボタン） ── */
.ds-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--c-border);
  flex-shrink: 0;
}
#ds-btn-save {
  padding: 9px 20px;
  font-size: 13px;
}

/* ════════════════════════════════════════════════════════════════
   v1.50.1  アンケートステート レイアウト修正
   v1.50.6  新規ヘッダーを amber バナー化・フッター背景変数修正
   v1.50.7  ヘッダーを cu-header 構造に統一・modal-inner 背景修正・ボタンセレクタ整理
   v1.50.8  新規モードで header 非表示・削除済みボタン追加
   v1.50.9  詳細パネル色修正: modal-inner→c-bg, em-section→c-surface, tabs→c-bg, section-title フォント調整, field-input→c-surface-2
   v1.50.10 質問カード構造変更: Q番号+テキスト→形式DD→選択肢→必須+削除
   v1.50.11 質問タイプ追加: 日付・時刻・ファイル・評価（★5段階）プレビュースタイル
   v1.50.12 アンケートプレビューをフォンモックアップデザインに刷新・aq-ph-*クラス追加
   v1.50.13 デザインタブ追加: カラースウォッチ・ヘッダー画像アップロード
   v1.50.14 カラーパレット改善（識別しやすい10色に変更）・選択中インジケーター改善
   v1.50.15 プレビューをiframe化（anketa.html?preview=1）・#aq-preview-iframe CSS追加
   ════════════════════════════════════════════════════════════════ */

/* wrap: padding 除去 */
.aq-survey-wrap {
  padding: 0 !important;
}

/* sp-layout: 残り高さを占有 */
.aq-survey-wrap .sp-layout {
  flex: 1 !important;
  min-height: 0 !important;
  height: auto !important;
}

/* aq-filter-bar: sp-top-bar 内スタイル統一 */
#aq-filter-bar {
  background: transparent !important;
  margin: 0 !important;
  border-bottom: none !important;
  padding: 0 12px 10px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  align-items: center !important;
}

/* aq-search */
#aq-search {
  width: 100% !important;
  flex: 1 1 100% !important;
  background: #1a1a1a !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 7px !important;
  padding: 6px 10px !important;
  font-size: 12px !important;
  color: var(--c-text) !important;
  outline: none !important;
  order: -2 !important;
  height: 30px !important;
  box-sizing: border-box !important;
}
#aq-search:focus { border-color: var(--c-accent) !important; }

/* aq-filter-status */
#aq-filter-status {
  background: #1a1a1a !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 7px !important;
  padding: 4px 8px !important;
  font-size: 11px !important;
  color: var(--c-text-sub) !important;
  cursor: pointer !important;
  height: 30px !important;
  box-sizing: border-box !important;
}

/* aq-list-controls: サマリーバー行 */
#aq-list-controls {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 5px 10px !important;
  background: var(--c-surface-2) !important;
  border-bottom: 1px solid var(--c-border) !important;
  flex-shrink: 0 !important;
  flex-wrap: wrap !important;
}
#aq-list-controls #aq-summary-bar {
  flex: 0 0 100% !important;
  order: -1 !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  font-size: 11px !important;
  color: var(--c-text-mute) !important;
  white-space: nowrap !important;
}

/* aq-btnNew: 新規作成ボタン（アクセント teal） */
#aq-btnNew,
#aq-btnNewEmpty {
  background: var(--c-accent-18) !important;
  color: var(--c-accent) !important;
  border: 1px solid var(--c-accent-72) !important;
  border-radius: 7px !important;
  padding: 5px 12px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  font-family: inherit !important;
  flex-shrink: 0 !important;
}
#aq-btnNew:hover,
#aq-btnNewEmpty:hover { background: rgba(57,189,248,0.28) !important; }

/* aq-empty: 空状態 */
#aq-empty {
  padding: 32px 20px !important;
  text-align: center !important;
  font-size: 13px !important;
  color: var(--c-text-mute) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
}
#aq-empty p { margin: 0 !important; }

/* sp-list-pane 内: カード外観除去 */
.sp-list-pane #aq-content {
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  overflow: visible !important;
  flex-shrink: 0 !important;
  flex: unset !important;
  width: 100% !important;
}
.sp-list-pane #aq-cards {
  overflow-y: visible !important;
  min-height: 0 !important;
  flex: unset !important;
  width: 100% !important;
}

/* 右パネル: 暗い背景 */
#aq-edit-modal .modal-inner {
  background: var(--c-bg) !important;
}

/* aq-em-header: 永続ヘッダー（cu-header と同仕様） */
#aq-em-header {
  background: var(--c-surface-2) !important;
  color: var(--c-text) !important;
  padding: 16px 20px 13px !important;
  flex-shrink: 0 !important;
}
#aq-em-header-title { font-size: 15px !important; font-weight: 700 !important; letter-spacing: 0.02em !important; }
#aq-em-header-sub   { font-size: 11px !important; opacity: 0.55 !important; margin-top: 3px !important; letter-spacing: 0.04em !important; }

/* aq-new-banner: 新規モードのみ amber バナー（cu-new-banner と同仕様） */
#aq-new-banner {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: #201b12;
  border-bottom: 1px solid #453419;
  font-size: 12.5px;
  font-weight: 500;
  color: #c78b34;
  line-height: 1.4;
  flex-shrink: 0;
}

/* aq-em-tabs */
#aq-em-tabs {
  background: var(--c-bg) !important;
  border-bottom: 1px solid var(--c-border) !important;
  display: flex !important;
  flex-shrink: 0 !important;
}
#aq-edit-modal .em-tab {
  flex: 1 !important;
  text-align: center !important;
  padding: 11px 8px !important;
  font-size: 12px !important;
  cursor: pointer !important;
  color: var(--c-text-light) !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -2px !important;
  transition: color .15s, border-color .15s !important;
}
#aq-edit-modal .em-tab.active {
  color: rgba(255,255,255,0.88) !important;
  border-bottom-color: var(--c-accent) !important;
  font-weight: 700 !important;
}
#aq-edit-modal .em-tab:hover { color: var(--c-text) !important; }
#aq-edit-modal .em-tab-panel { display: none !important; padding: 16px !important; }
#aq-edit-modal .em-tab-panel.active { display: block !important; }

/* aq-em-body */
#aq-em-body {
  overflow-y: auto !important;
  flex: 1 !important;
}

/* aq-em-footer */
#aq-em-footer {
  padding: 12px 20px !important;
  background: var(--c-surface-2) !important;
  border-top: 1px solid var(--c-border) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
  box-shadow: 0 -1px 0 var(--c-border) !important;
}
#aq-em-footer .em-footer-btns {
  display: flex !important;
  gap: 10px !important;
}

/* ── フォーム共通 ── */
/* em-section がカード（ps-edit-modal v1.35.0 と同じ構造） */
#aq-edit-modal .em-section {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 12px !important;
  padding: 16px !important;
  margin-bottom: 12px !important;
}
/* em-field-group はフラット（em-section がカードのため不要） */
#aq-edit-modal .em-field-group {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  margin-bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}
#aq-edit-modal .em-section-title {
  background: transparent !important;
  border-left: 2px solid var(--c-accent-72) !important;
  border-radius: 0 !important;
  padding: 2px 0 2px 10px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  color: rgba(255,255,255,0.75) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
#aq-edit-modal .em-field-label {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--c-text-sub) !important;
  letter-spacing: 0.02em !important;
  display: block !important;
  margin-bottom: 5px !important;
}
#aq-edit-modal .em-field-label .req { color: rgba(255,255,255,0.88) !important; margin-left: 2px !important; }
#aq-edit-modal .em-field-input {
  width: 100% !important;
  height: 38px !important;
  padding: 8px 12px !important;
  box-sizing: border-box !important;
  background: var(--c-surface-2) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 8px !important;
  color: #fff !important;
  font-size: 13px !important;
  font-family: inherit !important;
  outline: none !important;
  transition: border-color 0.18s, box-shadow 0.18s !important;
  -webkit-appearance: none !important;
}
#aq-edit-modal .em-field-input:focus {
  border-color: var(--c-accent) !important;
  box-shadow: 0 0 0 2.5px rgba(57,189,248,0.15) !important;
}
#aq-edit-modal textarea.em-field-input {
  height: auto !important;
  min-height: 76px !important;
  resize: vertical !important;
  line-height: 1.65 !important;
}
#aq-edit-modal select.em-field-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23888888' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  padding-right: 28px !important;
  cursor: pointer !important;
}
#aq-edit-modal .em-field-row { display: flex !important; gap: 10px !important; }
#aq-edit-modal .em-field-row .em-field-group { flex: 1 !important; }
#aq-edit-modal .em-hint { font-size: 10px !important; color: var(--c-text-light) !important; margin-top: 3px !important; }
#aq-edit-modal .em-error-msg { font-size: 11px !important; color: var(--c-danger) !important; margin-top: 3px !important; display: none !important; }
#aq-edit-modal .em-field-input.error { border-color: var(--c-danger) !important; }
#aq-edit-modal .em-btn-add-small {
  padding: 6px 12px !important;
  background: transparent !important;
  border: 1px dashed var(--c-border) !important;
  border-radius: 8px !important;
  color: var(--c-text-light) !important;
  font-size: 12px !important;
  cursor: pointer !important;
  font-family: inherit !important;
  width: 100% !important;
}
#aq-edit-modal .em-btn-add-small:hover { border-color: var(--c-accent) !important; color: var(--c-accent) !important; }

/* ── フッターボタン ── */
#aq-edit-modal #aq-em-btnCancel {
  flex: 1; padding: 11px; border: 1px solid var(--c-border); border-radius: 10px;
  background: var(--c-surface); color: rgba(255,255,255,0.55);
  font-size: 13.5px; font-weight: 600; cursor: pointer; font-family: inherit;
  transition: background .15s;
}
#aq-edit-modal #aq-em-btnCancel:hover { background: rgba(60,58,58,0.8); }
#aq-edit-modal #aq-em-btnSave {
  flex: 2; padding: 11px; border: 1px solid rgba(57,189,248,0.72); border-radius: 10px;
  background: rgba(57,189,248,0.18); color: rgba(255,255,255,0.88);
  font-size: 13.5px; font-weight: 700; cursor: pointer; font-family: inherit;
  letter-spacing: 0.03em; transition: background .15s;
}
#aq-edit-modal #aq-em-btnSave:hover    { background: rgba(57,189,248,0.28); }
#aq-edit-modal #aq-em-btnSave:disabled { background: var(--c-surface); border-color: var(--c-border); cursor: default; color: var(--c-text-mute); }


/* 新規モード: aq-new-banner 表示・ヘッダー非表示 */
#aq-edit-modal[data-mode="new"] #aq-new-banner {
  display: flex;
}
#aq-edit-modal[data-mode="new"] #aq-em-header {
  display: none !important;
}

/* aq 削除済みトグルボタン（ps-btn-deleted-toggle と同仕様） */
#aq-btn-deleted-toggle {
  background: transparent;
  border: 1px solid var(--c-border);
  border-radius: 7px;
  padding: 3px 7px;
  font-size: 11px;
  color: var(--c-text-mute);
  cursor: pointer;
  font-family: inherit;
  flex: 0 0 auto;
  min-width: 80px;
}
#aq-btn-deleted-toggle.active {
  background: rgba(239,68,68,0.15);
  border-color: rgba(239,68,68,0.5);
  color: var(--c-danger);
}
#aq-btn-deleted-toggle:hover { background: rgba(255,255,255,0.06); }

/* ── aq-design-tab : デザインタブ ── */
.aq-theme-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.aq-theme-card {
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid var(--c-border);
  transition: border-color .15s, box-shadow .15s;
}
.aq-theme-card:hover { border-color: var(--c-text-light); }
.aq-theme-card.selected {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 2px rgba(57,189,248,0.22);
}
.aq-theme-card-preview {
  height: 52px;
  display: flex;
  flex-direction: column;
}
.aq-theme-card-hdr { height: 14px; flex-shrink: 0; }
.aq-theme-card-body {
  flex: 1;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.aq-theme-card-inner {
  flex: 1;
  height: 16px;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.07);
}
.aq-theme-card-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.aq-theme-card-name {
  font-size: 10.5px;
  padding: 4px 0 5px;
  background: var(--c-surface);
  color: var(--c-text-light);
  text-align: center;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.aq-header-img-preview {
  margin-bottom: 8px;
  border-radius: 6px;
  overflow: hidden;
  max-height: 100px;
}
.aq-header-img-preview img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  display: block;
}
.aq-header-img-btn {
  display: block;
  width: 100%;
  text-align: center;
  cursor: pointer;
  font-size: 11px;
  color: var(--c-accent);
  border: 1px solid var(--c-accent);
  border-radius: 6px;
  padding: 5px 10px;
  margin-top: 2px;
  transition: background .12s;
}
.aq-header-img-btn:hover { background: rgba(58,91,217,0.08); }
.aq-header-img-clear {
  display: block;
  width: 100%;
  text-align: center;
  margin-left: 0;
  margin-top: 6px;
  font-size: 11px;
  color: var(--c-danger);
  background: none;
  border: 1px solid var(--c-danger);
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
  font-family: inherit;
  transition: background .12s;
}
.aq-header-img-clear:hover { background: rgba(239,68,68,0.08); }

/* ── 説明欄リンク挿入 ── */
.aq-desc-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 4px;
}
.aq-desc-link-btn {
  font-size: 11px;
  padding: 3px 10px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background: var(--c-surface);
  color: var(--c-text-light);
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.aq-desc-link-btn:hover { border-color: var(--c-accent); color: var(--c-accent); }
.aq-link-popover {
  margin-top: 6px;
  padding: 12px 14px;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  background: var(--c-surface);
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}
.aq-link-row { margin-bottom: 8px; }
.aq-link-label { display: block; font-size: 10px; color: var(--c-text-light); margin-bottom: 3px; }
.aq-link-input {
  width: 100%;
  box-sizing: border-box;
  padding: 5px 8px;
  font-size: 12px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background: var(--c-bg);
  color: var(--c-text);
  outline: none;
}
.aq-link-input:focus { border-color: var(--c-accent); }
.aq-link-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.aq-link-btn-cancel {
  font-size: 11px; padding: 4px 12px;
  border: 1px solid var(--c-border); border-radius: 6px;
  background: transparent; color: var(--c-text-light); cursor: pointer;
}
.aq-link-btn-cancel:hover { background: var(--c-bg); }
.aq-link-btn-insert {
  font-size: 11px; padding: 4px 14px;
  border: 1px solid var(--c-accent); border-radius: 6px;
  background: rgba(57,189,248,0.12); color: var(--c-accent); cursor: pointer;
  font-weight: 600;
}
.aq-link-btn-insert:hover { background: rgba(57,189,248,0.22); }

/* ── フォント選択 ── */
.aq-font-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.aq-font-card {
  padding: 8px 10px;
  border: 1.5px solid var(--c-border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.aq-font-card:hover { border-color: var(--c-text-light); }
.aq-font-card.selected { border-color: var(--c-accent); background: rgba(57,189,248,0.07); }
.aq-font-card-label { font-size: 11px; font-weight: 600; color: var(--c-text-light); display: block; margin-bottom: 2px; }
.aq-font-card-sample { font-size: 14px; color: var(--c-text); display: block; line-height: 1.4; }

/* ── 説明欄 contenteditable エディター ── */
.aq-em-desc-editor {
  height: auto !important;
  min-height: 80px;
  cursor: text;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.65;
  overflow-y: auto;
}
.aq-em-desc-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--c-text-light);
  pointer-events: none;
  display: block;
}
.aq-em-desc-editor a { color: var(--c-accent); text-decoration: underline; }

/* ── aq-ph-* : アンケートプレビュー（フォン内コンテンツ） ── */
.aq-phone-content {
  overflow-y: auto;
  max-height: 100%;
}
.aq-ph-header {
  background: #3a5bd9;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 10px 12px 8px;
  margin: -14px -14px 10px;
  text-align: center;
  letter-spacing: 0.3px;
}
.aq-ph-desc {
  font-size: 9.5px;
  color: #555;
  line-height: 1.5;
  margin: 0 0 10px;
  padding: 8px 10px;
  background: #f5f6fa;
  border-radius: 6px;
}
.aq-ph-q {
  margin-bottom: 10px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid #e8eaf0;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.aq-ph-q-label {
  font-size: 9.5px;
  font-weight: 600;
  color: #222;
  margin-bottom: 6px;
  line-height: 1.4;
}
.aq-ph-input {
  border: 1px solid #d8dae8;
  border-radius: 4px;
  padding: 4px 7px;
  font-size: 9px;
  color: #aaa;
  background: #fafbfd;
  height: 20px;
  display: flex;
  align-items: center;
}
.aq-ph-opt {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  color: #333;
  padding: 2px 0;
}
.aq-ph-opt-icon {
  font-size: 10px;
  color: #3a5bd9;
  flex-shrink: 0;
}
.aq-ph-stars {
  font-size: 16px;
  color: #f5a623;
  letter-spacing: 1px;
  line-height: 1;
  padding: 2px 0;
}
.aq-ph-file {
  border: 1.5px dashed #c0c4d8;
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 9px;
  color: #3a5bd9;
  text-align: center;
  background: #f5f7ff;
}
.aq-ph-submit {
  margin: 12px 0 2px;
  background: #3a5bd9;
  color: #fff;
  border-radius: 20px;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  padding: 7px 0;
  letter-spacing: 0.4px;
}
/* ── アンケートプレビュー iframe ── */
#aq-right-pane .bk-preview-body {
  padding: 14px 4px;
}
#aq-right-pane .bk-preview-phone {
  display: flex; flex-direction: column; height: 540px; align-self: center;
  width: 100%;
}
#aq-preview-iframe {
  flex: 1; min-height: 0; width: 100%; border: none; display: block;
}
/* ── 撮影会プレビュー ── */
#ps-right-pane { overflow-y: hidden !important; }
#ps-right-pane .bk-preview-body {
  flex: 1; min-height: 0; overflow-y: auto; padding: 14px 4px;
}
#ps-right-pane .bk-preview-phone {
  display: flex; flex-direction: column; height: 540px; align-self: center; width: 100%;
}
.ps-preview-phone-inner {
  flex: 1; min-height: 0; width: 100%; border: none; display: block;
}
/* ── 予約設定プレビュー: アンケートと同サイズ ── */
.bk-panel-preview .bk-preview-body {
  padding: 14px 4px;
}
.bk-panel-preview .bk-preview-phone {
  display: flex; flex-direction: column; height: 540px; align-self: center; width: 100%;
}
.bk-panel-preview .bk-phone-content {
  flex: 1; overflow-y: auto; min-height: 0;
}

/* ══ ユーザー設定 テーマ選択 ══ */
.us-theme-row {
  display: flex; gap: 8px; padding: 2px 0 4px;
}
.us-theme-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 0; border-radius: 8px; border: 1.5px solid var(--c-border);
  background: var(--c-surface); color: var(--c-text-sub);
  font-size: 12.5px; font-family: inherit; cursor: pointer;
  transition: all 0.15s;
}
.us-theme-btn:hover { border-color: var(--c-accent); color: var(--c-accent); }
.us-theme-btn.active {
  background: var(--c-accent-dim); border-color: var(--c-accent);
  color: var(--c-accent); font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════
   設定 > 請求書・領収書設定（sti-*）— 顧客詳細パネル風レイアウト
   #cu-edit-modal と同じ section-title / field-group / field-row /
   field-label / field-input / row-2col の体裁に統一
   ══════════════════════════════════════════════════════════════ */
#st-section-invoice #sti-app {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* フォーム領域: スクロール + 内側余白 */
#st-section-invoice #sti-form-wrap {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#st-section-invoice #sti-form-wrap::-webkit-scrollbar { width: 4px; }
#st-section-invoice #sti-form-wrap::-webkit-scrollbar-thumb { background: #555; border-radius: 4px; }

/* ── セクション見出し（cu-edit-modal と同じ装飾） ── */
#st-section-invoice .section-title {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,0.88);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 10px;
  background: var(--c-accent-18);
  border-left: 3px solid var(--c-accent-72);
  border-radius: 0 6px 6px 0;
  margin-top: 6px;
  /* 上の global .section-title の border-bottom を打ち消す */
  border-bottom: none;
  padding-bottom: 5px;
  margin-bottom: 0;
}
#st-section-invoice .section-title:first-child { margin-top: 0; }

/* ── フィールドグループ（cu-edit-modal と同じカード枠） ── */
#st-section-invoice .field-group {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 16px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
#st-section-invoice .field-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#st-section-invoice .row-2col {
  flex-direction: row;
  gap: 10px;
}
#st-section-invoice .row-2col > .field-row { flex: 1; }

#st-section-invoice .field-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--c-text-sub);
}

/* ── 入力共通（cu-edit-modal の .field-input と同じ） ── */
#st-section-invoice .field-input {
  width: 100%;
  padding: 9px 11px;
  height: 40px;
  box-sizing: border-box;
  font-size: 13.5px;
  border: 1px solid var(--c-border);
  border-radius: 7px;
  outline: none;
  color: #FFFFFF;
  background: var(--c-surface);
  transition: border-color 0.18s, box-shadow 0.18s;
  font-family: inherit;
  -webkit-appearance: none;
}
#st-section-invoice .field-input:focus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 2.5px rgba(57,189,248,0.15);
}
#st-section-invoice textarea.field-input {
  height: auto;
  resize: vertical;
  min-height: 88px;
  line-height: 1.65;
}
#st-section-invoice select.field-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23888888' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
  cursor: pointer;
}
#st-section-invoice input[type="number"].field-input {
  text-align: right;
  -moz-appearance: textfield;
}
#st-section-invoice input[type="number"].field-input::-webkit-outer-spin-button,
#st-section-invoice input[type="number"].field-input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* ── インボイス登録番号 T + 入力欄 ── */
#st-section-invoice .reg-input-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
#st-section-invoice .reg-prefix {
  font-size: 18px;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1;
}
#st-section-invoice .reg-input-wrap .field-input { flex: 1; }

/* ── 単位付き入力（消費税率・支払期限日数） ── */
#st-section-invoice .input-unit {
  display: flex;
  align-items: center;
  gap: 6px;
}
#st-section-invoice .input-unit .field-input {
  flex: 1;
  text-align: center;
}
#st-section-invoice .input-unit .unit {
  font-size: 13px;
  color: var(--c-text-sub);
  white-space: nowrap;
}
#st-section-invoice .stepper {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
#st-section-invoice .stepper button {
  width: 28px;
  height: 20px;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-text-sub);
  border-radius: 4px;
  font-size: 10px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
  line-height: 1;
}
#st-section-invoice .stepper button:hover {
  background: var(--c-border);
  border-color: var(--c-accent);
  color: var(--c-text);
}

/* ── 補足説明ボックス ── */
#st-section-invoice .info-box {
  font-size: 11px;
  color: var(--c-text-mute);
  padding: 0 2px;
  line-height: 1.6;
}

/* ── エラー / トースト ── */
#st-section-invoice #sti-errorMsg {
  display: none;
  margin: 8px 0;
  color: var(--c-danger);
  font-size: 12px;
}
#st-section-invoice .saved-toast {
  display: none;
  text-align: center;
  color: rgba(255,255,255,0.88);
  font-size: 13px;
  font-weight: 600;
  padding: 5px 10px;
  background: rgba(12,199,85,0.18);
  border-left: 3px solid rgba(12,199,85,0.72);
  border-radius: 0 6px 6px 0;
}
#st-section-invoice #sti-savedToast { display: none; }

/* ── フッター（保存ボタン） ── */
#st-section-invoice #sti-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-shrink: 0;
}
#st-section-invoice #sti-btnCancel {
  padding: 9px 20px;
  border: 1px solid var(--c-border);
  border-radius: 7px;
  background: var(--c-surface);
  color: var(--c-text-sub);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
#st-section-invoice #sti-btnCancel:hover { background: var(--c-hover, rgba(60,58,58,0.8)); }
#st-section-invoice #sti-btnSave:disabled { opacity: .5; cursor: default; }

/* テーマ選択カード（A4比モックアップ付き） */
.sti-theme-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  padding: 4px 0 6px;
}
.sti-theme-card {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  padding: 14px; border-radius: 12px;
  border: 1.5px solid var(--c-border);
  background: var(--c-surface); color: var(--c-text-sub);
  font-family: inherit; cursor: pointer;
  transition: all 0.18s ease;
  text-align: center;
}
.sti-theme-card:hover {
  border-color: var(--c-accent); color: var(--c-accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.10);
}
.sti-theme-card.active {
  background: var(--c-accent-dim); border-color: var(--c-accent);
  color: var(--c-accent);
}
.sti-theme-card.active .sti-theme-label { font-weight: 700; }
.sti-theme-label { font-size: 13px; }
.sti-theme-sub   { font-size: 11px; color: var(--c-text-sub); opacity: 0.85; }
.sti-theme-card.active .sti-theme-sub { color: var(--c-accent); opacity: 0.9; }

/* 共通: A4比モックアップ（高さ約 220px） */
.sti-mock {
  position: relative; width: 100%; aspect-ratio: 1 / 1.414;
  max-height: 240px; margin: 0 auto;
  background: #fff; border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.04);
  overflow: hidden; color: #5b514d;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
}

/* ── Style-A: シンプル（細罫線・グレースケール・モダンミニマル） ── */
/* 実物の invoiceView.html sa-* のリファイン版に追従 */
.sti-mock-A { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.sti-mockA-head { display: flex; justify-content: space-between; align-items: flex-end; }
.sti-mockA-title {
  font-size: 14px; font-weight: 600; letter-spacing: 0.22em; color: #1f1d1b;
  line-height: 1; padding-left: 0.22em;
}
.sti-mockA-meta {
  display: grid; grid-template-columns: auto auto; gap: 2px 6px;
  font-size: 6px;
}
.sti-mockA-meta span {
  display: block; width: 36px; height: 3px;
  background: #1f1d1b; border-radius: 0;
}
.sti-mockA-meta span:nth-child(odd) { width: 18px; background: #c9c5bf; }
.sti-mockA-name {
  margin-top: 6px; font-size: 11px; font-weight: 500;
  border-bottom: 1px solid #1f1d1b; padding-bottom: 3px;
  color: #1f1d1b; letter-spacing: 0.04em;
}
.sti-mockA-subject {
  display: flex; gap: 8px; align-items: center;
  border: 1px solid #d4d1cd; padding: 4px 8px;
  font-size: 7px; color: #8a8581; font-weight: 500; letter-spacing: 0.1em;
}
.sti-mockA-subject .sti-mockA-subval {
  flex: 1; height: 3px; background: #c9c5bf; border-radius: 0;
}
.sti-mockA-amount {
  display: flex; gap: 8px; align-items: baseline;
  border: none; border-bottom: 1px solid #1f1d1b; padding: 4px 6px;
  background: transparent;
}
.sti-mockA-amount span:first-child {
  font-size: 6px; font-weight: 500; color: #8a8581; letter-spacing: 0.1em;
}
.sti-mockA-amtval {
  margin-left: auto; font-size: 13px; font-weight: 600; color: #1f1d1b;
  letter-spacing: 0.02em;
}
.sti-mockA-table {
  width: 100%; border-collapse: collapse; font-size: 6px;
  margin-top: 4px;
}
.sti-mockA-table th, .sti-mockA-table td {
  border: 1px solid #d4d1cd; height: 9px;
}
.sti-mockA-table thead th { background: #ececea; height: 7px; }
.sti-mockA-table tbody td:first-child { background: #ffffff; }

/* ── Style-B: モダン（上部色帯・装飾的タイトル） ── */
.sti-mock-B { display: flex; flex-direction: column; }
.sti-mockB-band {
  height: 12px;
  background: linear-gradient(90deg, #5a4b3a 0%, #7a6b58 100%);
  flex-shrink: 0;
}
.sti-mockB-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.sti-mockB-head { display: flex; justify-content: space-between; align-items: flex-start; }
.sti-mockB-title {
  font-size: 15px; font-weight: 400; letter-spacing: 0.4em; color: #5f5a56;
}
.sti-mockB-meta {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-end;
}
.sti-mockB-meta span {
  display: block; width: 44px; height: 3px;
  background: #b9b1a8; border-radius: 1px;
}
.sti-mockB-meta span:last-child { width: 32px; background: #d9d2c8; }
.sti-mockB-cust {
  font-size: 11px; color: #5f5a56;
  border-bottom: 2px solid #b9a886; padding-bottom: 3px;
}
.sti-mockB-due {
  height: 4px; width: 50%; background: #d9d2c8; border-radius: 1px;
}
.sti-mockB-table {
  width: 100%; border-collapse: collapse; font-size: 6px;
}
.sti-mockB-table th {
  background: #5a4b3a; height: 8px; border: none;
}
.sti-mockB-table td {
  height: 8px; border-bottom: 1px solid #e0d8cc; background: #fafafa;
}
.sti-mockB-table tbody tr:nth-child(even) td { background: #f4f0e8; }
.sti-mockB-total {
  text-align: right; font-size: 14px; font-weight: 700;
  color: #5a4b3a; margin-top: auto;
  border-top: 2px solid #5a4b3a; padding-top: 4px;
}

/* ══ ユーザー設定 請求書デザイン選択（旧。設定 > 請求書 へ移動） ══ */
.us-invtheme-row {
  display: flex; gap: 12px; padding: 4px 0 6px;
}
.us-invtheme-card {
  flex: 1; display: flex; flex-direction: column; align-items: stretch;
  gap: 6px; padding: 8px;
  border-radius: 10px; border: 1.5px solid var(--c-border);
  background: var(--c-surface); color: var(--c-text-sub);
  font-family: inherit; cursor: pointer; transition: all 0.15s;
  text-align: center;
}
.us-invtheme-card:hover {
  border-color: var(--c-accent); color: var(--c-accent);
}
.us-invtheme-card.active {
  background: var(--c-accent-dim); border-color: var(--c-accent);
  color: var(--c-accent);
}
.us-invtheme-card.active .us-invtheme-label { font-weight: 600; }
.us-invtheme-label { font-size: 12.5px; }
.us-invtheme-sub   { font-size: 10.5px; color: var(--c-text-sub); opacity: 0.8; }
.us-invtheme-card.active .us-invtheme-sub { color: var(--c-accent); opacity: 0.85; }

/* サムネ風プレビュー（A4比 = 約 1:1.414、横幅可変） */
.us-invtheme-thumb {
  position: relative; width: 100%; aspect-ratio: 1 / 1.18;
  background: #fff; border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
  padding: 8px 8px 6px; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 4px;
  overflow: hidden;
}
.us-invtheme-thumb-title {
  width: 40%; height: 7px; background: #2b2b2b; border-radius: 1px;
  margin-bottom: 2px;
}
.us-invtheme-thumb-line {
  height: 3px; background: #cfcfcf; border-radius: 1px;
}
.us-invtheme-thumb-line.w90 { width: 90%; }
.us-invtheme-thumb-line.w70 { width: 70%; }
.us-invtheme-thumb-line.w60 { width: 60%; }
.us-invtheme-thumb-line.w50 { width: 50%; }
.us-invtheme-thumb-amt {
  width: 60%; height: 9px; background: #a8a8a8; border-radius: 1px;
  margin: 4px 0 2px auto;
}
/* Style-B はヘッダ帯付き（モダン） */
.us-invtheme-thumb-B {
  padding-top: 14px;
}
.us-invtheme-thumb-bar {
  position: absolute; top: 0; left: 0; right: 0; height: 10px;
  background: #5a4b3a;
}
.us-invtheme-thumb-B .us-invtheme-thumb-title {
  background: #5a4b3a;
}
.us-invtheme-thumb-B .us-invtheme-thumb-amt {
  background: #5a4b3a;
}

/* ══ セットアップバナー ══ */
#setup-banner {
  align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--c-orange-18); border-bottom: 1px solid var(--c-orange-72);
  padding: 8px 20px; font-size: 12px; color: var(--c-text-sub);
  flex-shrink: 0;
}
#setup-banner svg { flex-shrink: 0; color: var(--c-orange); }
.sb-text { color: var(--c-text-sub); white-space: nowrap; }
.sb-item-btn {
  background: var(--c-orange-18); color: var(--c-orange);
  border: 1px solid var(--c-orange-72); border-radius: 20px;
  padding: 4px 12px; font-size: 11px; font-weight: 600;
  font-family: inherit; cursor: pointer; white-space: nowrap;
  transition: opacity 0.13s; display: inline-flex; align-items: center; gap: 4px;
}
.sb-item-btn:hover { opacity: 0.78; }
.sb-close-btn {
  background: transparent; border: none; color: var(--c-text-mute);
  font-size: 11px; font-family: inherit; cursor: pointer; margin-left: auto;
  padding: 4px 6px; white-space: nowrap;
}
.sb-close-btn:hover { color: var(--c-text); }

/* ══ オンボーディングモーダル ══ */
.ob-overlay {
  position: fixed; inset: 0; z-index: 9100;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
}
.ob-modal {
  position: relative;
  width: 460px; max-width: calc(100vw - 32px);
  height: 580px; max-height: calc(100vh - 48px);
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: 16px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; overflow: hidden;
}
.ob-skip-btn {
  position: absolute; top: 14px; right: 14px;
  background: none; border: 1px solid var(--c-border); color: var(--c-text-mute);
  font-size: 11px; font-family: inherit; cursor: pointer; padding: 4px 10px;
  border-radius: 20px; transition: color 0.13s, background 0.13s, border-color 0.13s;
}
.ob-skip-btn:hover { color: var(--c-text-sub); border-color: var(--c-text-mute); background: var(--c-hover); }
.ob-body {
  padding: 40px 36px 24px;
  display: flex; flex-direction: column; align-items: stretch;
  flex: 1; min-height: 0; overflow-y: auto; justify-content: flex-start;
}
.ob-body-inner {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; width: 100%; margin: auto;
}
.ob-body.ob-has-form .ob-body-inner {
  margin: 0; align-items: stretch; text-align: left;
}
.ob-body.ob-has-form .ob-body-inner .ob-brand-icon,
.ob-body.ob-has-form .ob-body-inner .ob-logo-img,
.ob-body.ob-has-form .ob-body-inner .ob-title,
.ob-body.ob-has-form .ob-body-inner .ob-desc { align-self: center; text-align: center; }
.ob-logo-img {
  width: 160px; height: auto; margin-bottom: 24px; display: block;
}
.ob-brand-icon {
  width: 72px; height: 72px; border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px; border: none;
}
.ob-brand-line   { background: #06C755; }
.ob-brand-stripe { background: #635BFF; }
.ob-brand-ig     { background: linear-gradient(135deg, #FFDC80 0%, #FCAF45 20%, #F77737 40%, #C13584 70%, #833AB4 100%); }
.ob-icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--c-accent-dim); border: 1px solid var(--c-accent-18);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px; color: var(--c-accent);
}
.ob-title {
  font-size: 17px; font-weight: 700; color: var(--c-text);
  margin-bottom: 10px; line-height: 1.4;
}
.ob-desc {
  font-size: 13px; color: var(--c-text-sub); line-height: 1.75;
  max-width: 340px; white-space: pre-line;
}
.ob-action-btn {
  margin-top: 20px; padding: 9px 24px;
  background: var(--c-accent); color: #fff;
  border: none; border-radius: 8px; font-size: 13px; font-weight: 600;
  font-family: inherit; cursor: pointer; transition: opacity 0.13s;
}
.ob-action-btn:hover { opacity: 0.86; }
/* テーマ選択ステップ */
.ob-theme-row {
  display: flex; gap: 12px; margin-top: 20px;
}
.ob-theme-card {
  flex: 1; padding: 14px 10px; border-radius: 10px;
  border: 2px solid var(--c-border); cursor: pointer;
  transition: all 0.15s; display: flex; flex-direction: column;
  align-items: center; gap: 8px;
}
.ob-theme-card:hover { border-color: var(--c-accent); }
.ob-theme-card.active { border-color: var(--c-accent); background: var(--c-accent-dim); }
.ob-theme-card-label { font-size: 12px; font-weight: 600; color: var(--c-text-sub); }
.ob-theme-card.active .ob-theme-card-label { color: var(--c-accent); }
.ob-theme-preview {
  width: 80px; height: 52px; border-radius: 6px; overflow: hidden;
  border: 1px solid var(--c-border);
}
.ob-theme-preview.dark { background: #121212; }
.ob-theme-preview.dark::after {
  content: ''; display: block; margin: 10px 8px 0;
  height: 6px; border-radius: 3px; background: #39BDF8; width: 50%;
}
.ob-theme-preview.light { background: #f4f5f7; }
.ob-theme-preview.light::after {
  content: ''; display: block; margin: 10px 8px 0;
  height: 6px; border-radius: 3px; background: #0284c7; width: 50%;
}
.ob-theme-preview.warm { background: #F8F6F4; }
.ob-theme-preview.warm::before {
  content: ''; display: block; width: 30%; margin: 0 0 0 auto;
  height: 100%; background: #2C2826;
}
.ob-theme-preview.warm::after {
  content: ''; display: block; margin: -32px 8px 0 38%;
  height: 6px; border-radius: 3px; background: #E07A5F; width: 35%;
}
/* フォームステップ */
.ob-body.ob-has-form { align-items: stretch; text-align: left; }
.ob-form {
  width: 100%; margin-top: 16px;
}
.ob-field-label {
  display: block; font-size: 12px; font-weight: 600; color: var(--c-text-sub);
  margin: 14px 0 6px;
}
.ob-field-label:first-child { margin-top: 0; }
.ob-required { color: var(--c-danger); font-size: 11px; margin-left: 4px; }
.ob-optional { color: var(--c-text-mute); font-size: 11px; margin-left: 4px; }
.ob-field-input {
  display: block; width: 100%; box-sizing: border-box;
  background: var(--c-bg); border: 1.5px solid var(--c-border);
  color: var(--c-text); padding: 9px 12px; border-radius: 8px;
  font-size: 13px; font-family: inherit; transition: border-color 0.15s;
}
.ob-field-input:focus { outline: none; border-color: var(--c-accent); }
.ob-field-hint {
  font-size: 11px; color: var(--c-text-mute); margin-top: 6px; line-height: 1.5;
}
.ob-field-error {
  font-size: 12px; color: var(--c-danger); margin-top: 8px;
  padding: 8px 12px; background: var(--c-danger-18); border-radius: 6px;
  border: 1px solid var(--c-danger-72);
}
.ob-webhook-row, .ob-secret-row {
  display: flex; gap: 6px; align-items: center; width: 100%;
}
.ob-webhook-input { flex: 1; color: var(--c-text-mute); }
.ob-copy-btn, .ob-reveal-btn {
  flex-shrink: 0; padding: 8px 12px;
  background: var(--c-surface-2); border: 1px solid var(--c-border);
  border-radius: 8px; color: var(--c-text-sub); font-size: 11px;
  cursor: pointer; font-family: inherit; white-space: nowrap; transition: all .15s;
}
.ob-copy-btn:hover, .ob-reveal-btn:hover { border-color: var(--c-accent-72); color: var(--c-accent); }
.ob-service-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--c-accent-dim); border: 1px solid var(--c-accent-18);
  color: var(--c-accent); border-radius: 20px; padding: 4px 12px;
  font-size: 12px; font-weight: 700; margin-bottom: 12px; align-self: center;
}
.ob-steps {
  width: 100%; margin: 0 0 8px; padding: 0 0 0 20px;
  text-align: left; list-style: decimal;
}
.ob-steps li {
  font-size: 12px; color: var(--c-text-sub); line-height: 1.8;
}
.ob-steps-result {
  font-size: 12px; color: var(--c-accent); font-weight: 600;
  margin: 0 0 12px; text-align: center;
}
.ob-connect-area {
  width: 100%; margin-top: 16px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
/* フッター */
.ob-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px 20px; border-top: 1px solid var(--c-border);
}
.ob-dots { display: flex; gap: 6px; }
.ob-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-border); transition: all 0.2s;
}
.ob-dot.active { background: var(--c-accent); width: 20px; border-radius: 4px; }
.ob-nav { display: flex; gap: 8px; }
.ob-btn {
  padding: 8px 20px; border-radius: 8px; border: 1.5px solid var(--c-border);
  font-size: 13px; font-family: inherit; cursor: pointer;
  background: var(--c-surface); color: var(--c-text-sub);
  transition: all 0.13s;
}
.ob-btn:hover { border-color: var(--c-accent); color: var(--c-accent); }
.ob-btn-next {
  background: var(--c-accent); border-color: var(--c-accent);
  color: #fff; font-weight: 600;
}
.ob-btn-next:hover { opacity: 0.86; color: #fff; }

/* ══════════════════════════════════════════════════════════════
   ライト/ウォームテーマ 末尾上書き — ファイル末尾に置くことで
   !important 同士の競合を「後勝ち」で確実に制御する
   ══════════════════════════════════════════════════════════════ */

/* ── ライトテーマ ── */

/* Toast */
body.theme-light #kz-toast { background: #ffffff !important; color: #111827 !important; border-color: #dde0e6 !important; box-shadow: 0 4px 20px rgba(0,0,0,0.10) !important; }
body.theme-light #kz-toast.kzt-success { background: #f0fdf4 !important; border-color: rgba(5,150,105,0.50) !important; }
body.theme-light #kz-toast.kzt-error   { background: #fff1f2 !important; border-color: rgba(220,38,38,0.50) !important; }

/* Confirm / td-modal */
body.theme-light #kz-confirm-box,
body.theme-light #td-modal-box { background: #ffffff !important; border-color: #dde0e6 !important; box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important; }
body.theme-light #kz-confirm-title,
body.theme-light #td-modal-desc { color: #111827 !important; }
body.theme-light #kz-confirm-msg,
body.theme-light .td-modal-label { color: rgba(0,0,0,0.52) !important; }
body.theme-light .kz-btn-cancel { border-color: #dde0e6 !important; color: rgba(0,0,0,0.55) !important; }
body.theme-light .kz-btn-cancel:hover { border-color: #0284c7 !important; color: #0284c7 !important; }
body.theme-light #td-modal-status { background: #f8f9fb !important; border-color: #dde0e6 !important; color: #111827 !important; }

/* em-modal 全体 */
body.theme-light #em-app { background: #ffffff !important; }
body.theme-light #em-tab-bar { background: #f4f5f7 !important; border-bottom-color: #dde0e6 !important; }
body.theme-light .em-tab-btn { color: rgba(0,0,0,0.52) !important; }
body.theme-light .em-tab-btn:hover { color: #111827 !important; }
body.theme-light .em-tab-btn.active { color: #0284c7 !important; border-bottom-color: #0284c7 !important; }
body.theme-light #em-form-wrap { background: #f4f5f7 !important; }
body.theme-light #em-edit-modal .em-field-group { background: #ffffff !important; border-color: #dde0e6 !important; }
body.theme-light #em-edit-modal #em-search-section > .em-field-group { background: #f8f9fb !important; border-color: #dde0e6 !important; }
body.theme-light #em-edit-modal .em-section-title { color: rgba(0,0,0,0.45) !important; border-left-color: rgba(2,132,199,0.50) !important; }
body.theme-light #em-edit-modal #em-search-section > .em-section-title { color: rgba(0,0,0,0.45) !important; }
body.theme-light .em-field-input { color: #111827 !important; background: #ffffff !important; border-color: #dde0e6 !important; }
body.theme-light .em-field-input:focus { border-color: #0284c7 !important; box-shadow: 0 0 0 2.5px rgba(2,132,199,0.15) !important; }
body.theme-light .em-field-input[readonly],
body.theme-light .em-field-input.calc-out { background: #f1f3f6 !important; color: rgba(0,0,0,0.38) !important; border-color: #e8eaee !important; }
body.theme-light #em-form-wrap::-webkit-scrollbar-thumb { background: #bcc3cc !important; }
body.theme-light #em-header { background: #f8f9fb !important; border-bottom: 1px solid #dde0e6; }

/* フィルターバー・リスト */
body.theme-light #ap-filter-bar,
body.theme-light #cu-filter-bar,
body.theme-light #sf-filter-bar,
body.theme-light #os-filter-bar { background: transparent !important; }
body.theme-light #ap-search, body.theme-light #cu-search,
body.theme-light #sf-search, body.theme-light #os-search { background: #ffffff !important; color: #111827 !important; border-color: #dde0e6 !important; }
body.theme-light #ap-summary-bar, body.theme-light #cu-summary-bar,
body.theme-light #sf-summary-bar, body.theme-light #os-summary-bar { background: #f8f9fb !important; }
body.theme-light #ap-filter-bar .filter-select,
body.theme-light #cu-filter-bar .filter-select,
body.theme-light #sf-filter-role, body.theme-light #os-filter-field { background: #ffffff !important; color: rgba(0,0,0,0.55) !important; border-color: #dde0e6 !important; }
body.theme-light #ap-list-wrap, body.theme-light #cu-list-wrap,
body.theme-light #sf-list-wrap, body.theme-light #os-list-wrap { background: #f4f5f7 !important; }

/* 管理パネル */
body.theme-light .adm-tabs { border-bottom-color: #dde0e6 !important; }
body.theme-light .adm-tab { color: rgba(0,0,0,0.45) !important; }
body.theme-light .adm-tab:hover:not(.active) { color: rgba(0,0,0,0.75) !important; }
body.theme-light .adm-chat-wrap { border-color: #dde0e6 !important; }
body.theme-light .adm-thread-col { background: #f8f9fb !important; border-right-color: #dde0e6 !important; }
body.theme-light .adm-thread-item:hover { background: rgba(0,0,0,0.04) !important; }
body.theme-light .adm-thread-item.active { background: rgba(99,102,241,0.10) !important; }
body.theme-light .adm-thread-name { color: #111827 !important; }
body.theme-light .adm-thread-item.unread .adm-thread-name { color: #111827 !important; }
body.theme-light .adm-thread-preview { color: rgba(0,0,0,0.42) !important; }
body.theme-light .adm-thread-date { color: rgba(0,0,0,0.30) !important; }
body.theme-light .adm-toolbar { border-bottom-color: #dde0e6 !important; border-color: #dde0e6 !important; }
body.theme-light .adm-loading { color: rgba(0,0,0,0.35) !important; }
body.theme-light .adm-select { background: #ffffff !important; border-color: #dde0e6 !important; color: rgba(0,0,0,0.70) !important; }
body.theme-light .adm-btn-refresh { background: #f1f3f6 !important; border-color: #dde0e6 !important; color: rgba(0,0,0,0.55) !important; }
body.theme-light .adm-btn-refresh:hover { background: #e8eaee !important; }
body.theme-light .adm-msg-placeholder { color: rgba(0,0,0,0.30) !important; }
body.theme-light .adm-msg-header { color: #111827 !important; border-bottom-color: #dde0e6 !important; }
body.theme-light .adm-msg-reply { border-top-color: #dde0e6 !important; }
body.theme-light .adm-bubble.user { background: #f1f3f6 !important; color: #111827 !important; }
body.theme-light .adm-bubble-time { color: rgba(0,0,0,0.30) !important; }
body.theme-light .adm-bubble-sender { color: rgba(0,0,0,0.38) !important; }
body.theme-light .adm-input { background: #ffffff !important; border-color: #dde0e6 !important; color: #111827 !important; }
body.theme-light .adm-input:focus { border-color: rgba(2,132,199,0.5) !important; }
body.theme-light .adm-filter-select,
body.theme-light .adm-filter-input { background: #ffffff !important; border-color: #dde0e6 !important; color: rgba(0,0,0,0.70) !important; }
body.theme-light .adm-section-header { color: #059669 !important; }
body.theme-light .adm-ann-modal-box { background: #ffffff !important; border-color: #dde0e6 !important; }
body.theme-light .adm-ann-card { background: rgba(0,0,0,0.03) !important; }
body.theme-light .adm-ann-title { color: #111827 !important; }
body.theme-light .adm-ann-body { color: rgba(0,0,0,0.55) !important; }
body.theme-light .adm-ann-type { color: rgba(0,0,0,0.50) !important; }
body.theme-light .adm-ann-date { color: rgba(0,0,0,0.30) !important; }
body.theme-light .adm-modal-close { color: rgba(0,0,0,0.40) !important; }
body.theme-light .adm-modal-close:hover { color: rgba(0,0,0,0.80) !important; }

/* ── ウォームテーマ ── */

/* Toast */
body.theme-warm #kz-toast { background: #FFFFFF !important; color: #3D3531 !important; border-color: #EFE9E5 !important; box-shadow: 0 4px 20px rgba(61,53,49,0.10) !important; }
body.theme-warm #kz-toast.kzt-success { background: #dff0e0 !important; border-color: rgba(5,130,90,0.50) !important; }
body.theme-warm #kz-toast.kzt-error   { background: #f5e0e0 !important; border-color: rgba(192,57,43,0.50) !important; }

/* Confirm / td-modal */
body.theme-warm #kz-confirm-box,
body.theme-warm #td-modal-box { background: #FFFFFF !important; border-color: #EFE9E5 !important; box-shadow: 0 8px 32px rgba(61,53,49,0.12) !important; }
body.theme-warm #kz-confirm-title,
body.theme-warm #td-modal-desc { color: #3D3531 !important; }
body.theme-warm #kz-confirm-msg,
body.theme-warm .td-modal-label { color: rgba(61,53,49,0.52) !important; }
body.theme-warm .kz-btn-cancel { border-color: #EFE9E5 !important; color: rgba(61,53,49,0.55) !important; }
body.theme-warm .kz-btn-cancel:hover { border-color: #3D3531 !important; color: #3D3531 !important; }
body.theme-warm #td-modal-status { background: #F8F6F4 !important; border-color: #EFE9E5 !important; color: #3D3531 !important; }

/* em-modal 全体 */
body.theme-warm #em-app { background: #FFFFFF !important; }
body.theme-warm #em-tab-bar { background: #F8F6F4 !important; border-bottom-color: #EFE9E5 !important; }
body.theme-warm .em-tab-btn { color: rgba(61,53,49,0.52) !important; }
body.theme-warm .em-tab-btn:hover { color: #3D3531 !important; }
body.theme-warm .em-tab-btn.active { color: #E07A5F !important; border-bottom-color: #E07A5F !important; }
body.theme-warm #em-form-wrap { background: #F8F6F4 !important; }
body.theme-warm #em-edit-modal .em-field-group { background: #FFFFFF !important; border-color: #EFE9E5 !important; }
body.theme-warm #em-edit-modal #em-search-section > .em-field-group { background: #F8F6F4 !important; border-color: #EFE9E5 !important; }
body.theme-warm #em-edit-modal .em-section-title { color: rgba(61,53,49,0.45) !important; border-left-color: rgba(61,53,49,0.40) !important; }
body.theme-warm .em-field-input { color: #3D3531 !important; background: #FFFFFF !important; border-color: #EFE9E5 !important; }
body.theme-warm .em-field-input:focus { border-color: #E07A5F !important; box-shadow: 0 0 0 2.5px rgba(224,122,95,0.18) !important; }
body.theme-warm .em-field-input[readonly],
body.theme-warm .em-field-input.calc-out { background: #F0EBE5 !important; color: rgba(61,53,49,0.38) !important; border-color: #EFE9E5 !important; }
body.theme-warm #em-form-wrap::-webkit-scrollbar-thumb { background: #a89d8c !important; }
body.theme-warm #em-header { background: #F8F6F4 !important; }

/* ナビ */
body.theme-light .fp-sidebar { background: #252f3d !important; border-right-color: #1c2534 !important; }
body.theme-light .fp-logo-sub,
body.theme-light .fp-user-name,
body.theme-light .fp-version-label { color: rgba(255,255,255,0.55) !important; }
body.theme-light .fp-storage { border-color: rgba(255,255,255,0.12) !important; }
body.theme-light .fp-user-area { border-top-color: rgba(255,255,255,0.12) !important; }
body.theme-light .fp-nav-item,
body.theme-light .fp-nav-label { color: rgba(255,255,255,0.65) !important; }
body.theme-light .fp-nav-item:hover,
body.theme-light .fp-nav-item.active { background: rgba(255,255,255,0.10) !important; color: #ffffff !important; }

/* ── ライトテーマ: cu / sf / os モーダル ── */

/* アプリ背景 */
body.theme-light #cu-edit-modal #cu-app { background: #ffffff !important; }
body.theme-light #sf-edit-modal .em-app,
body.theme-light #os-edit-modal .em-app { background: #ffffff !important; }

/* ヘッダー */
body.theme-light #cu-edit-modal #cu-header,
body.theme-light #sf-edit-modal #sf-em-header,
body.theme-light #os-edit-modal #os-em-header { background: #f8f9fb !important; border-bottom-color: #dde0e6 !important; }

/* タブバー */
body.theme-light #cu-edit-modal #cu-tab-bar { background: #f4f5f7 !important; border-bottom-color: #dde0e6 !important; }

/* フォームラップ */
body.theme-light #cu-edit-modal #cu-form-wrap { background: #f4f5f7 !important; }
body.theme-light #sf-edit-modal #sf-em-form-body,
body.theme-light #os-edit-modal #os-em-form-body { background: #f4f5f7 !important; }

/* セクションタイトル */
body.theme-light #cu-edit-modal .section-title { color: rgba(0,0,0,0.45) !important; border-left-color: rgba(2,132,199,0.50) !important; }
body.theme-light #sf-edit-modal .em-section-title,
body.theme-light #os-edit-modal .em-section-title { color: rgba(0,0,0,0.45) !important; border-left-color: rgba(2,132,199,0.50) !important; }

/* フィールドグループ */
body.theme-light #cu-edit-modal .field-group { background: #ffffff !important; border-color: #dde0e6 !important; }
body.theme-light #sf-edit-modal .em-field-group,
body.theme-light #os-edit-modal .em-field-group { background: #ffffff !important; border-color: #dde0e6 !important; }
body.theme-light #st-section-invoice .field-group { background: #ffffff !important; border-color: #dde0e6 !important; }

/* フィールド入力 */
body.theme-light #cu-edit-modal .field-input { color: #111827 !important; background: #ffffff !important; border-color: #dde0e6 !important; }
body.theme-light #cu-edit-modal .field-input:focus { border-color: #0284c7 !important; box-shadow: 0 0 0 2.5px rgba(2,132,199,0.15) !important; }
body.theme-light #cu-edit-modal .field-input[readonly] { background: #f1f3f6 !important; color: rgba(0,0,0,0.38) !important; border-color: #e8eaee !important; }
body.theme-light #cu-edit-modal .field-label { color: rgba(0,0,0,0.55) !important; }

/* スクロールバー */
body.theme-light #sf-edit-modal #sf-em-form-body::-webkit-scrollbar-thumb,
body.theme-light #os-edit-modal #os-em-form-body::-webkit-scrollbar-thumb { background: #bcc3cc !important; }

/* フッター区切り */
body.theme-light #cu-edit-modal #cu-footer { box-shadow: 0 -1px 0 #dde0e6 !important; }

/* ── ウォームテーマ: cu / sf / os モーダル ── */

/* アプリ背景 */
body.theme-warm #cu-edit-modal #cu-app { background: #FFFFFF !important; }
body.theme-warm #sf-edit-modal .em-app,
body.theme-warm #os-edit-modal .em-app { background: #FFFFFF !important; }

/* ヘッダー */
body.theme-warm #cu-edit-modal #cu-header,
body.theme-warm #sf-edit-modal #sf-em-header,
body.theme-warm #os-edit-modal #os-em-header { background: #F8F6F4 !important; border-bottom-color: #EFE9E5 !important; }

/* タブバー */
body.theme-warm #cu-edit-modal #cu-tab-bar { background: #F8F6F4 !important; border-bottom-color: #EFE9E5 !important; }

/* フォームラップ */
body.theme-warm #cu-edit-modal #cu-form-wrap { background: #F8F6F4 !important; }
body.theme-warm #sf-edit-modal #sf-em-form-body,
body.theme-warm #os-edit-modal #os-em-form-body { background: #F8F6F4 !important; }

/* セクションタイトル */
body.theme-warm #cu-edit-modal .section-title { color: rgba(61,53,49,0.45) !important; border-left-color: rgba(61,53,49,0.40) !important; }
body.theme-warm #sf-edit-modal .em-section-title,
body.theme-warm #os-edit-modal .em-section-title { color: rgba(61,53,49,0.45) !important; border-left-color: rgba(61,53,49,0.40) !important; }

/* フィールドグループ */
body.theme-warm #cu-edit-modal .field-group { background: #FFFFFF !important; border-color: #EFE9E5 !important; }
body.theme-warm #sf-edit-modal .em-field-group,
body.theme-warm #os-edit-modal .em-field-group { background: #FFFFFF !important; border-color: #EFE9E5 !important; }
body.theme-warm #st-section-invoice .field-group { background: #FFFFFF !important; border-color: #EFE9E5 !important; }

/* フィールド入力 */
body.theme-warm #cu-edit-modal .field-input { color: #3D3531 !important; background: #FFFFFF !important; border-color: #EFE9E5 !important; }
body.theme-warm #cu-edit-modal .field-input:focus { border-color: #E07A5F !important; box-shadow: 0 0 0 2.5px rgba(224,122,95,0.18) !important; }
body.theme-warm #cu-edit-modal .field-input[readonly] { background: #F0EBE5 !important; color: rgba(61,53,49,0.38) !important; border-color: #EFE9E5 !important; }
body.theme-warm #cu-edit-modal .field-label { color: rgba(61,53,49,0.55) !important; }

/* スクロールバー */
body.theme-warm #sf-edit-modal #sf-em-form-body::-webkit-scrollbar-thumb,
body.theme-warm #os-edit-modal #os-em-form-body::-webkit-scrollbar-thumb { background: #a89d8c !important; }

/* フッター区切り */
body.theme-warm #cu-edit-modal #cu-footer { box-shadow: 0 -1px 0 #EFE9E5 !important; }

/* ── ライトテーマ: 検索・フィルターバー追加分 ── */
body.theme-light #aq-search { background: #ffffff !important; color: #111827 !important; border-color: #dde0e6 !important; }
body.theme-light #aq-filter-status { background: #ffffff !important; color: rgba(0,0,0,0.55) !important; border-color: #dde0e6 !important; }
body.theme-light #ps-search { background: #ffffff !important; color: #111827 !important; border-color: #dde0e6 !important; }
body.theme-light #ps-toolbar { background: transparent !important; }

/* ── ライトテーマ: ps-edit-modal ── */
body.theme-light #ps-edit-modal .modal-inner { background: #ffffff !important; }
body.theme-light #ps-edit-modal #ps-em-header { background: #f8f9fb !important; }
body.theme-light #ps-edit-modal #ps-em-tabs { background: #f4f5f7 !important; border-bottom-color: #dde0e6 !important; }
body.theme-light #ps-edit-modal .em-tab { color: rgba(0,0,0,0.52) !important; }
body.theme-light #ps-edit-modal .em-tab:hover { color: #111827 !important; }
body.theme-light #ps-edit-modal .em-tab.active { color: #0284c7 !important; border-bottom-color: #0284c7 !important; }
body.theme-light #ps-edit-modal .em-section-title { color: rgba(0,0,0,0.70) !important; }
body.theme-light #ps-edit-modal .em-field-label .req { color: #dc2626 !important; }
body.theme-light #ps-edit-modal .em-field-input { color: #111827 !important; }

/* ── ライトテーマ: aq-edit-modal ── */
body.theme-light #aq-edit-modal .em-tab.active { color: #0284c7 !important; }
body.theme-light #aq-edit-modal .em-section-title { color: rgba(0,0,0,0.60) !important; }
body.theme-light #aq-edit-modal .em-field-label .req { color: #dc2626 !important; }
body.theme-light #aq-edit-modal .em-field-input { color: #111827 !important; }

/* ── ウォームテーマ: 検索・フィルターバー追加分 ── */
body.theme-warm #aq-search { background: #FFFFFF !important; color: #3D3531 !important; border-color: #EFE9E5 !important; }
body.theme-warm #aq-filter-status { background: #FFFFFF !important; color: rgba(61,53,49,0.55) !important; border-color: #EFE9E5 !important; }
body.theme-warm #ps-search { background: #FFFFFF !important; color: #3D3531 !important; border-color: #EFE9E5 !important; }
body.theme-warm #ps-toolbar { background: transparent !important; }

/* ── ウォームテーマ: ps-edit-modal ── */
body.theme-warm #ps-edit-modal .modal-inner { background: #FFFFFF !important; }
body.theme-warm #ps-edit-modal #ps-em-header { background: #F8F6F4 !important; }
body.theme-warm #ps-edit-modal #ps-em-tabs { background: #F8F6F4 !important; border-bottom-color: #EFE9E5 !important; }
body.theme-warm #ps-edit-modal .em-tab { color: rgba(61,53,49,0.52) !important; }
body.theme-warm #ps-edit-modal .em-tab:hover { color: #3D3531 !important; }
body.theme-warm #ps-edit-modal .em-tab.active { color: #E07A5F !important; border-bottom-color: #E07A5F !important; }
body.theme-warm #ps-edit-modal .em-section-title { color: rgba(61,53,49,0.70) !important; }
body.theme-warm #ps-edit-modal .em-field-label .req { color: #b91c1c !important; }
body.theme-warm #ps-edit-modal .em-field-input { color: #3D3531 !important; }

/* ── ウォームテーマ: aq-edit-modal ── */
body.theme-warm #aq-edit-modal .em-tab.active { color: #E07A5F !important; }
body.theme-warm #aq-edit-modal .em-section-title { color: rgba(61,53,49,0.60) !important; }
body.theme-warm #aq-edit-modal .em-field-label .req { color: #b91c1c !important; }
body.theme-warm #aq-edit-modal .em-field-input { color: #3D3531 !important; }

/* ── ライトテーマ: ps フィルターセレクト ── */
body.theme-light #ps-filter-bar { background: transparent !important; }
body.theme-light #ps-filter-status { background: #ffffff !important; color: rgba(0,0,0,0.55) !important; border-color: #dde0e6 !important; }

/* ── ライトテーマ: 管理パネル ユーザーカード ── */
body.theme-light .adm-user-card { background: #ffffff !important; border-color: #dde0e6 !important; }
body.theme-light .adm-user-name { color: #111827 !important; }
body.theme-light .adm-user-meta { color: rgba(0,0,0,0.45) !important; }
body.theme-light .adm-plan-stat-card { background: #f8f9fb !important; border-color: #dde0e6 !important; }
body.theme-light .adm-plan-stat-name { color: rgba(0,0,0,0.45) !important; }
body.theme-light .adm-plan-stat-count { color: #111827 !important; }
body.theme-light .adm-plan-badge.Free { background: rgba(0,0,0,0.06) !important; color: rgba(0,0,0,0.55) !important; }
body.theme-light .adm-plan-select { background: #ffffff !important; border-color: #dde0e6 !important; color: rgba(0,0,0,0.70) !important; }

/* ── ライトテーマ: 管理パネル stat / donut / storage ── */
body.theme-light .adm-stat-card { background: #f8f9fb !important; border-color: #dde0e6 !important; }
body.theme-light .adm-stat-card-label { color: rgba(0,0,0,0.45) !important; }
body.theme-light .adm-donut-card { background: #f8f9fb !important; border-color: #dde0e6 !important; }
body.theme-light .adm-donut-card-title { color: rgba(0,0,0,0.45) !important; }
body.theme-light .adm-donut-center-val { color: #111827 !important; }
body.theme-light .adm-donut-center-label { color: rgba(0,0,0,0.35) !important; }
body.theme-light .adm-pie-legend-name { color: rgba(0,0,0,0.50) !important; }
body.theme-light .adm-pie-legend-val { color: #111827 !important; }
body.theme-light .adm-pie-legend-pct { color: rgba(0,0,0,0.35) !important; }
body.theme-light .adm-total-bar-card { background: #f8f9fb !important; border-color: #dde0e6 !important; }

/* ── ウォームテーマ: ps フィルターセレクト ── */
body.theme-warm #ps-filter-bar { background: transparent !important; }
body.theme-warm #ps-filter-status { background: #FFFFFF !important; color: rgba(61,53,49,0.55) !important; border-color: #EFE9E5 !important; }

/* ── ウォームテーマ: 管理パネル ユーザーカード ── */
body.theme-warm .adm-user-card { background: #FFFFFF !important; border-color: #EFE9E5 !important; }
body.theme-warm .adm-user-name { color: #3D3531 !important; }
body.theme-warm .adm-user-meta { color: rgba(61,53,49,0.45) !important; }
body.theme-warm .adm-plan-stat-card { background: #F8F6F4 !important; border-color: #EFE9E5 !important; }
body.theme-warm .adm-plan-stat-name { color: rgba(61,53,49,0.45) !important; }
body.theme-warm .adm-plan-stat-count { color: #3D3531 !important; }
body.theme-warm .adm-plan-badge.Free { background: rgba(61,53,49,0.08) !important; color: rgba(61,53,49,0.55) !important; }
body.theme-warm .adm-plan-select { background: #FFFFFF !important; border-color: #EFE9E5 !important; color: rgba(61,53,49,0.70) !important; }

/* ── ウォームテーマ: 管理パネル stat / donut / storage ── */
body.theme-warm .adm-stat-card { background: #F8F6F4 !important; border-color: #EFE9E5 !important; }
body.theme-warm .adm-stat-card-label { color: rgba(61,53,49,0.45) !important; }
body.theme-warm .adm-donut-card { background: #F8F6F4 !important; border-color: #EFE9E5 !important; }
body.theme-warm .adm-donut-card-title { color: rgba(61,53,49,0.45) !important; }
body.theme-warm .adm-donut-center-val { color: #3D3531 !important; }
body.theme-warm .adm-donut-center-label { color: rgba(61,53,49,0.35) !important; }
body.theme-warm .adm-pie-legend-name { color: rgba(61,53,49,0.50) !important; }
body.theme-warm .adm-pie-legend-val { color: #3D3531 !important; }
body.theme-warm .adm-pie-legend-pct { color: rgba(61,53,49,0.35) !important; }
body.theme-warm .adm-total-bar-card { background: #F8F6F4 !important; border-color: #EFE9E5 !important; }

/* ── ライトテーマ: ナビラベル・アイコン（ダークサイドバー上で白テキスト） ── */
body.theme-light .nav-label { color: rgba(255,255,255,0.65) !important; }
body.theme-light .nav-item:hover .nav-label { color: #ffffff !important; }
body.theme-light .nav-item.active .nav-label { color: #ffffff !important; font-weight: 700; }
body.theme-light .nav-icon svg path,
body.theme-light .nav-icon svg rect,
body.theme-light .nav-icon svg circle,
body.theme-light .nav-icon svg polyline,
body.theme-light .nav-icon svg line,
body.theme-light .nav-icon svg polygon { stroke: rgba(255,255,255,0.60) !important; }
body.theme-light .nav-item:hover .nav-icon svg path,
body.theme-light .nav-item:hover .nav-icon svg rect,
body.theme-light .nav-item:hover .nav-icon svg circle,
body.theme-light .nav-item:hover .nav-icon svg polyline,
body.theme-light .nav-item:hover .nav-icon svg line,
body.theme-light .nav-item:hover .nav-icon svg polygon,
body.theme-light .nav-item.active .nav-icon svg path,
body.theme-light .nav-item.active .nav-icon svg rect,
body.theme-light .nav-item.active .nav-icon svg circle,
body.theme-light .nav-item.active .nav-icon svg polyline,
body.theme-light .nav-item.active .nav-icon svg line,
body.theme-light .nav-item.active .nav-icon svg polygon { stroke: #ffffff !important; }

/* ── ライトテーマ: ストレージ容量ウィジェット（サイドバーと同色の濃紺） ── */
body.theme-light #sg-app-wrapper { background: #252f3d !important; }
body.theme-light #sg-plan-badge { background: rgba(255,255,255,0.10) !important; border-color: rgba(255,255,255,0.15) !important; }
body.theme-light #sg-plan-name { color: rgba(255,255,255,0.70) !important; }
body.theme-light #sg-pct-value,
body.theme-light #sg-pct-unit { color: rgba(255,255,255,0.90) !important; }
body.theme-light #sg-used-val,
body.theme-light #sg-max-val,
body.theme-light #sg-usage-sep { color: rgba(255,255,255,0.55) !important; }
body.theme-light #sg-bar-track { background: rgba(255,255,255,0.12) !important; }
body.theme-light .ring-track { stroke: rgba(255,255,255,0.15) !important; }

/* ── ライトテーマ: 管理ステート ── */
/* タブバー */
body.theme-light .adm-tab { color: rgba(0,0,0,0.50) !important; }
body.theme-light .adm-tab.active { color: #059669 !important; border-bottom-color: #059669 !important; }
body.theme-light .adm-tab:hover:not(.active) { color: rgba(0,0,0,0.75) !important; }
body.theme-light .adm-section-header { color: #059669 !important; }
/* メッセージ・テキスト系（ハードコード白を上書き） */
body.theme-light #adm-thread-list { color: rgba(0,0,0,0.70) !important; }
body.theme-light #adm-thread-list span,
body.theme-light #adm-thread-list div { color: inherit !important; }
body.theme-light .adm-thread-item { color: rgba(0,0,0,0.70) !important; }
body.theme-light .adm-thread-time,
body.theme-light .adm-thread-meta { color: rgba(0,0,0,0.40) !important; }
body.theme-light #adm-msg-list { color: rgba(0,0,0,0.75) !important; }
body.theme-light #adm-msg-list span,
body.theme-light #adm-msg-list div { color: inherit !important; }
body.theme-light .adm-bubble { background: #f1f3f6 !important; color: #111827 !important; }
/* ストレージパネル内テキスト */
body.theme-light #adm-tab-storage .adm-stor-item { color: rgba(0,0,0,0.70) !important; }
body.theme-light #adm-tab-storage span { color: inherit !important; }
body.theme-light .adm-stor-bar-pct { color: rgba(0,0,0,0.45) !important; }
/* ユーザーリスト */
body.theme-light #adm-user-list { color: rgba(0,0,0,0.70) !important; }
body.theme-light #adm-user-list span { color: inherit !important; }
/* サブスク・購入テーブル */
body.theme-light #adm-subs-tbody,
body.theme-light #adm-purchases-tbody { color: rgba(0,0,0,0.70) !important; }
body.theme-light #adm-subs-tbody td,
body.theme-light #adm-purchases-tbody td { color: inherit !important; }
body.theme-light #adm-subs-tbody span,
body.theme-light #adm-purchases-tbody span { color: inherit !important; }
/* イベントリスト */
body.theme-light #adm-sub-events-list { color: rgba(0,0,0,0.70) !important; }
body.theme-light #adm-sub-events-list span { color: inherit !important; }
/* プランステート（合計カードのinline styleを上書き） */
body.theme-light #adm-plan-stat-row .adm-plan-stat-count { color: #111827 !important; }

/* ── ライトテーマ: ボタン塗りつぶし統一 ── */

/* キャンセル系（白地・ボーダー・ダークテキスト） */
body.theme-light .kz-btn-cancel { background: #ffffff !important; border-color: #dde0e6 !important; color: rgba(0,0,0,0.65) !important; }
body.theme-light .kz-btn-cancel:hover { background: #f4f5f7 !important; border-color: #0284c7 !important; color: #0284c7 !important; }
body.theme-light #em-btnCancel { background: #ffffff !important; border-color: #dde0e6 !important; color: rgba(0,0,0,0.65) !important; }
body.theme-light #em-btnCancel:hover { background: #f4f5f7 !important; border-color: #0284c7 !important; color: #0284c7 !important; }
body.theme-light .btn-cancel { background: #ffffff !important; border-color: #dde0e6 !important; color: rgba(0,0,0,0.65) !important; }
body.theme-light .btn-cancel:hover { background: #f4f5f7 !important; border-color: #0284c7 !important; color: #0284c7 !important; }

/* プライマリ（青・塗りつぶし） */
body.theme-light #em-btnSave { background: #0284c7 !important; border-color: #0284c7 !important; color: #ffffff !important; }
body.theme-light #em-btnSave:hover { background: #0369a1 !important; border-color: #0369a1 !important; }
body.theme-light #em-btnSave:disabled { background: #dde0e6 !important; border-color: #dde0e6 !important; color: rgba(0,0,0,0.35) !important; }
body.theme-light .kz-btn-ok.kz-ok-default { background: #0284c7 !important; border-color: #0284c7 !important; color: #ffffff !important; }
body.theme-light .kz-btn-ok.kz-ok-warn { background: #64748b !important; border-color: #64748b !important; color: #ffffff !important; }
body.theme-light .kz-btn-ok.kz-ok-danger { background: #dc2626 !important; border-color: #dc2626 !important; color: #ffffff !important; }

/* 削除・危険（赤・塗りつぶし） */
body.theme-light .btn-confirm-delete { background: #dc2626 !important; border-color: #dc2626 !important; color: #ffffff !important; }
body.theme-light #cu-btn-bulk-delete { background: #dc2626 !important; border-color: #dc2626 !important; color: #ffffff !important; }

/* アクションボタン（小・塗りつぶし） */
body.theme-light .btn-edit    { background: #d97706 !important; border-color: #d97706 !important; color: #ffffff !important; }
body.theme-light .btn-line    { background: #059669 !important; border-color: #059669 !important; color: #ffffff !important; }
body.theme-light .btn-copy    { background: #0284c7 !important; border-color: #0284c7 !important; color: #ffffff !important; }
body.theme-light .btn-delete  { background: #dc2626 !important; border-color: #dc2626 !important; color: #ffffff !important; }
body.theme-light .btn-restore { background: #059669 !important; border-color: #059669 !important; color: #ffffff !important; }
body.theme-light .btn-perm-del { background: #dc2626 !important; border-color: #dc2626 !important; color: #ffffff !important; }
body.theme-light .btn-line.disabled { background: #eaecef !important; border-color: #dde0e6 !important; color: rgba(0,0,0,0.35) !important; }

/* ZIP・アンケートボタン */
body.theme-light #em-btnZip { background: #059669 !important; border-color: #059669 !important; color: #ffffff !important; }
body.theme-light #em-btnZip:hover { background: #047857 !important; border-color: #047857 !important; }
body.theme-light #em-btnAnketa { background: #d97706 !important; border-color: #d97706 !important; color: #ffffff !important; }
body.theme-light #em-btnAnketa:hover { background: #b45309 !important; }

/* 顧客削除済みトグル */
body.theme-light #cu-btn-deleted-toggle { background: #ffffff !important; border-color: #dde0e6 !important; color: rgba(0,0,0,0.65) !important; }
body.theme-light #cu-btn-deleted-toggle.active { background: #dc2626 !important; border-color: #dc2626 !important; color: #ffffff !important; }

/* 顧客一覧バッジ — 淡色背景に白文字が見えない問題の修正（light/warm） */
body.theme-light .line-badge.connected,
body.theme-warm  .line-badge.connected { color: #059669 !important; }
body.theme-light .latest-category,
body.theme-warm  .latest-category { color: #0284c7 !important; }

/* 管理一覧の行ホバー — 白背景に白ホバーで反応が見えない問題の修正 */
body.theme-light .customer-row:hover,
body.theme-light .outsourcer-row:hover,
body.theme-light .staff-row:hover { background: rgba(0,0,0,0.04) !important; }
body.theme-warm .customer-row:hover,
body.theme-warm .outsourcer-row:hover,
body.theme-warm .staff-row:hover { background: rgba(61,53,49,0.05) !important; }

/* ── ライトテーマ: em-app / em-form-wrap 黒背景修正（高specificity版） ── */
/* hardcoded dark ブロックの #em-edit-modal #em-app (spec:200) を spec:211 で上書き */
body.theme-light #em-edit-modal #em-app { background: #ffffff !important; }
body.theme-light #cu-edit-modal #cu-app { background: #ffffff !important; }
body.theme-light #em-edit-modal #em-form-wrap,
body.theme-light #cu-edit-modal #cu-form-wrap { background: #f4f5f7 !important; }

/* ── ライトテーマ: cu-edit-modal タブ選択文字 ── */
body.theme-light #cu-edit-modal .tab-btn { color: rgba(0,0,0,0.52) !important; }
body.theme-light #cu-edit-modal .tab-btn:hover { color: #111827 !important; }
body.theme-light #cu-edit-modal .tab-btn.active { color: #0284c7 !important; border-bottom-color: #0284c7 !important; }

/* ── ライトテーマ: ギャラリー album-btn hover 枠消え修正 ── */
body.theme-light #gl-app .gl-album-actions button:hover { border-color: #b0b8c4 !important; color: #111827 !important; background: #f1f3f6 !important; }
body.theme-light #gl-app .gl-album-actions .btn-album-delete:hover { border-color: rgba(220,38,38,0.5) !important; color: #dc2626 !important; background: rgba(220,38,38,0.08) !important; }

/* ── ライト/ウォームテーマ: 全ボタン塗りつぶし統一 ── */

/* セットアップバナー .sb-item-btn（Image #5） */
body.theme-light .sb-item-btn,
body.theme-warm .sb-item-btn { background: #d97706 !important; border-color: #d97706 !important; color: #ffffff !important; }
body.theme-light .sb-item-btn:hover,
body.theme-warm .sb-item-btn:hover { opacity: 0.85 !important; }

/* 詳細/Upload ボタン（Image #6） */
body.theme-light .btn-edit,
body.theme-warm .btn-edit  { background: #d97706 !important; border-color: #d97706 !important; color: #ffffff !important; }
body.theme-light .btn-upload,
body.theme-warm .btn-upload { background: #059669 !important; border-color: #059669 !important; color: #ffffff !important; }
body.theme-light .pj-btn-upload,
body.theme-warm .pj-btn-upload { background: #059669 !important; border-color: #059669 !important; color: #ffffff !important; }

/* サイドバー 新規登録ボタン（Image #7） */
body.theme-light .action-customer { background: #059669 !important; border-color: #059669 !important; color: #ffffff !important; }
body.theme-light .action-project  { background: #0284c7 !important; border-color: #0284c7 !important; color: #ffffff !important; }
/* warm: 参照デザイン準拠 — 新規顧客=セカンダリ(透過+淡枠)、新規案件=プライマリ(テラコッタ) */
body.theme-warm .action-customer {
  background: transparent !important;
  border-color: rgba(255,255,255,0.20) !important;
  color: #FFFFFF !important;
}
body.theme-warm .action-customer:hover {
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.40) !important;
}
body.theme-warm .action-project {
  background: #E07A5F !important;
  border-color: #E07A5F !important;
  color: #FFFFFF !important;
}
body.theme-warm .action-project:hover {
  background: #D06A50 !important;
  border-color: #D06A50 !important;
}

/* 住所検索ボタン - 高specificity版（Image #8 / hardcoded dark spec:200 を211で上書き） */
body.theme-light #em-edit-modal #em-btnZip { background: #0284c7 !important; border-color: #0284c7 !important; color: #ffffff !important; }
body.theme-light #em-edit-modal #em-btnZip:hover { background: #0369a1 !important; border-color: #0369a1 !important; }
body.theme-warm  #em-edit-modal #em-btnZip { background: #0284c7 !important; border-color: #0284c7 !important; color: #ffffff !important; }

/* em-modal 保存ボタン - 高specificity版 */
body.theme-light #em-edit-modal #em-btnSave  { background: #0284c7 !important; border-color: #0284c7 !important; color: #ffffff !important; }
body.theme-light #em-edit-modal #em-btnSave:hover { background: #0369a1 !important; border-color: #0369a1 !important; }
body.theme-warm  #em-edit-modal #em-btnSave  { background: #0284c7 !important; border-color: #0284c7 !important; color: #ffffff !important; }

/* スタッフ・外注・撮影会・アンケートモーダルの保存ボタン */
body.theme-light #sf-edit-modal #sf-em-btnSave,
body.theme-warm  #sf-edit-modal #sf-em-btnSave { background: #0284c7 !important; border-color: #0284c7 !important; color: #ffffff !important; }
body.theme-light #os-edit-modal #os-em-btnSave,
body.theme-warm  #os-edit-modal #os-em-btnSave { background: #0284c7 !important; border-color: #0284c7 !important; color: #ffffff !important; }
body.theme-light #ps-edit-modal #ps-em-btnSave,
body.theme-warm  #ps-edit-modal #ps-em-btnSave { background: #0284c7 !important; border-color: #0284c7 !important; color: #ffffff !important; }

/* 新規追加・登録ボタン */
body.theme-light #sf-btn-new,
body.theme-warm  #sf-btn-new { background: #059669 !important; border-color: #059669 !important; color: #ffffff !important; }
body.theme-light #os-btn-new,
body.theme-warm  #os-btn-new { background: #d97706 !important; border-color: #d97706 !important; color: #ffffff !important; }
body.theme-light #stl-btn-add-tmpl,
body.theme-warm  #stl-btn-add-tmpl { background: #059669 !important; border-color: #059669 !important; color: #ffffff !important; }
body.theme-light #ps-ap-btnClose2,
body.theme-warm  #ps-ap-btnClose2 { background: #059669 !important; border-color: #059669 !important; color: #ffffff !important; }
body.theme-light #ps-ap-table-wrap .btn-register,
body.theme-warm  #ps-ap-table-wrap .btn-register { background: #0284c7 !important; border-color: #0284c7 !important; color: #ffffff !important; }

/* オンボーディング ネクストボタン */
body.theme-light .ob-btn-next,
body.theme-warm  .ob-btn-next { background: #0284c7 !important; border-color: #0284c7 !important; color: #ffffff !important; }
body.theme-light .ob-action-btn,
body.theme-warm  .ob-action-btn { background: #0284c7 !important; border-color: #0284c7 !important; color: #ffffff !important; }

/* ウォームテーマ保存系ボタン（.kz-ok, .kz-btn-ok） */
body.theme-warm .kz-btn-ok.kz-ok-default { background: #0284c7 !important; border-color: #0284c7 !important; color: #ffffff !important; }
body.theme-warm .kz-btn-ok.kz-ok-warn    { background: #64748b !important; border-color: #64748b !important; color: #ffffff !important; }
body.theme-warm .kz-btn-ok.kz-ok-danger  { background: #dc2626 !important; border-color: #dc2626 !important; color: #ffffff !important; }
body.theme-warm .kz-btn-cancel { background: rgba(255,255,255,0.60) !important; border-color: rgba(61,53,49,0.20) !important; color: rgba(61,53,49,0.70) !important; }
body.theme-warm #em-btnSave  { background: #0284c7 !important; border-color: #0284c7 !important; color: #ffffff !important; }
body.theme-warm #em-btnCancel { background: rgba(255,255,255,0.50) !important; border-color: rgba(61,53,49,0.20) !important; color: rgba(61,53,49,0.65) !important; }
body.theme-warm .btn-cancel   { background: rgba(255,255,255,0.50) !important; border-color: rgba(61,53,49,0.20) !important; color: rgba(61,53,49,0.65) !important; }
body.theme-warm .btn-confirm-delete { background: #dc2626 !important; border-color: #dc2626 !important; color: #ffffff !important; }
body.theme-warm .btn-edit    { background: #d97706 !important; border-color: #d97706 !important; color: #ffffff !important; }
body.theme-warm .btn-line    { background: #059669 !important; border-color: #059669 !important; color: #ffffff !important; }
body.theme-warm .btn-copy    { background: #0284c7 !important; border-color: #0284c7 !important; color: #ffffff !important; }
body.theme-warm .btn-delete  { background: #dc2626 !important; border-color: #dc2626 !important; color: #ffffff !important; }
body.theme-warm .btn-restore { background: #059669 !important; border-color: #059669 !important; color: #ffffff !important; }
body.theme-warm #em-btnZip   { background: #059669 !important; border-color: #059669 !important; color: #ffffff !important; }
body.theme-warm #em-btnAnketa { background: #d97706 !important; border-color: #d97706 !important; color: #ffffff !important; }

/* ── ライト/ウォームテーマ: 全ステート残ボタン塗りつぶし ── */

/* ── 案件リスト (.pj-btn-edit / .btn-green / .em-invoice-btn) ── */
body.theme-light .pj-btn-edit { background: #d97706 !important; border-color: #d97706 !important; color: #ffffff !important; }
body.theme-light .btn-green,
body.theme-warm  .btn-green   { background: #d97706 !important; border-color: #d97706 !important; color: #ffffff !important; }
body.theme-light .btn-danger,
body.theme-warm  .btn-danger  { background: #dc2626 !important; border-color: #dc2626 !important; color: #ffffff !important; }

/* ── 請求書ボタン ── */
body.theme-light .em-invoice-btn,
body.theme-warm  .em-invoice-btn { background: #d97706 !important; color: #ffffff !important; }
body.theme-light .em-invoice-btn.receipt,
body.theme-warm  .em-invoice-btn.receipt { background: #059669 !important; color: #ffffff !important; }
body.theme-light .em-invoice-btn.estimate,
body.theme-warm  .em-invoice-btn.estimate { background: #6366f1 !important; color: #ffffff !important; }

/* ── LINEメッセージ送信 ── */
body.theme-light .btn-send-line,
body.theme-warm  .btn-send-line { background: #059669 !important; border-color: #059669 !important; color: #ffffff !important; }

/* ── トグルアクティブ状態 ── */
body.theme-light #ap-btn-done-toggle.active,
body.theme-warm  #ap-btn-done-toggle.active    { background: #059669 !important; border-color: #059669 !important; color: #ffffff !important; }
body.theme-light #ap-btn-deleted-toggle.active,
body.theme-warm  #ap-btn-deleted-toggle.active { background: #dc2626 !important; border-color: #dc2626 !important; color: #ffffff !important; }
body.theme-light #os-btn-deleted-toggle.active,
body.theme-warm  #os-btn-deleted-toggle.active { background: #dc2626 !important; border-color: #dc2626 !important; color: #ffffff !important; }
body.theme-light #sf-btn-deleted-toggle.active,
body.theme-warm  #sf-btn-deleted-toggle.active { background: #dc2626 !important; border-color: #dc2626 !important; color: #ffffff !important; }

/* ── 確認モーダルボタン ── */
body.theme-light .btn-confirm-ok,
body.theme-warm  .btn-confirm-ok  { background: #dc2626 !important; border-color: #dc2626 !important; color: #ffffff !important; }
body.theme-light .btn-ok-modal,
body.theme-warm  .btn-ok-modal    { background: #059669 !important; border-color: #059669 !important; color: #ffffff !important; }
body.theme-light .btn-danger-modal,
body.theme-warm  .btn-danger-modal { background: #dc2626 !important; border-color: #dc2626 !important; color: #ffffff !important; }
body.theme-light .btn-cancel-modal,
body.theme-warm  .btn-cancel-modal { background: #ffffff !important; border-color: #dde0e6 !important; color: rgba(0,0,0,0.65) !important; }
body.theme-light #stl-btnCancel,
body.theme-warm  #stl-btnCancel { background: #ffffff !important; border-color: #dde0e6 !important; color: rgba(0,0,0,0.65) !important; }

/* ── 危険系・テーブルボタン ── */
body.theme-light .tb-btn-danger,
body.theme-warm  .tb-btn-danger { background: #dc2626 !important; border-color: #dc2626 !important; color: #ffffff !important; }

/* ── ギャラリーボタン ── */
body.theme-light #gl-btn-view-gallery,
body.theme-warm  #gl-btn-view-gallery { background: #0284c7 !important; border-color: #0284c7 !important; color: #ffffff !important; }
body.theme-light .btn-gallery,
body.theme-warm  .btn-gallery { background: #0284c7 !important; border-color: #0284c7 !important; color: #ffffff !important; }
body.theme-light #gl-btn-save,
body.theme-light #gl-btn-save-cpsettings,
body.theme-warm  #gl-btn-save,
body.theme-warm  #gl-btn-save-cpsettings { background: #0284c7 !important; border-color: #0284c7 !important; color: #ffffff !important; }
body.theme-light #gl-btn-cancel,
body.theme-warm  #gl-btn-cancel { background: #ffffff !important; border-color: #dde0e6 !important; color: rgba(0,0,0,0.65) !important; }

/* ── 外注モーダルURLボタン ── */
body.theme-light #os-edit-modal #os-em-btn-issue-url,
body.theme-warm  #os-edit-modal #os-em-btn-issue-url { background: #059669 !important; border-color: #059669 !important; color: #ffffff !important; }
body.theme-light #os-edit-modal #os-em-btn-copy-url,
body.theme-warm  #os-edit-modal #os-em-btn-copy-url  { background: #059669 !important; border-color: #059669 !important; color: #ffffff !important; }

/* ── メッセージ送信ボタン ── */
body.theme-light .msg-send-btn,
body.theme-warm  .msg-send-btn { background: #0284c7 !important; border-color: #0284c7 !important; color: #ffffff !important; }

/* ── Stripe連携ボタン ── */
body.theme-light #st-section-studio .stripe-btn-primary,
body.theme-warm  #st-section-studio .stripe-btn-primary { background: #7c3aed !important; border-color: #7c3aed !important; color: #ffffff !important; }

/* ── Instagram 新規投稿ボタン ── */
body.theme-light .ig-btn-new { background: #f1f3f6 !important; border-color: #dde0e6 !important; color: rgba(0,0,0,0.70) !important; }
body.theme-light .ig-btn-new:hover { border-color: #0284c7 !important; color: #0284c7 !important; background: #f4f5f7 !important; }

/* ════════════════════════════════════════════════════════════
   v1.68.23  ライト/ウォームテーマ: 残存ボタン全面塗りつぶし修正
   ════════════════════════════════════════════════════════════ */

/* ── + 新規ボタン（ap/cu/ps）: 暗ブロック spec100 をspec111で確実に上書き ── */
body.theme-light #ap-btn-new,
body.theme-warm  #ap-btn-new { background: #059669 !important; border-color: #059669 !important; color: #ffffff !important; }
body.theme-light #ap-btn-new:hover,
body.theme-warm  #ap-btn-new:hover { background: #047857 !important; border-color: #047857 !important; }
body.theme-light #cu-btn-new,
body.theme-warm  #cu-btn-new { background: #059669 !important; border-color: #059669 !important; color: #ffffff !important; }
body.theme-light #cu-btn-new:hover,
body.theme-warm  #cu-btn-new:hover { background: #047857 !important; border-color: #047857 !important; }
body.theme-light #ps-btnNew,
body.theme-warm  #ps-btnNew { background: #059669 !important; border-color: #059669 !important; color: #ffffff !important; }
body.theme-light #ps-btnNew:hover,
body.theme-warm  #ps-btnNew:hover { background: #047857 !important; border-color: #047857 !important; }
body.theme-light #ps-btnNewEmpty,
body.theme-warm  #ps-btnNewEmpty { background: #059669 !important; border-color: #059669 !important; color: #ffffff !important; }

/* ── em/cu/ps モーダルタブバー: 暗ブロック spec200 をspec211で上書き ── */
body.theme-light #em-edit-modal #em-tab-bar,
body.theme-warm  #em-edit-modal #em-tab-bar { background: #f4f5f7 !important; border-bottom-color: #dde0e6 !important; }
body.theme-light #cu-edit-modal #cu-tab-bar,
body.theme-warm  #cu-edit-modal #cu-tab-bar { background: #f4f5f7 !important; border-bottom-color: #dde0e6 !important; }
body.theme-light #ps-edit-modal #ps-em-tabs,
body.theme-warm  #ps-edit-modal #ps-em-tabs { background: #f4f5f7 !important; border-bottom-color: #dde0e6 !important; }

/* ── スタッフモーダル: URLを発行・URLコピー・招待（spec200→spec211） ── */
body.theme-light #sf-edit-modal #sf-em-btn-issue-url,
body.theme-warm  #sf-edit-modal #sf-em-btn-issue-url { background: #059669 !important; border-color: #059669 !important; color: #ffffff !important; }
body.theme-light #sf-edit-modal #sf-em-btn-issue-url:hover,
body.theme-warm  #sf-edit-modal #sf-em-btn-issue-url:hover { background: #047857 !important; }
body.theme-light #sf-edit-modal #sf-em-btn-copy-url,
body.theme-warm  #sf-edit-modal #sf-em-btn-copy-url { background: #059669 !important; border-color: #059669 !important; color: #ffffff !important; }
body.theme-light #sf-edit-modal #sf-em-btn-copy-url:hover,
body.theme-warm  #sf-edit-modal #sf-em-btn-copy-url:hover { background: #047857 !important; }
body.theme-light #sf-edit-modal #sf-em-btnInvite,
body.theme-warm  #sf-edit-modal #sf-em-btnInvite { background: #7c3aed !important; border-color: #7c3aed !important; color: #ffffff !important; }
body.theme-light #sf-edit-modal #sf-em-btnInvite:hover:not(:disabled),
body.theme-warm  #sf-edit-modal #sf-em-btnInvite:hover:not(:disabled) { background: #6d28d9 !important; }
body.theme-light #sf-edit-modal #sf-em-btnCancel,
body.theme-warm  #sf-edit-modal #sf-em-btnCancel { background: #ffffff !important; border-color: #dde0e6 !important; color: rgba(0,0,0,0.65) !important; }
body.theme-light #sf-edit-modal #sf-em-btnCancel:hover,
body.theme-warm  #sf-edit-modal #sf-em-btnCancel:hover { background: #f4f5f7 !important; }
/* 外注モーダルキャンセルも同様 */
body.theme-light #os-edit-modal #os-em-btnCancel,
body.theme-warm  #os-edit-modal #os-em-btnCancel { background: #ffffff !important; border-color: #dde0e6 !important; color: rgba(0,0,0,0.65) !important; }
body.theme-light #os-edit-modal #os-em-btnCancel:hover,
body.theme-warm  #os-edit-modal #os-em-btnCancel:hover { background: #f4f5f7 !important; }

/* ── ギャラリー アルバムアップロードボタン ── */
body.theme-light #em-edit-modal .em-delivery-album-list .em-album-upload-btn,
body.theme-warm  #em-edit-modal .em-delivery-album-list .em-album-upload-btn { background: #0284c7 !important; border-color: #0284c7 !important; color: #ffffff !important; }
body.theme-light #em-edit-modal .em-delivery-album-list .em-album-upload-btn:hover,
body.theme-warm  #em-edit-modal .em-delivery-album-list .em-album-upload-btn:hover { background: #0369a1 !important; }

/* ── Instagram フォトピッカー ボタン ── */
body.theme-light .ig-btn-add,
body.theme-warm  .ig-btn-add { background: #0284c7 !important; border-color: #0284c7 !important; color: #ffffff !important; }
body.theme-light .ig-btn-add:hover,
body.theme-warm  .ig-btn-add:hover { background: #0369a1 !important; }
body.theme-light .ig-btn-cancel,
body.theme-warm  .ig-btn-cancel { background: #ffffff !important; border-color: #dde0e6 !important; color: rgba(0,0,0,0.65) !important; }
body.theme-light .ig-btn-cancel:hover,
body.theme-warm  .ig-btn-cancel:hover { background: #f4f5f7 !important; border-color: #b0b8c4 !important; color: rgba(0,0,0,0.80) !important; }
body.theme-light .ig-btn-save-sm,
body.theme-warm  .ig-btn-save-sm { background: #0284c7 !important; border-color: #0284c7 !important; color: #ffffff !important; }
body.theme-light .ig-btn-save-sm:hover,
body.theme-warm  .ig-btn-save-sm:hover { background: #0369a1 !important; }

/* ── アンケートリンク挿入ボタン ── */
body.theme-light .aq-link-btn-insert,
body.theme-warm  .aq-link-btn-insert { background: #0284c7 !important; border-color: #0284c7 !important; color: #ffffff !important; }
body.theme-light .aq-link-btn-cancel,
body.theme-warm  .aq-link-btn-cancel { background: #ffffff !important; border-color: #dde0e6 !important; color: rgba(0,0,0,0.65) !important; }

/* ── 設定: プランセクションボタン ── */
body.theme-light #st-section-plan .btn-add-item,
body.theme-warm  #st-section-plan .btn-add-item { background: #f4f5f7 !important; border-color: #0284c7 !important; color: #0284c7 !important; }
body.theme-light #st-section-plan .btn-add-item:hover,
body.theme-warm  #st-section-plan .btn-add-item:hover { background: #dbeafe !important; border-color: #0284c7 !important; color: #0284c7 !important; }
body.theme-light #st-section-plan .btn-save-item,
body.theme-warm  #st-section-plan .btn-save-item { background: #0284c7 !important; border-color: #0284c7 !important; color: #ffffff !important; }
body.theme-light #st-section-plan .btn-save-item:hover,
body.theme-warm  #st-section-plan .btn-save-item:hover { background: #0369a1 !important; }
body.theme-light #st-section-plan .btn-cancel,
body.theme-warm  #st-section-plan .btn-cancel { background: #ffffff !important; border-color: #dde0e6 !important; color: rgba(0,0,0,0.65) !important; }
body.theme-light #st-section-plan #stp-btnCancel,
body.theme-warm  #st-section-plan #stp-btnCancel { background: #ffffff !important; border-color: #dde0e6 !important; color: rgba(0,0,0,0.65) !important; }
body.theme-light #st-section-plan #stp-btnCancel:hover,
body.theme-warm  #st-section-plan #stp-btnCancel:hover { background: #f4f5f7 !important; }
body.theme-light #st-section-plan .btn-icon,
body.theme-warm  #st-section-plan .btn-icon { background: #f1f3f6 !important; border-color: #dde0e6 !important; color: rgba(0,0,0,0.55) !important; }
body.theme-light #st-section-plan .btn-icon:hover,
body.theme-warm  #st-section-plan .btn-icon:hover { background: #e2e8f0 !important; border-color: #b0b8c4 !important; color: rgba(0,0,0,0.75) !important; }
body.theme-light #st-section-plan .btn-icon.del:hover,
body.theme-warm  #st-section-plan .btn-icon.del:hover { background: rgba(220,38,38,0.10) !important; border-color: #dc2626 !important; color: #dc2626 !important; }

/* ── 設定: スタジオセクションボタン ── */
body.theme-light #st-section-studio #sts-btnSave,
body.theme-warm  #st-section-studio #sts-btnSave { background: #0284c7 !important; border-color: #0284c7 !important; color: #ffffff !important; }
body.theme-light #st-section-studio #sts-btnSave:hover,
body.theme-warm  #st-section-studio #sts-btnSave:hover { background: #0369a1 !important; }
body.theme-light #st-section-studio #sts-btnCancel,
body.theme-warm  #st-section-studio #sts-btnCancel { background: #ffffff !important; border-color: #dde0e6 !important; color: rgba(0,0,0,0.65) !important; }
body.theme-light #st-section-studio #sts-btnCancel:hover,
body.theme-warm  #st-section-studio #sts-btnCancel:hover { background: #f4f5f7 !important; }

/* ── 予約・ブッキングボタン ── */
body.theme-light .bk-btn-save,
body.theme-warm  .bk-btn-save { background: #0284c7 !important; border-color: #0284c7 !important; color: #ffffff !important; }
body.theme-light .bk-btn-save:hover,
body.theme-warm  .bk-btn-save:hover { background: #0369a1 !important; }
body.theme-light .bk-btn-delete,
body.theme-warm  .bk-btn-delete { background: #dc2626 !important; border-color: #dc2626 !important; color: #ffffff !important; }

/* ── ap/cu/sf/os/ps list-controls ボタン: 2ID spec200 を spec211で上書き ── */
body.theme-light #ap-list-controls #ap-btn-done-toggle,
body.theme-warm  #ap-list-controls #ap-btn-done-toggle { background: #ffffff !important; border-color: #dde0e6 !important; color: rgba(0,0,0,0.65) !important; }
body.theme-light #ap-list-controls #ap-btn-done-toggle.active,
body.theme-warm  #ap-list-controls #ap-btn-done-toggle.active { background: #059669 !important; border-color: #059669 !important; color: #ffffff !important; }
body.theme-light #ap-list-controls #ap-btn-deleted-toggle,
body.theme-warm  #ap-list-controls #ap-btn-deleted-toggle { background: #ffffff !important; border-color: #dde0e6 !important; color: rgba(0,0,0,0.65) !important; }
body.theme-light #ap-list-controls #ap-btn-deleted-toggle.active,
body.theme-warm  #ap-list-controls #ap-btn-deleted-toggle.active { background: #dc2626 !important; border-color: #dc2626 !important; color: #ffffff !important; }
body.theme-light #ap-list-controls #ap-btn-bulk-delete,
body.theme-warm  #ap-list-controls #ap-btn-bulk-delete { background: #dc2626 !important; border-color: #dc2626 !important; color: #ffffff !important; }

body.theme-light #cu-list-controls #cu-btn-deleted-toggle,
body.theme-warm  #cu-list-controls #cu-btn-deleted-toggle { background: #ffffff !important; border-color: #dde0e6 !important; color: rgba(0,0,0,0.65) !important; }
body.theme-light #cu-list-controls #cu-btn-deleted-toggle.active,
body.theme-warm  #cu-list-controls #cu-btn-deleted-toggle.active { background: #dc2626 !important; border-color: #dc2626 !important; color: #ffffff !important; }
body.theme-light #cu-list-controls #cu-btn-bulk-delete,
body.theme-warm  #cu-list-controls #cu-btn-bulk-delete { background: #dc2626 !important; border-color: #dc2626 !important; color: #ffffff !important; }

body.theme-light #sf-list-controls #sf-btn-deleted-toggle,
body.theme-warm  #sf-list-controls #sf-btn-deleted-toggle { background: #ffffff !important; border-color: #dde0e6 !important; color: rgba(0,0,0,0.65) !important; }
body.theme-light #sf-list-controls #sf-btn-deleted-toggle.active,
body.theme-warm  #sf-list-controls #sf-btn-deleted-toggle.active { background: #dc2626 !important; border-color: #dc2626 !important; color: #ffffff !important; }
body.theme-light #sf-list-controls #sf-btn-bulk-delete,
body.theme-warm  #sf-list-controls #sf-btn-bulk-delete { background: #dc2626 !important; border-color: #dc2626 !important; color: #ffffff !important; }

body.theme-light #os-list-controls #os-btn-deleted-toggle,
body.theme-warm  #os-list-controls #os-btn-deleted-toggle { background: #ffffff !important; border-color: #dde0e6 !important; color: rgba(0,0,0,0.65) !important; }
body.theme-light #os-list-controls #os-btn-deleted-toggle.active,
body.theme-warm  #os-list-controls #os-btn-deleted-toggle.active { background: #dc2626 !important; border-color: #dc2626 !important; color: #ffffff !important; }
body.theme-light #os-list-controls #os-btn-bulk-delete,
body.theme-warm  #os-list-controls #os-btn-bulk-delete { background: #dc2626 !important; border-color: #dc2626 !important; color: #ffffff !important; }

body.theme-light #ps-list-controls #ps-btn-deleted-toggle,
body.theme-warm  #ps-list-controls #ps-btn-deleted-toggle { background: #ffffff !important; border-color: #dde0e6 !important; color: rgba(0,0,0,0.65) !important; }
body.theme-light #ps-list-controls #ps-btn-deleted-toggle.active,
body.theme-warm  #ps-list-controls #ps-btn-deleted-toggle.active { background: #dc2626 !important; border-color: #dc2626 !important; color: #ffffff !important; }
body.theme-light #ps-list-controls #ps-btn-bulk-delete,
body.theme-warm  #ps-list-controls #ps-btn-bulk-delete { background: #dc2626 !important; border-color: #dc2626 !important; color: #ffffff !important; }

/* ════════════════════════════════════════════════════════════
   v1.68.24  ライト/ウォームテーマ: tb-btn-primary塗りつぶし + cu-edit-modal ボタン修正
   ════════════════════════════════════════════════════════════ */

/* ── .tb-btn-primary: 新規アルバム・アップロード・作成系 全て塗りつぶし ── */
body.theme-light .tb-btn-primary,
body.theme-warm  .tb-btn-primary { background: #0284c7 !important; border-color: #0284c7 !important; color: #ffffff !important; }
body.theme-light .tb-btn-primary:hover,
body.theme-warm  .tb-btn-primary:hover { background: #0369a1 !important; border-color: #0369a1 !important; }
body.theme-light .tb-btn-primary:disabled,
body.theme-warm  .tb-btn-primary:disabled { background: #dde0e6 !important; border-color: #dde0e6 !important; color: rgba(0,0,0,0.35) !important; }

/* ── .tb-btn（キャンセル・中立ボタン）: ライトテーマで白地に統一 ── */
body.theme-light .tb-btn { background: #ffffff !important; border-color: #dde0e6 !important; color: rgba(0,0,0,0.65) !important; }
body.theme-light .tb-btn:hover { background: #f4f5f7 !important; border-color: #b0b8c4 !important; color: rgba(0,0,0,0.80) !important; }
body.theme-light .tb-btn.active { background: rgba(217,119,6,0.12) !important; border-color: rgba(217,119,6,0.50) !important; color: #d97706 !important; }
body.theme-warm  .tb-btn { background: #FFFFFF !important; border-color: #EFE9E5 !important; color: rgba(61,53,49,0.70) !important; }
body.theme-warm  .tb-btn:hover { background: #F8F6F4 !important; border-color: #A89F8E !important; color: rgba(61,53,49,0.90) !important; }

/* ── 顧客管理モーダル: 住所検索・保存・キャンセル・アンケートURL ── */
/* IIFE CSS は spec(2,0,0) ・!important なし → spec(2,1,1)+!important で確実に上書き */
body.theme-light #cu-edit-modal #cu-btnZip,
body.theme-warm  #cu-edit-modal #cu-btnZip { background: #0284c7 !important; border-color: #0284c7 !important; color: #ffffff !important; }
body.theme-light #cu-edit-modal #cu-btnZip:hover,
body.theme-warm  #cu-edit-modal #cu-btnZip:hover { background: #0369a1 !important; }
body.theme-light #cu-edit-modal #cu-btnSave,
body.theme-warm  #cu-edit-modal #cu-btnSave { background: #0284c7 !important; border-color: #0284c7 !important; color: #ffffff !important; }
body.theme-light #cu-edit-modal #cu-btnSave:hover,
body.theme-warm  #cu-edit-modal #cu-btnSave:hover { background: #0369a1 !important; }
body.theme-light #cu-edit-modal #cu-btnSave:disabled,
body.theme-warm  #cu-edit-modal #cu-btnSave:disabled { background: #dde0e6 !important; border-color: #dde0e6 !important; color: rgba(0,0,0,0.35) !important; }
body.theme-light #cu-edit-modal #cu-btnCancel,
body.theme-warm  #cu-edit-modal #cu-btnCancel { background: #ffffff !important; border-color: #dde0e6 !important; color: rgba(0,0,0,0.65) !important; }
body.theme-light #cu-edit-modal #cu-btnCancel:hover,
body.theme-warm  #cu-edit-modal #cu-btnCancel:hover { background: #f4f5f7 !important; }
body.theme-light #cu-edit-modal #cu-btnAnketa,
body.theme-warm  #cu-edit-modal #cu-btnAnketa { background: #d97706 !important; border-color: #d97706 !important; color: #ffffff !important; }
body.theme-light #cu-edit-modal #cu-btnAnketa:hover,
body.theme-warm  #cu-edit-modal #cu-btnAnketa:hover { background: #b45309 !important; }

/* ════════════════════════════════════════════════════════════
   v1.68.25  撮影会キャンセル / アンケート新規 / 予約作成ボタン修正
   ════════════════════════════════════════════════════════════ */

/* ── 撮影会モーダル: キャンセルボタン（白地に） ── */
body.theme-light #ps-edit-modal #ps-em-btnCancel,
body.theme-warm  #ps-edit-modal #ps-em-btnCancel { background: #ffffff !important; border-color: #dde0e6 !important; color: rgba(0,0,0,0.65) !important; }
body.theme-light #ps-edit-modal #ps-em-btnCancel:hover,
body.theme-warm  #ps-edit-modal #ps-em-btnCancel:hover { background: #f4f5f7 !important; }

/* ── アンケートステート: 新規作成ボタン（塗りつぶし緑）── */
/* 暗ブロック spec(1,0,0)+!important → spec(1,1,1)+!important で上書き */
body.theme-light #aq-btnNew,
body.theme-warm  #aq-btnNew { background: #059669 !important; border-color: #059669 !important; color: #ffffff !important; }
body.theme-light #aq-btnNew:hover,
body.theme-warm  #aq-btnNew:hover { background: #047857 !important; border-color: #047857 !important; }
body.theme-light #aq-btnNewEmpty,
body.theme-warm  #aq-btnNewEmpty { background: #059669 !important; border-color: #059669 !important; color: #ffffff !important; }
body.theme-light #aq-btnNewEmpty:hover,
body.theme-warm  #aq-btnNewEmpty:hover { background: #047857 !important; border-color: #047857 !important; }

/* ── 予約設定ステート: 作成ボタン・保存ボタン ── */
body.theme-light .bk-btn-create,
body.theme-warm  .bk-btn-create { background: #0284c7 !important; border-color: #0284c7 !important; color: #ffffff !important; }
body.theme-light .bk-btn-create:hover,
body.theme-warm  .bk-btn-create:hover { background: #0369a1 !important; }
body.theme-light #bkshop-save-btn,
body.theme-warm  #bkshop-save-btn { background: #0284c7 !important; border-color: #0284c7 !important; color: #ffffff !important; border-radius: 7px !important; }
body.theme-light #bkshop-save-btn:hover,
body.theme-warm  #bkshop-save-btn:hover { background: #0369a1 !important; }

/* ── 管理画面プライマリボタン ── */
body.theme-light .adm-btn-primary,
body.theme-warm  .adm-btn-primary { background: #0284c7 !important; border-color: #0284c7 !important; color: #ffffff !important; }

/* ════════════════════════════════════════════════════════════
   v1.69.0  ウォームテーマ Clean & Warm リデザイン
   カラーパレット:
     bg          #F8F6F4  明るく抜け感のあるオフホワイト
     surface     #FFFFFF  純白カード（コントラスト強化）
     border      #EFE9E5  柔らかな淡ボーダー
     sidebar     #2C2826  ダークウォーム
     sidebar-bd  #3A3532  サイドバーホバー
     text-main   #3D3531  墨色
     text-sub    rgba(61,53,49,0.60)  柔らかいグレー
     primary CTA #3D3531  ダークチャコール（保存・実行系）
     accent      #E07A5F  テラコッタ（active タブ・focus リング・ナビ active）
     accent-hover #D06A50
   ════════════════════════════════════════════════════════════ */

/* ── モーダル・カード背景を参照デザインのサーフェス色に ── */
body.theme-warm #em-edit-modal #em-app,
body.theme-warm #cu-edit-modal #cu-app,
body.theme-warm #sf-edit-modal .em-app,
body.theme-warm #os-edit-modal .em-app { background: #FFFFFF !important; }

body.theme-warm #em-edit-modal #em-form-wrap,
body.theme-warm #cu-edit-modal #cu-form-wrap,
body.theme-warm #sf-edit-modal #sf-em-form-body,
body.theme-warm #os-edit-modal #os-em-form-body { background: #FFFFFF !important; }

body.theme-warm #em-edit-modal #em-header,
body.theme-warm #cu-edit-modal #cu-header,
body.theme-warm #sf-edit-modal #sf-em-header,
body.theme-warm #os-edit-modal #os-em-header { background: #FFFFFF !important; border-bottom-color: #EFE9E5 !important; }

body.theme-warm #em-edit-modal #em-tab-bar,
body.theme-warm #cu-edit-modal #cu-tab-bar { background: #F0EBE5 !important; border-bottom-color: #EFE9E5 !important; }

body.theme-warm #em-edit-modal .em-field-group,
body.theme-warm #sf-edit-modal .em-field-group,
body.theme-warm #os-edit-modal .em-field-group { background: rgba(61,53,49,0.04) !important; border-color: #EFE9E5 !important; }

/* フィールド入力を白ベースに */
body.theme-warm .em-field-input,
body.theme-warm #cu-edit-modal .field-input { background: #FFFFFF !important; border-color: #EFE9E5 !important; color: #3D3531 !important; }
body.theme-warm .em-field-input:focus,
body.theme-warm #cu-edit-modal .field-input:focus { border-color: #E07A5F !important; box-shadow: 0 0 0 2.5px rgba(224,122,95,0.18) !important; }
body.theme-warm .em-field-input[readonly],
body.theme-warm .em-field-input.calc-out,
body.theme-warm #cu-edit-modal .field-input[readonly] { background: #F0EBE5 !important; color: rgba(61,53,49,0.38) !important; border-color: #EFE9E5 !important; }

/* ps / aq モーダル背景 */
body.theme-warm #ps-edit-modal .modal-inner { background: #FFFFFF !important; }
body.theme-warm #ps-edit-modal #ps-em-header { background: #FFFFFF !important; }
body.theme-warm #ps-edit-modal #ps-em-tabs { background: #F0EBE5 !important; border-bottom-color: #EFE9E5 !important; }
body.theme-warm #ps-edit-modal .em-field-input { background: #FFFFFF !important; border-color: #EFE9E5 !important; color: #3D3531 !important; }

/* ── 全プライマリ・アクションボタン → #3D3531（チャコール）塗りつぶし ── */
/* 保存・登録・決定系 */
body.theme-warm #em-btnSave,
body.theme-warm #em-edit-modal #em-btnSave,
body.theme-warm #cu-edit-modal #cu-btnSave,
body.theme-warm #sf-edit-modal #sf-em-btnSave,
body.theme-warm #os-edit-modal #os-em-btnSave,
body.theme-warm #ps-edit-modal #ps-em-btnSave,
body.theme-warm .kz-btn-ok.kz-ok-default,
body.theme-warm .kz-btn-ok.kz-ok-warn,
body.theme-warm .btn-ok-modal,
body.theme-warm .btn-confirm-ok { background: #3D3531 !important; border-color: #3D3531 !important; color: #ffffff !important; }
body.theme-warm #em-btnSave:hover,
body.theme-warm #em-edit-modal #em-btnSave:hover,
body.theme-warm #cu-edit-modal #cu-btnSave:hover,
body.theme-warm #sf-edit-modal #sf-em-btnSave:hover,
body.theme-warm #os-edit-modal #os-em-btnSave:hover,
body.theme-warm #ps-edit-modal #ps-em-btnSave:hover { background: #4A4441 !important; border-color: #4A4441 !important; }

/* 新規・作成系 */
body.theme-warm #ap-btn-new,
body.theme-warm #cu-btn-new,
body.theme-warm #sf-btn-new,
body.theme-warm #os-btn-new,
body.theme-warm #ps-btnNew,
body.theme-warm #ps-btnNewEmpty,
body.theme-warm #aq-btnNew,
body.theme-warm #aq-btnNewEmpty { background: #3D3531 !important; border-color: #3D3531 !important; color: #ffffff !important; }
body.theme-warm #ap-btn-new:hover,
body.theme-warm #cu-btn-new:hover,
body.theme-warm #sf-btn-new:hover,
body.theme-warm #os-btn-new:hover,
body.theme-warm #ps-btnNew:hover,
body.theme-warm #ps-btnNewEmpty:hover,
body.theme-warm #aq-btnNew:hover,
body.theme-warm #aq-btnNewEmpty:hover { background: #4A4441 !important; border-color: #4A4441 !important; }

/* tb-btn-primary（新規アルバム・アップロード等） */
body.theme-warm .tb-btn-primary { background: #3D3531 !important; border-color: #3D3531 !important; color: #ffffff !important; }
body.theme-warm .tb-btn-primary:hover { background: #4A4441 !important; border-color: #4A4441 !important; }
body.theme-warm .tb-btn-primary:disabled { background: #EFE9E5 !important; border-color: #EFE9E5 !important; color: rgba(61,53,49,0.35) !important; }

/* アクション・操作系 */
body.theme-warm .btn-edit,
body.theme-warm .btn-upload,
body.theme-warm .btn-copy,
body.theme-warm .btn-restore,
body.theme-warm .btn-line,
body.theme-warm .btn-send-line,
body.theme-warm .btn-gallery,
body.theme-warm .btn-green,
body.theme-warm .pj-btn-upload,
body.theme-warm #gl-btn-view-gallery,
body.theme-warm #gl-btn-save,
body.theme-warm #gl-btn-save-cpsettings,
body.theme-warm .msg-send-btn,
body.theme-warm .sb-item-btn,
body.theme-warm .ob-btn-next,
body.theme-warm .ob-action-btn,
body.theme-warm #stl-btn-add-tmpl,
body.theme-warm #ps-ap-btnClose2,
body.theme-warm #ps-ap-table-wrap .btn-register { background: #3D3531 !important; border-color: #3D3531 !important; color: #ffffff !important; }
body.theme-warm .btn-edit:hover,
body.theme-warm .btn-upload:hover,
body.theme-warm .btn-copy:hover,
body.theme-warm .btn-restore:hover,
body.theme-warm .btn-line:hover,
body.theme-warm .btn-send-line:hover,
body.theme-warm .btn-gallery:hover,
body.theme-warm #gl-btn-view-gallery:hover,
body.theme-warm #gl-btn-save:hover,
body.theme-warm #gl-btn-save-cpsettings:hover,
body.theme-warm .msg-send-btn:hover { background: #4A4441 !important; border-color: #4A4441 !important; }

/* LINE無効 */
body.theme-warm .btn-line.disabled { background: #EFE9E5 !important; border-color: #EFE9E5 !important; color: rgba(61,53,49,0.35) !important; }

/* 住所検索・アンケートURL */
body.theme-warm #em-edit-modal #em-btnZip,
body.theme-warm #em-btnZip,
body.theme-warm #cu-edit-modal #cu-btnZip { background: #3D3531 !important; border-color: #3D3531 !important; color: #ffffff !important; }
body.theme-warm #em-btnAnketa,
body.theme-warm #cu-edit-modal #cu-btnAnketa { background: #3D3531 !important; border-color: #3D3531 !important; color: #ffffff !important; }

/* URL発行・コピー・招待 */
body.theme-warm #sf-edit-modal #sf-em-btn-issue-url,
body.theme-warm #sf-edit-modal #sf-em-btn-copy-url,
body.theme-warm #os-edit-modal #os-em-btn-issue-url,
body.theme-warm #os-edit-modal #os-em-btn-copy-url { background: #3D3531 !important; border-color: #3D3531 !important; color: #ffffff !important; }
body.theme-warm #sf-edit-modal #sf-em-btnInvite { background: #3D3531 !important; border-color: #3D3531 !important; color: #ffffff !important; }
body.theme-warm #sf-edit-modal #sf-em-btnInvite:hover:not(:disabled) { background: #4A4441 !important; }

/* アルバム */
body.theme-warm #em-edit-modal .em-delivery-album-list .em-album-upload-btn { background: #3D3531 !important; border-color: #3D3531 !important; color: #ffffff !important; }

/* ギャラリーフォトピッカー */
body.theme-warm .ig-btn-add,
body.theme-warm .ig-btn-save-sm { background: #3D3531 !important; border-color: #3D3531 !important; color: #ffffff !important; }
body.theme-warm .ig-btn-add:hover,
body.theme-warm .ig-btn-save-sm:hover { background: #4A4441 !important; }

/* アンケートリンク挿入 */
body.theme-warm .aq-link-btn-insert { background: #3D3531 !important; border-color: #3D3531 !important; color: #ffffff !important; }

/* 設定: プランセクション保存・アイコン */
body.theme-warm #st-section-plan .btn-save-item { background: #3D3531 !important; border-color: #3D3531 !important; color: #ffffff !important; }
body.theme-warm #st-section-plan .btn-save-item:hover { background: #4A4441 !important; }
body.theme-warm #st-section-plan .btn-add-item { background: rgba(224,122,95,0.08) !important; border-color: #E07A5F !important; color: #E07A5F !important; }
body.theme-warm #st-section-plan .btn-add-item:hover { background: rgba(224,122,95,0.16) !important; }
body.theme-warm #st-section-plan .btn-icon { background: #FFFFFF !important; border-color: #EFE9E5 !important; color: rgba(61,53,49,0.65) !important; }
body.theme-warm #st-section-plan .btn-icon:hover { background: #F8F6F4 !important; border-color: #BDB5B0 !important; color: #3D3531 !important; }
body.theme-warm #st-section-plan .btn-icon.del:hover { background: rgba(192,57,43,0.10) !important; border-color: #c0392b !important; color: #c0392b !important; }

/* 設定: スタジオ保存 */
body.theme-warm #st-section-studio #sts-btnSave { background: #3D3531 !important; border-color: #3D3531 !important; color: #ffffff !important; }
body.theme-warm #st-section-studio #sts-btnSave:hover { background: #4A4441 !important; }

/* 予約・ブッキング */
body.theme-warm .bk-btn-save { background: #3D3531 !important; border-color: #3D3531 !important; color: #ffffff !important; }
body.theme-warm .bk-btn-save:hover { background: #4A4441 !important; }
body.theme-warm .bk-btn-create { background: #3D3531 !important; border-color: #3D3531 !important; color: #ffffff !important; }
body.theme-warm .bk-btn-create:hover { background: #4A4441 !important; }
body.theme-warm #bkshop-save-btn { background: #3D3531 !important; border-color: #3D3531 !important; color: #ffffff !important; border-radius: 7px !important; }

/* 請求書ボタン（ウォームでは全て #3D3531 に統一） */
body.theme-warm .em-invoice-btn,
body.theme-warm .em-invoice-btn.receipt,
body.theme-warm .em-invoice-btn.estimate { background: #3D3531 !important; border-color: #3D3531 !important; color: #ffffff !important; }

/* ── キャンセル・セカンダリボタン → 透明 + #3D3531 ボーダー（参照デザイン準拠） ── */
body.theme-warm .kz-btn-cancel,
body.theme-warm #em-btnCancel,
body.theme-warm #em-edit-modal #em-btnCancel,
body.theme-warm #cu-edit-modal #cu-btnCancel,
body.theme-warm #sf-edit-modal #sf-em-btnCancel,
body.theme-warm #os-edit-modal #os-em-btnCancel,
body.theme-warm #ps-edit-modal #ps-em-btnCancel,
body.theme-warm .btn-cancel,
body.theme-warm .btn-cancel-modal,
body.theme-warm #gl-btn-cancel,
body.theme-warm .ig-btn-cancel,
body.theme-warm .aq-link-btn-cancel,
body.theme-warm #st-section-plan .btn-cancel,
body.theme-warm #st-section-plan #stp-btnCancel,
body.theme-warm #st-section-studio #sts-btnCancel,
body.theme-warm #stl-btnCancel { background: transparent !important; border: 1px solid rgba(61,53,49,0.50) !important; color: #3D3531 !important; }
body.theme-warm .kz-btn-cancel:hover,
body.theme-warm #em-btnCancel:hover,
body.theme-warm #em-edit-modal #em-btnCancel:hover,
body.theme-warm #cu-edit-modal #cu-btnCancel:hover,
body.theme-warm #sf-edit-modal #sf-em-btnCancel:hover,
body.theme-warm #os-edit-modal #os-em-btnCancel:hover,
body.theme-warm #ps-edit-modal #ps-em-btnCancel:hover,
body.theme-warm .btn-cancel:hover,
body.theme-warm .btn-cancel-modal:hover,
body.theme-warm #gl-btn-cancel:hover,
body.theme-warm .ig-btn-cancel:hover,
body.theme-warm #st-section-plan #stp-btnCancel:hover,
body.theme-warm #st-section-studio #sts-btnCancel:hover { background: rgba(61,53,49,0.06) !important; border-color: #3D3531 !important; }

/* tb-btn（中立ボタン）→ ウォームベージュ + ボーダー */
body.theme-warm .tb-btn { background: #FFFFFF !important; border-color: #EFE9E5 !important; color: rgba(61,53,49,0.75) !important; }
body.theme-warm .tb-btn:hover { background: #F0EBE5 !important; border-color: #BDB5B0 !important; color: #3D3531 !important; }

/* ── 危険・削除ボタンは赤のまま維持 ── */
body.theme-warm .btn-delete,
body.theme-warm .btn-danger,
body.theme-warm .btn-danger-modal,
body.theme-warm .btn-confirm-delete,
body.theme-warm .tb-btn-danger,
body.theme-warm .bk-btn-delete,
body.theme-warm .kz-btn-ok.kz-ok-danger,
body.theme-warm .tb-btn-danger { background: #c0392b !important; border-color: #c0392b !important; color: #ffffff !important; }
body.theme-warm .btn-delete:hover,
body.theme-warm .btn-danger:hover,
body.theme-warm .tb-btn-danger:hover { background: #a93226 !important; border-color: #a93226 !important; }

/* 一括削除 */
body.theme-warm #ap-list-controls #ap-btn-bulk-delete,
body.theme-warm #cu-list-controls #cu-btn-bulk-delete,
body.theme-warm #sf-list-controls #sf-btn-bulk-delete,
body.theme-warm #os-list-controls #os-btn-bulk-delete,
body.theme-warm #ps-list-controls #ps-btn-bulk-delete { background: #c0392b !important; border-color: #c0392b !important; color: #ffffff !important; }

/* 削除済みトグル（非アクティブ → セカンダリ、アクティブ → 赤） */
body.theme-warm #ap-list-controls #ap-btn-deleted-toggle,
body.theme-warm #cu-list-controls #cu-btn-deleted-toggle,
body.theme-warm #sf-list-controls #sf-btn-deleted-toggle,
body.theme-warm #os-list-controls #os-btn-deleted-toggle,
body.theme-warm #ps-list-controls #ps-btn-deleted-toggle { background: #FFFFFF !important; border-color: #EFE9E5 !important; color: rgba(61,53,49,0.65) !important; }
body.theme-warm #ap-list-controls #ap-btn-deleted-toggle.active,
body.theme-warm #cu-list-controls #cu-btn-deleted-toggle.active,
body.theme-warm #sf-list-controls #sf-btn-deleted-toggle.active,
body.theme-warm #os-list-controls #os-btn-deleted-toggle.active,
body.theme-warm #ps-list-controls #ps-btn-deleted-toggle.active { background: #c0392b !important; border-color: #c0392b !important; color: #ffffff !important; }

/* 完了トグル */
body.theme-warm #ap-list-controls #ap-btn-done-toggle { background: #FFFFFF !important; border-color: #EFE9E5 !important; color: rgba(61,53,49,0.65) !important; }
body.theme-warm #ap-list-controls #ap-btn-done-toggle.active { background: #E07A5F !important; border-color: #E07A5F !important; color: #ffffff !important; }

/* v1.68.26 */

/* v1.68.27 — ウォームテーマ: サイドバー背景修正 */
body.theme-warm .fp-sidebar { background: #2C2826 !important; border-right-color: #3A3532 !important; }
body.theme-warm .fp-logo { border-bottom-color: rgba(255,255,255,0.12) !important; }
body.theme-warm .fp-logo-sub,
body.theme-warm .fp-user-name,
body.theme-warm .fp-version-label { color: rgba(255,255,255,0.55) !important; }
body.theme-warm .fp-storage { border-color: rgba(255,255,255,0.12) !important; }
body.theme-warm .fp-user-area { border-top-color: rgba(255,255,255,0.12) !important; }

/* v1.68.27 */

/* v1.68.28 — ウォームテーマ: ストレージゲージ背景・アイコン色修正 */
/* ストレージ円グラフ → サイドバーと同色 */
body.theme-warm #sg-app-wrapper {
  background: #2C2826 !important;
  /* 円グラフ色をテラコッタ系へ。容量レベル別 (緑=正常→青=注意→橙=警告→赤=危険) のセマンティクスは保ちつつ
     warm の落ち着いた色味に整える */
  --c-green:  #E07A5F !important;
  --c-blue:   #C9A57A !important;
  --c-orange: #D06A50 !important;
  --c-danger: #C0392B !important;
}
body.theme-warm #sg-plan-badge { background: rgba(255,255,255,0.10) !important; border-color: rgba(255,255,255,0.15) !important; }
body.theme-warm #sg-plan-name { color: rgba(255,255,255,0.70) !important; }
body.theme-warm #sg-pct-value,
body.theme-warm #sg-pct-unit { color: rgba(255,255,255,0.90) !important; }
body.theme-warm #sg-used-val,
body.theme-warm #sg-max-val,
body.theme-warm #sg-usage-sep { color: rgba(255,255,255,0.55) !important; }
body.theme-warm #sg-bar-track { background: rgba(255,255,255,0.12) !important; }
body.theme-warm .ring-track { stroke: rgba(255,255,255,0.15) !important; }
/* アップグレード CTA: テラコッタ */
body.theme-warm #sg-upgrade-warn { color: #E07A5F !important; }
body.theme-warm #sg-upgrade-btn {
  background: rgba(224,122,95,0.20) !important;
  border-color: rgba(224,122,95,0.72) !important;
  color: #FFFFFF !important;
  animation: pulseWarm 2s ease-in-out 0.8s infinite !important;
}
body.theme-warm #sg-upgrade-btn:hover { background: rgba(224,122,95,0.32) !important; animation: none !important; }
@keyframes pulseWarm {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224,122,95,0.5); }
  50%      { box-shadow: 0 0 0 6px rgba(224,122,95,0); }
}

/* ナビアイコン → ライト色に */
body.theme-warm .nav-icon svg path,
body.theme-warm .nav-icon svg rect,
body.theme-warm .nav-icon svg circle,
body.theme-warm .nav-icon svg polyline,
body.theme-warm .nav-icon svg line,
body.theme-warm .nav-icon svg polygon { stroke: rgba(255,255,255,0.70) !important; }
body.theme-warm .nav-item.active .nav-icon svg path,
body.theme-warm .nav-item.active .nav-icon svg rect,
body.theme-warm .nav-item.active .nav-icon svg circle,
body.theme-warm .nav-item.active .nav-icon svg polyline,
body.theme-warm .nav-item.active .nav-icon svg line,
body.theme-warm .nav-item.active .nav-icon svg polygon { stroke: #ffffff !important; }
body.theme-warm .nav-divider { background: rgba(255,255,255,0.10) !important; }

/* v1.68.28 */

/* v1.68.29 — ウォームテーマ: cu-tabテキスト・メッセージバブル・ps-right-pane */

/* 1. 顧客管理モーダル: タブボタンのテキスト色 */
body.theme-warm #cu-edit-modal .tab-btn { color: rgba(61,53,49,0.52) !important; }
body.theme-warm #cu-edit-modal .tab-btn:hover { color: #3D3531 !important; }
body.theme-warm #cu-edit-modal .tab-btn.active { color: #E07A5F !important; border-bottom-color: #E07A5F !important; }

/* 2. 記念日モードの送信済みバブル → msg-bubble.out 同色に統一 */
body.theme-warm .man-chat-bubble-wrap.out .man-chat-bubble { background: rgba(224,122,95,0.12) !important; border-color: rgba(224,122,95,0.28) !important; color: #3D3531 !important; }
/* 受信側バブルも明示的に温かみのある色に */
body.theme-warm .man-chat-bubble { background: #FFFFFF !important; border: 1px solid #EFE9E5 !important; color: #3D3531 !important; }

/* 3. 撮影会右プレビューパネル */
body.theme-warm .ps-right-pane { background: #FFFFFF !important; border-left-color: #EFE9E5 !important; }
body.theme-warm .ps-right-pane .bk-preview-hd { background: #FFFFFF !important; border-bottom-color: #EFE9E5 !important; }
body.theme-warm .ps-right-pane .bk-preview-body { background: #FFFFFF !important; }
body.theme-warm .ps-right-pane .bk-preview-share-btn:hover { border-color: #EFE9E5 !important; }

/* v1.68.29 */

/* v1.68.30 — ライト/ウォームテーマ: リストアイテムの区切り線を復元 */
/* ダーク専用ブロックが .sp-list-item { border-bottom-color: rgba(255,255,255,0.06) !important; } で上書きするため */
body.theme-light .sp-list-item { border-bottom-color: #dde0e6 !important; }
body.theme-light .sp-list-item:hover { background: rgba(0,0,0,0.04) !important; }
body.theme-light .sp-list-item.active { background: rgba(2,132,199,0.09) !important; }
body.theme-warm  .sp-list-item { border-bottom-color: #EFE9E5 !important; }
body.theme-warm  .sp-list-item:hover { background: rgba(61,53,49,0.06) !important; }
body.theme-warm  .sp-list-item.active { background: rgba(61,53,49,0.10) !important; }

/* v1.68.30 */

/* v1.68.31 — ライト/ウォームテーマ: 確認モーダル & ローディングオーバーレイ修正 */

/* fp-loading-overlay */
body.theme-light #fp-loading-overlay { background: #f4f5f7 !important; }
body.theme-warm  #fp-loading-overlay { background: #F8F6F4 !important; }
body.theme-light .fp-spinner { border-color: rgba(0,0,0,0.10) !important; border-top-color: #0284c7 !important; }
body.theme-warm  .fp-spinner { border-color: rgba(61,53,49,0.10) !important; border-top-color: #E07A5F !important; }

/* kz-confirm モーダル */
body.theme-light #kz-confirm-box { background: #ffffff !important; border-color: #dde0e6 !important; }
body.theme-warm  #kz-confirm-box { background: #FFFFFF !important; border-color: #EFE9E5 !important; }
body.theme-light #kz-confirm-title { color: #1a202c !important; }
body.theme-warm  #kz-confirm-title { color: #3D3531 !important; }
body.theme-light #kz-confirm-msg   { color: rgba(0,0,0,0.62) !important; }
body.theme-warm  #kz-confirm-msg   { color: rgba(61,53,49,0.66) !important; }

/* kz-btn-cancel / kz-btn-ok variants */
body.theme-light .kz-btn-cancel { border-color: #dde0e6 !important; color: rgba(0,0,0,0.62) !important; }
body.theme-warm  .kz-btn-cancel { border-color: rgba(61,53,49,0.50) !important; color: #3D3531 !important; }
body.theme-light .kz-btn-cancel:hover { border-color: #0284c7 !important; color: #0284c7 !important; }
body.theme-warm  .kz-btn-cancel:hover { border-color: #3D3531 !important; color: #3D3531 !important; background: rgba(61,53,49,0.06) !important; }
body.theme-light .kz-ok-default { background: #0284c7 !important; border-color: #0284c7 !important; color: #ffffff !important; }
body.theme-warm  .kz-ok-default { background: #3D3531 !important; border-color: #3D3531 !important; color: #ffffff !important; }
body.theme-light .kz-ok-warn    { background: #f59e0b !important; border-color: #f59e0b !important; color: #ffffff !important; }
body.theme-warm  .kz-ok-warn    { background: #b45309 !important; border-color: #b45309 !important; color: #ffffff !important; }
body.theme-light .kz-ok-danger  { background: #dc2626 !important; border-color: #dc2626 !important; color: #ffffff !important; }
body.theme-warm  .kz-ok-danger  { background: #c0392b !important; border-color: #c0392b !important; color: #ffffff !important; }

/* td-modal */
body.theme-light #td-modal-box { background: #ffffff !important; border-color: #dde0e6 !important; }
body.theme-warm  #td-modal-box { background: #FFFFFF !important; border-color: #EFE9E5 !important; }
body.theme-light #td-modal-desc { color: #1a202c !important; }
body.theme-warm  #td-modal-desc { color: #3D3531 !important; }
body.theme-light .td-modal-label { color: rgba(0,0,0,0.62) !important; }
body.theme-warm  .td-modal-label { color: rgba(61,53,49,0.66) !important; }
body.theme-light #td-modal-status { background: #ffffff !important; border-color: #dde0e6 !important; color: #1a202c !important; }
body.theme-warm  #td-modal-status { background: #FFFFFF !important; border-color: #EFE9E5 !important; color: #3D3531 !important; }

/* :focus-visible 共通: キーボード移動時に視認できる枠線を全テーマで提供 */
body.theme-light *:focus-visible {
  outline: 2px solid #0284c7 !important;
  outline-offset: 2px !important;
}
body.theme-warm *:focus-visible {
  outline: 2px solid #E07A5F !important;
  outline-offset: 2px !important;
}

/* v1.68.31 */

/* ════════════════════════════════════════════════════════════
   v1.69.1  ウォーム: ダッシュボード案件一覧 (.pj-*) を参照デザインに
   ════════════════════════════════════════════════════════════ */

/* 行間セパレーター: 破線の淡ボーダー */
body.theme-warm .grid-projects .pj-row,
body.theme-warm .pj-row {
  border-bottom: 1px dashed #EFE9E5 !important;
  padding: 14px 4px !important;
}
body.theme-warm .grid-projects .pj-row:last-child,
body.theme-warm .pj-row:last-child { border-bottom: none !important; }
body.theme-warm .grid-projects .pj-row:hover,
body.theme-warm .pj-row:hover { background: rgba(61,53,49,0.025) !important; }
body.theme-warm .pj-row-header {
  border-bottom: 1px solid #EFE9E5 !important;
  padding: 0 4px 10px !important;
}
body.theme-warm .pj-row-header span {
  color: rgba(61,53,49,0.45) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
body.theme-warm .pj-col-date {
  color: rgba(61,53,49,0.50) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  font-family: 'Quicksand', 'Noto Sans JP', sans-serif !important;
}
body.theme-warm .pj-col-category {
  color: #3D3531 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

/* ステータスバッジ: パステル背景 + 濃い文字色 */
body.theme-warm .pj-status-select {
  height: 30px !important;
  padding: 0 26px 0 12px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  background-color: rgba(61,53,49,0.06) !important;
  color: rgba(61,53,49,0.55) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%237a6e66' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  background-size: 10px 6px !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}
body.theme-warm .pj-status-select option {
  background: #FFFFFF !important;
  color: #3D3531 !important;
  font-weight: 500 !important;
}
body.theme-warm .pj-status-select[data-status="打合済み"],
body.theme-warm .pj-status-select[data-status="打合せ済み"],
body.theme-warm .pj-status-select[data-status="納品済み"] {
  background-color: #FFF4F0 !important;
  color: #D06A50 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23D06A50' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  background-size: 10px 6px !important;
}
body.theme-warm .pj-status-select[data-status="撮影済み"] {
  background-color: #F0F7FA !important;
  color: #4A8C9E !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%234A8C9E' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  background-size: 10px 6px !important;
}
body.theme-warm .pj-status-select[data-status="要対応"],
body.theme-warm .pj-status-select[data-status="❗️要対応"] {
  background-color: #FCEBE8 !important;
  color: #C0392B !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23C0392B' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  background-size: 10px 6px !important;
}
body.theme-warm .pj-status-select[data-status="完了"] {
  background-color: #E8F5EE !important;
  color: #048A5A !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23048A5A' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  background-size: 10px 6px !important;
}

/* 詳細ボタン: 白ベース・淡ボーダー・濃い文字 */
body.theme-warm .pj-btn-edit {
  background: #FFFFFF !important;
  border: 1px solid #E5DFDB !important;
  color: #3D3531 !important;
  height: 30px !important;
  padding: 0 14px !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
}
body.theme-warm .pj-btn-edit:hover {
  background: #F8F6F4 !important;
  border-color: #BDB5B0 !important;
}

/* Upload ボタン: ダークチャコール塗りつぶし */
body.theme-warm .pj-btn-upload {
  background: #4A4441 !important;
  border-color: #4A4441 !important;
  color: #FFFFFF !important;
  height: 30px !important;
  padding: 0 14px !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
}
body.theme-warm .pj-btn-upload:hover {
  background: #3D3531 !important;
  border-color: #3D3531 !important;
}

/* パネル本体の余白を参照デザインに合わせる */
body.theme-warm .panel.grid-projects {
  background: #FFFFFF !important;
  border: 1px solid #EFE9E5 !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(61,53,49,0.04) !important;
  padding: 24px !important;
}
body.theme-warm .panel.grid-projects .panel-label {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #3D3531 !important;
  margin-bottom: 18px !important;
}
/* v1.69.1 */

/* ════════════════════════════════════════════════════════════
   v1.69.2  ウォーム: ユーザー設定モーダル (us-*) を白ベースに
   ════════════════════════════════════════════════════════════ */

/* ヘッダー: 白背景 + 淡ボーダー */
body.theme-warm .us-app { border: 1px solid #EFE9E5 !important; box-shadow: 0 12px 32px rgba(61,53,49,0.10) !important; }
body.theme-warm .us-header { background: #FFFFFF !important; border-bottom: 1px solid #EFE9E5 !important; }
body.theme-warm .us-title { color: #3D3531 !important; }
body.theme-warm .us-close { color: rgba(61,53,49,0.45) !important; }
body.theme-warm .us-close:hover { color: #3D3531 !important; }
body.theme-warm .us-body { background: #FFFFFF !important; }

/* セクション見出し (分類ラベル) — 白背景に映えるテラコッタ */
body.theme-warm .us-section-title {
  color: #C0552C !important;
  background: rgba(224,122,95,0.10) !important;
  border-left: 3px solid #E07A5F !important;
}

/* リスト & 行 */
body.theme-warm .us-section-list { background: #FFFFFF !important; border: 1px solid #EFE9E5 !important; }
body.theme-warm .us-row { border-bottom-color: #EFE9E5 !important; }
body.theme-warm .us-label { color: rgba(61,53,49,0.55) !important; }
body.theme-warm .us-value { color: #3D3531 !important; }
body.theme-warm .us-mono { color: rgba(61,53,49,0.55) !important; }

/* テーマ選択ボタン */
body.theme-warm .us-theme-btn {
  background: #FFFFFF !important;
  border: 1.5px solid #EFE9E5 !important;
  color: rgba(61,53,49,0.55) !important;
}
body.theme-warm .us-theme-btn:hover { border-color: #E07A5F !important; color: #E07A5F !important; }
body.theme-warm .us-theme-btn.active {
  background: rgba(224,122,95,0.10) !important;
  border-color: #E07A5F !important;
  color: #E07A5F !important;
}

/* パスワード変更フォーム */
body.theme-warm .us-pw-form { background: #FFFFFF !important; border-color: #EFE9E5 !important; }
body.theme-warm .us-pw-form input {
  color: #3D3531 !important;
  background: #F8F6F4 !important;
  border-color: #EFE9E5 !important;
}
body.theme-warm .us-pw-form input::placeholder { color: rgba(61,53,49,0.38) !important; }
body.theme-warm .us-pw-form input:focus {
  border-color: #E07A5F !important;
  box-shadow: 0 0 0 2.5px rgba(224,122,95,0.18) !important;
}
body.theme-warm .us-pw-form button {
  background: #3D3531 !important;
  border-color: #3D3531 !important;
  color: #FFFFFF !important;
}
body.theme-warm .us-pw-form button:hover { background: #4A4441 !important; border-color: #4A4441 !important; }
body.theme-warm .us-pw-form button:disabled {
  background: #EFE9E5 !important;
  border-color: #EFE9E5 !important;
  color: rgba(61,53,49,0.35) !important;
}

/* メッセージ (成功・エラー) */
body.theme-warm .us-msg.success {
  background: rgba(5,130,90,0.10) !important;
  border-color: rgba(5,130,90,0.40) !important;
  color: #048A5A !important;
}
body.theme-warm .us-msg.error {
  background: rgba(192,57,43,0.10) !important;
  border-color: rgba(192,57,43,0.40) !important;
  color: #C0392B !important;
}

/* 危険ゾーン (ログアウト) */
body.theme-warm .us-danger { border-top-color: #EFE9E5 !important; }
body.theme-warm .us-btn-logout {
  background: #FFFFFF !important;
  border: 1px solid rgba(192,57,43,0.50) !important;
  color: #C0392B !important;
}
body.theme-warm .us-btn-logout:hover {
  background: rgba(192,57,43,0.08) !important;
  border-color: #C0392B !important;
  color: #C0392B !important;
}
/* v1.69.2 */

/* ════════════════════════════════════════════════════════════
   v1.69.5  ウォーム: 売上推移 期間ボタン (.ch-period-btn)
   ════════════════════════════════════════════════════════════ */
body.theme-warm .ch-period-btn {
  border-color: #EFE9E5 !important;
  color: rgba(61,53,49,0.55) !important;
  background: transparent !important;
}
body.theme-warm .ch-period-btn:hover {
  border-color: #E07A5F !important;
  color: #E07A5F !important;
}
body.theme-warm .ch-period-btn.active {
  background: rgba(224,122,95,0.10) !important;
  border-color: #E07A5F !important;
  color: #D06A50 !important;
}
/* v1.69.5 */

/* ════════════════════════════════════════════════════════════
   v1.69.6  ウォーム: SLP (Sidebar LINE Panel) バブルを StateMessages と同色に
   案件管理・顧客管理・スタッフ・外注 で表示される LINE スレッドの吹き出し
   ════════════════════════════════════════════════════════════ */
/* 送信バブル (out): テラコッタ tint — msg-bubble.out と統一 */
body.theme-warm .slp-bubble-wrap.slp-out .slp-bubble {
  background: rgba(224,122,95,0.12) !important;
  border: 1px solid rgba(224,122,95,0.28) !important;
  color: #3D3531 !important;
}
/* 受信バブル (in): 白 + 淡ボーダー — msg-bubble と統一 */
body.theme-warm .slp-bubble-wrap.slp-in .slp-bubble {
  background: #FFFFFF !important;
  border: 1px solid #EFE9E5 !important;
  color: #3D3531 !important;
}
/* ファイルバブル */
body.theme-warm .slp-bubble-file {
  background: #FFFFFF !important;
  border: 1px solid #EFE9E5 !important;
  color: rgba(61,53,49,0.65) !important;
}
/* タイムスタンプ */
body.theme-warm .slp-bubble-time { color: rgba(61,53,49,0.45) !important; }
/* v1.69.6 */

/* ════════════════════════════════════════════════════════════
   v1.69.7  ウォーム: タイポグラフィ刷新 (Noto Sans JP + Quicksand)
   柔らかく細めのフォントに統一。Hiragino Sans より細身で抜け感のある印象に
   ════════════════════════════════════════════════════════════ */
body.theme-warm,
body.theme-warm html,
body.theme-warm * {
  font-family: 'M PLUS Rounded 1c', 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', 'Hiragino Sans', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* mono フォントは維持 */
body.theme-warm .us-mono,
body.theme-warm code,
body.theme-warm pre,
body.theme-warm [class*="mono"] {
  font-family: 'SF Mono', 'Roboto Mono', Monaco, Consolas, monospace !important;
}
/* 数字・日付など欧文寄りの表示は Nunito (丸みのある欧文サンセリフ) に */
body.theme-warm .pj-col-date,
body.theme-warm .ch-stat-val,
body.theme-warm .sg-pct-value,
body.theme-warm #sg-pct-value,
body.theme-warm #sg-used-val,
body.theme-warm #sg-max-val,
body.theme-warm #sg-usage-sep {
  font-family: 'Nunito', 'M PLUS Rounded 1c', sans-serif !important;
  letter-spacing: 0 !important;
}

/* 全体的にウェイトを軽量化 (700/800 → 500/600 に揃える) */
body.theme-warm .pj-row-header span,
body.theme-warm .pj-col-category,
body.theme-warm .pj-btn-edit,
body.theme-warm .pj-btn-upload,
body.theme-warm .ch-period-btn,
body.theme-warm .us-title,
body.theme-warm .us-section-title,
body.theme-warm .us-label,
body.theme-warm .panel-label,
body.theme-warm .sp-bar-title { font-weight: 600 !important; }

body.theme-warm .pj-status-select { font-weight: 600 !important; letter-spacing: 0 !important; }
body.theme-warm .pj-col-date { font-weight: 500 !important; }
body.theme-warm .us-value { font-weight: 400 !important; }
body.theme-warm .us-pw-form button,
body.theme-warm .us-btn-logout { font-weight: 600 !important; letter-spacing: 0.02em !important; }

/* セクションタイトル等の大文字 letter-spacing を緩和 */
body.theme-warm .us-section-title,
body.theme-warm .us-label,
body.theme-warm .pj-row-header span { letter-spacing: 0.04em !important; text-transform: none !important; }
/* v1.69.7 */

/* ════════════════════════════════════════════════════════════
   v1.70.0  ライトテーマ: ウォーム構造変更を light 色で再適用
   warm に加えた構造（ダッシュ罫線・パステルバッジ・outline ボタン・us モーダル
   白基調・容量グラフ色・期間 active・SLP バブル・action ボタン・丸ゴ書体）を
   light テーマでも適用。色はライトのアクセント (#0284c7) ベース。
   ════════════════════════════════════════════════════════════ */

/* ── ダッシュボード 案件一覧 (.pj-*) ── */
body.theme-light .grid-projects .pj-row,
body.theme-light .pj-row {
  border-bottom: 1px dashed #dde0e6 !important;
  padding: 14px 4px !important;
}
body.theme-light .grid-projects .pj-row:last-child,
body.theme-light .pj-row:last-child { border-bottom: none !important; }
body.theme-light .grid-projects .pj-row:hover,
body.theme-light .pj-row:hover { background: rgba(0,0,0,0.025) !important; }
body.theme-light .pj-row-header {
  border-bottom: 1px solid #dde0e6 !important;
  padding: 0 4px 10px !important;
}
body.theme-light .pj-row-header span {
  color: rgba(0,0,0,0.45) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
body.theme-light .pj-col-date {
  color: rgba(0,0,0,0.50) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
body.theme-light .pj-col-category {
  color: #1a202c !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

/* ステータスバッジ */
body.theme-light .pj-status-select {
  height: 30px !important;
  padding: 0 26px 0 12px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  background-color: rgba(0,0,0,0.06) !important;
  color: rgba(0,0,0,0.55) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23667085' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  background-size: 10px 6px !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}
body.theme-light .pj-status-select option {
  background: #FFFFFF !important;
  color: #1a202c !important;
  font-weight: 500 !important;
}
body.theme-light .pj-status-select[data-status="打合済み"],
body.theme-light .pj-status-select[data-status="打合せ済み"],
body.theme-light .pj-status-select[data-status="納品済み"] {
  background-color: #FFF4F0 !important;
  color: #D06A50 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23D06A50' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  background-size: 10px 6px !important;
}
body.theme-light .pj-status-select[data-status="撮影済み"] {
  background-color: #F0F7FA !important;
  color: #4A8C9E !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%234A8C9E' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  background-size: 10px 6px !important;
}
body.theme-light .pj-status-select[data-status="要対応"],
body.theme-light .pj-status-select[data-status="❗️要対応"] {
  background-color: #FCEBE8 !important;
  color: #C0392B !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23C0392B' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  background-size: 10px 6px !important;
}
body.theme-light .pj-status-select[data-status="完了"] {
  background-color: #E8F5EE !important;
  color: #048A5A !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23048A5A' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  background-size: 10px 6px !important;
}

/* 詳細ボタン: アウトライン */
body.theme-light .pj-btn-edit {
  background: #FFFFFF !important;
  border: 1px solid #dde0e6 !important;
  color: #1a202c !important;
  height: 30px !important;
  padding: 0 14px !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
}
body.theme-light .pj-btn-edit:hover {
  background: #f4f5f7 !important;
  border-color: #c0c5cf !important;
}

/* Upload ボタン: ライト ナビ色 (#252f3d) で塗りつぶし */
body.theme-light .pj-btn-upload {
  background: #252f3d !important;
  border-color: #252f3d !important;
  color: #FFFFFF !important;
  height: 30px !important;
  padding: 0 14px !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
}
body.theme-light .pj-btn-upload:hover {
  background: #1a202c !important;
  border-color: #1a202c !important;
}

/* パネル本体 */
body.theme-light .panel.grid-projects {
  background: #FFFFFF !important;
  border: 1px solid #dde0e6 !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04) !important;
  padding: 24px !important;
}
body.theme-light .panel.grid-projects .panel-label {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #1a202c !important;
  margin-bottom: 18px !important;
}

/* ── ユーザー設定モーダル (.us-*) ── */
body.theme-light .us-app { border: 1px solid #dde0e6 !important; box-shadow: 0 12px 32px rgba(0,0,0,0.10) !important; }
body.theme-light .us-header { background: #FFFFFF !important; border-bottom: 1px solid #dde0e6 !important; }
body.theme-light .us-title { color: #1a202c !important; }
body.theme-light .us-close { color: rgba(0,0,0,0.45) !important; }
body.theme-light .us-close:hover { color: #1a202c !important; }
body.theme-light .us-body { background: #FFFFFF !important; }

body.theme-light .us-section-title {
  color: #0369a1 !important;
  background: rgba(2,132,199,0.10) !important;
  border-left: 3px solid #0284c7 !important;
}

body.theme-light .us-section-list { background: #FFFFFF !important; border: 1px solid #dde0e6 !important; }
body.theme-light .us-row { border-bottom-color: #dde0e6 !important; }
body.theme-light .us-label { color: rgba(0,0,0,0.55) !important; }
body.theme-light .us-value { color: #1a202c !important; }
body.theme-light .us-mono { color: rgba(0,0,0,0.55) !important; }

body.theme-light .us-theme-btn {
  background: #FFFFFF !important;
  border: 1.5px solid #dde0e6 !important;
  color: rgba(0,0,0,0.55) !important;
}
body.theme-light .us-theme-btn:hover { border-color: #0284c7 !important; color: #0284c7 !important; }
body.theme-light .us-theme-btn.active {
  background: rgba(2,132,199,0.10) !important;
  border-color: #0284c7 !important;
  color: #0284c7 !important;
}

body.theme-light .us-pw-form { background: #FFFFFF !important; border-color: #dde0e6 !important; }
body.theme-light .us-pw-form input {
  color: #1a202c !important;
  background: #f4f5f7 !important;
  border-color: #dde0e6 !important;
}
body.theme-light .us-pw-form input::placeholder { color: rgba(0,0,0,0.38) !important; }
body.theme-light .us-pw-form input:focus {
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 2.5px rgba(2,132,199,0.18) !important;
}
body.theme-light .us-pw-form button {
  background: #252f3d !important;
  border-color: #252f3d !important;
  color: #FFFFFF !important;
}
body.theme-light .us-pw-form button:hover { background: #1a202c !important; border-color: #1a202c !important; }
body.theme-light .us-pw-form button:disabled {
  background: #dde0e6 !important;
  border-color: #dde0e6 !important;
  color: rgba(0,0,0,0.35) !important;
}

body.theme-light .us-msg.success {
  background: rgba(5,130,90,0.10) !important;
  border-color: rgba(5,130,90,0.40) !important;
  color: #048A5A !important;
}
body.theme-light .us-msg.error {
  background: rgba(192,57,43,0.10) !important;
  border-color: rgba(192,57,43,0.40) !important;
  color: #C0392B !important;
}

body.theme-light .us-danger { border-top-color: #dde0e6 !important; }
body.theme-light .us-btn-logout {
  background: #FFFFFF !important;
  border: 1px solid rgba(192,57,43,0.50) !important;
  color: #C0392B !important;
}
body.theme-light .us-btn-logout:hover {
  background: rgba(192,57,43,0.08) !important;
  border-color: #C0392B !important;
  color: #C0392B !important;
}

/* ── 容量円グラフ (.sg-*, .ring-bar) — ライトアクセント (青) で揃える ── */
body.theme-light #sg-app-wrapper {
  --c-green:  #0284c7 !important;
  --c-blue:   #06b6d4 !important;
  --c-orange: #ea580c !important;
  --c-danger: #dc2626 !important;
}
body.theme-light #sg-upgrade-warn { color: #0284c7 !important; }
body.theme-light #sg-upgrade-btn {
  background: rgba(2,132,199,0.20) !important;
  border-color: rgba(2,132,199,0.72) !important;
  color: #FFFFFF !important;
  animation: pulseLight 2s ease-in-out 0.8s infinite !important;
}
body.theme-light #sg-upgrade-btn:hover { background: rgba(2,132,199,0.32) !important; animation: none !important; }
@keyframes pulseLight {
  0%, 100% { box-shadow: 0 0 0 0 rgba(2,132,199,0.5); }
  50%      { box-shadow: 0 0 0 6px rgba(2,132,199,0); }
}

/* ── 売上推移 期間ボタン (.ch-period-btn) ── */
body.theme-light .ch-period-btn {
  border-color: #dde0e6 !important;
  color: rgba(0,0,0,0.55) !important;
  background: transparent !important;
}
body.theme-light .ch-period-btn:hover {
  border-color: #0284c7 !important;
  color: #0284c7 !important;
}
body.theme-light .ch-period-btn.active {
  background: rgba(2,132,199,0.10) !important;
  border-color: #0284c7 !important;
  color: #0369a1 !important;
}

/* ── SLP (Sidebar LINE Panel) バブル ── */
body.theme-light .slp-bubble-wrap.slp-out .slp-bubble {
  background: rgba(2,132,199,0.12) !important;
  border: 1px solid rgba(2,132,199,0.28) !important;
  color: #1a202c !important;
}
body.theme-light .slp-bubble-wrap.slp-in .slp-bubble {
  background: #FFFFFF !important;
  border: 1px solid #dde0e6 !important;
  color: #1a202c !important;
}
body.theme-light .slp-bubble-file {
  background: #FFFFFF !important;
  border: 1px solid #dde0e6 !important;
  color: rgba(0,0,0,0.65) !important;
}
body.theme-light .slp-bubble-time { color: rgba(0,0,0,0.45) !important; }

/* ── 新規顧客/案件登録 サイドバーボタン ── */
body.theme-light .action-customer {
  background: transparent !important;
  border-color: rgba(255,255,255,0.20) !important;
  color: #FFFFFF !important;
}
body.theme-light .action-customer:hover {
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.40) !important;
}
body.theme-light .action-project {
  background: #0284c7 !important;
  border-color: #0284c7 !important;
  color: #FFFFFF !important;
}
body.theme-light .action-project:hover {
  background: #0369a1 !important;
  border-color: #0369a1 !important;
}

/* タイポグラフィは light テーマでは元の Hiragino Sans を維持 (v1.70.1 で revert) */
/* v1.70.1 */

/* アルバム設定のイベント日付は顧客管理の生年月日と同じネイティブ date 入力 (.field-input) を使用 (v1.73.35) */

/* ── BtoB 顧客タイプ セグメント切替 (v1.73.38) ── */
.cu-type-seg {
  display: flex; gap: 4px;
  background: var(--c-surface-2);
  border-radius: 10px; padding: 4px;
}
.cu-type-btn {
  flex: 1; border: none; cursor: pointer;
  font-size: 13px; font-weight: 700;
  padding: 8px 4px; border-radius: 8px;
  background: transparent; color: var(--c-text-sub);
  transition: background .15s, color .15s;
}
.cu-type-btn:hover { color: var(--c-text); }
.cu-type-btn.active {
  background: var(--c-accent);
  color: #fff;
}
/* 顧客一覧 タイプバッジ */
.sli-type-individual     { background: var(--c-surface-2); color: var(--c-text-sub); }
.sli-type-sole_proprietor { background: var(--c-orange); color: #fff; }
.sli-type-corporate      { background: var(--c-blue);   color: #fff; }

/* ════════════════════════════════════════════════════════════
   v1.74.0  支払いタブ ライブプレビュー (em-tab-payment 2カラム)
   ════════════════════════════════════════════════════════════ */

/* ── 支払いタブ全体: グリッドで2カラム化 ── */
#em-edit-modal #em-tab-payment {
  /* タブパネルは flex-direction:column になっているので、
     内部の split で grid を組む */
}
#em-edit-modal #em-payment-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 18px;
  align-items: start;
  /* max-width を解除して2カラムに広げる */
  width: 100%;
  max-width: none !important;
}
/* タブパネル自体の max-width 制限を支払いタブだけ解除 */
#em-edit-modal #em-form-wrap #em-tab-payment {
  max-width: 1280px !important;
}

#em-edit-modal #em-payment-split > .em-pay-left {
  display: flex; flex-direction: column; gap: 18px;
  min-width: 0;
}
#em-edit-modal #em-payment-split > .em-pay-right {
  position: sticky;
  top: 8px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  /* 編集側より少し背景を変えて区別 */
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 10px;
}

/* ── プレビュー上部ツールバー (書類タブ + LINE送信ボタン) ── */
#em-edit-modal .em-prv-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
#em-edit-modal .em-prv-doctabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}
#em-edit-modal .em-prv-doctab {
  border: 1px solid var(--c-border);
  background: rgba(255,255,255,0.03);
  color: var(--c-text-sub);
  padding: 6px 10px;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
}
#em-edit-modal .em-prv-doctab:hover {
  background: rgba(255,255,255,0.06);
  color: var(--c-text);
}
#em-edit-modal .em-prv-doctab.active {
  background: var(--c-accent-18);
  border-color: var(--c-accent-72);
  color: var(--c-text);
}
#em-edit-modal .em-prv-doctab.active.estimate { background: rgba(99,102,241,0.22); border-color: rgba(99,102,241,0.55); color: #c7d2fe; }
#em-edit-modal .em-prv-doctab.active.receipt  { background: rgba(12,199,85,0.22); border-color: rgba(12,199,85,0.55); color: #86efac; }
#em-edit-modal .em-prv-doctab.active.invoice  { background: rgba(245,158,11,0.22); border-color: rgba(245,158,11,0.55); color: #fbbf24; }

/* ── LINE送信ボタン ── */
#em-edit-modal .em-prv-line-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: none;
  border-radius: 8px;
  background: var(--c-green, #0CC755);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: opacity .15s, transform .1s;
}
#em-edit-modal .em-prv-line-btn:hover { opacity: 0.9; }
#em-edit-modal .em-prv-line-btn:active { transform: scale(0.97); }

/* ── プレビュー iframe ラッパー ── */
#em-edit-modal .em-prv-frame-wrap {
  position: relative;
  width: 100%;
  /* A4 縦長比 (210:297 ≈ 0.707) */
  aspect-ratio: 210 / 297;
  background: #2a2828;
  border-radius: 8px;
  overflow: hidden;
  /* min-height で極端に狭い場面でも一定確保 */
  min-height: 420px;
}
#em-edit-modal #em-invoice-preview {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: transparent;
}

/* ── プレビュー拡大ボタン（通常状態：右上に重ねる） ── */
#em-edit-modal .em-prv-zoom-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, transform .1s, opacity .15s;
  opacity: 0.85;
}
#em-edit-modal .em-prv-zoom-btn:hover { background: rgba(0,0,0,0.75); opacity: 1; }
#em-edit-modal .em-prv-zoom-btn:active { transform: scale(0.95); }

/* ── プレビュー拡大解除ボタン（通常状態では非表示） ── */
#em-edit-modal .em-prv-close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10002;
  width: 40px;
  height: 40px;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, transform .1s;
}
#em-edit-modal .em-prv-close-btn:hover { background: rgba(0,0,0,0.9); }
#em-edit-modal .em-prv-close-btn:active { transform: scale(0.95); }

/* ── 拡大時オーバーレイ（背景の半透明黒） ── */
#em-edit-modal #em-prv-lb-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.82);
  z-index: 10000;
}
#em-edit-modal #em-prv-lb-overlay.active { display: block; }

/* ── 拡大状態：iframe ラッパーごとフルスクリーン化 ── */
#em-edit-modal .em-prv-frame-wrap.em-prv-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10001;
  border-radius: 0;
  aspect-ratio: auto;
  min-height: 0;
  background: #2a2828;
  padding: 24px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 親 .em-pay-right が position:sticky でスタッキングコンテキストを作るため、
   フルスクリーン時はその親自体を引き上げないとオーバーレイ(10000)が
   書類の上に被ってしまう。body フラグで親側を 10003 に引き上げる。 */
body.em-prv-fullscreen-open #em-edit-modal #em-payment-split > .em-pay-right {
  z-index: 10003;
}
/* 拡大中は iframe を A4 比率で内側にセンタリング */
#em-edit-modal .em-prv-frame-wrap.em-prv-fullscreen #em-invoice-preview {
  width: auto;
  height: 100%;
  max-width: 100%;
  aspect-ratio: 210 / 297;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
/* 拡大中は通常の拡大ボタンを隠し、×ボタンを表示 */
#em-edit-modal .em-prv-frame-wrap.em-prv-fullscreen .em-prv-zoom-btn { display: none; }
#em-edit-modal .em-prv-frame-wrap.em-prv-fullscreen .em-prv-close-btn { display: inline-flex; }

/* 拡大中は背景のスクロールを抑止 */
body.em-prv-fullscreen-open { overflow: hidden; }

/* モバイル：余白を詰めて高さを最大化 */
@media (max-width: 640px) {
  #em-edit-modal .em-prv-frame-wrap.em-prv-fullscreen { padding: 12px; }
  #em-edit-modal .em-prv-frame-wrap.em-prv-fullscreen #em-invoice-preview {
    /* 縦幅がきつい時は横幅基準にしてはみ出しを防ぐ */
    width: 100%;
    height: auto;
    max-height: 100%;
  }
  #em-edit-modal .em-prv-close-btn { top: 8px; right: 8px; width: 36px; height: 36px; }
}

/* ── モバイル切替タブ（デスクトップでは非表示） ── */
#em-edit-modal #em-pay-mobile-tabs {
  display: none;
  gap: 6px;
  margin-bottom: 10px;
}
#em-edit-modal .em-pay-mob-tab {
  flex: 1;
  border: 1px solid var(--c-border);
  background: rgba(255,255,255,0.03);
  color: var(--c-text-sub);
  padding: 8px 0;
  font-size: 12px;
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
}
#em-edit-modal .em-pay-mob-tab.active {
  background: var(--c-accent-18);
  border-color: var(--c-accent-72);
  color: var(--c-text);
}

/* ── モバイル ≤900px: 1カラムにフォールバック + 編集/プレビュー切替表示 ── */
@media (max-width: 900px) {
  #em-edit-modal #em-pay-mobile-tabs { display: flex; }
  #em-edit-modal #em-payment-split {
    grid-template-columns: 1fr;
  }
  #em-edit-modal #em-payment-split > .em-pay-left,
  #em-edit-modal #em-payment-split > .em-pay-right {
    display: none;
  }
  /* デフォルトは編集表示 */
  #em-edit-modal #em-payment-split:not([data-pay-mob="preview"]) > .em-pay-left { display: flex; }
  #em-edit-modal #em-payment-split[data-pay-mob="preview"] > .em-pay-right { display: flex; }
  #em-edit-modal #em-payment-split > .em-pay-right {
    position: static; /* モバイルでは sticky 解除 */
  }
}

/* ── ライトテーマ: プレビューパネル背景の微調整 ── */
body.theme-light #em-edit-modal #em-payment-split > .em-pay-right,
body.theme-warm  #em-edit-modal #em-payment-split > .em-pay-right {
  background: rgba(0,0,0,0.02);
}
body.theme-light #em-edit-modal .em-prv-frame-wrap,
body.theme-warm  #em-edit-modal .em-prv-frame-wrap {
  background: #f3f3f3;
}