/* ===================================================================
 * DVTV-061 ダッシュボードビルダー v1.2.0
 * Builder CSS - 管理画面スタイル
 * =================================================================== */

/* ===================================================================
 * ルート + レイアウト
 * =================================================================== */
.dvtv-db-builder-wrap.pine-root {
  min-height: 100vh;
  padding: 20px;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  font-size: 14px;
  font-family: system-ui, -apple-system, "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif;
  font-feature-settings: "palt";
  color: #1e293b;
}
.dvtv-db-builder-wrap * { box-sizing: border-box; }

.dvtv-db-builder-container {
  max-width: 1600px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ===================================================================
 * ヘッダー
 * =================================================================== */
.dvtv-db-builder-header {
  padding: 14px 20px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.dvtv-db-builder-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
}
.dvtv-db-builder-header-left h1 {
  margin: 0; padding: 0; border: 0;
  font-size: 22px; font-weight: 800; letter-spacing: -0.02em;
  background: linear-gradient(135deg, #1e293b 0%, #8b5cf6 60%, #ec4899 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  line-height: 1.2;
}
.dvtv-db-eyebrow {
  margin: 2px 0 0;
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #94a3b8;
  letter-spacing: 0.05em;
}
.dvtv-db-builder-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ===================================================================
 * ボディ 2カラム
 * =================================================================== */
.dvtv-db-builder-body {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 14px;
}
@media (max-width: 1024px) {
  .dvtv-db-builder-body { grid-template-columns: 1fr; }
}

/* ===================================================================
 * サイドバー
 * =================================================================== */
.dvtv-db-sidebar {
  padding: 16px;
  border-radius: 20px;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  position: sticky;
  top: 20px;
  align-self: start;
}
.dvtv-db-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(148,163,184,0.25);
}
.dvtv-db-sidebar-header h3 {
  margin: 0; padding: 0; border: 0;
  font-size: 14px; font-weight: 700;
  color: #334155;
  display: inline-flex; align-items: center; gap: 6px;
}

.dvtv-db-dash-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dvtv-db-dash-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font-family: inherit;
  transition: all 0.2s ease;
  width: 100%;
  min-width: 0;
}
.dvtv-db-dash-item:hover {
  background: rgba(255,255,255,0.6);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59,130,246,0.12);
}
.dvtv-db-dash-item.is-active {
  background: linear-gradient(135deg, rgba(139,92,246,0.15) 0%, rgba(236,72,153,0.15) 100%);
  border-color: rgba(139,92,246,0.4);
  box-shadow: 0 4px 14px rgba(139,92,246,0.2);
}
.dvtv-db-dash-item-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.dvtv-db-dash-item-title {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dvtv-db-dash-item-slug {
  font-size: 10px;
  color: #94a3b8;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dvtv-db-empty-small {
  padding: 30px 16px;
  text-align: center;
  color: #94a3b8;
  font-size: 12px;
  line-height: 1.6;
}

/* ===================================================================
 * メインエディタ
 * =================================================================== */
.dvtv-db-main {
  min-width: 0;
}

.dvtv-db-editor {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dvtv-db-editor-bar {
  padding: 14px 20px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.dvtv-db-editor-bar-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}
.dvtv-db-editor-bar-left h2 {
  margin: 0; padding: 0; border: 0;
  font-size: 18px; font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.01em;
}
.dvtv-db-editor-shortcode {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
}
.dvtv-db-editor-shortcode code {
  font-size: 11px;
  color: #6366f1;
  background: rgba(99,102,241,0.08);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(99,102,241,0.15);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.dvtv-db-editor-bar-right {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* ===================================================================
 * タブエディタ
 * =================================================================== */
.dvtv-db-tabs-editor {
  padding: 14px 18px;
  border-radius: 18px;
}
.dvtv-db-tabs-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.dvtv-db-tabs-editor-head h3 {
  margin: 0; padding: 0; border: 0;
  font-size: 14px; font-weight: 700;
  color: #334155;
  display: inline-flex; align-items: center; gap: 6px;
}

.dvtv-db-tabs-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 48px;
  padding: 4px;
  align-items: center;
}

.dvtv-db-tab-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px 4px 4px;
  background: rgba(255,255,255,0.4);
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.dvtv-db-tab-chip:hover {
  background: rgba(255,255,255,0.6);
  box-shadow: 0 4px 12px rgba(59,130,246,0.12);
}
.dvtv-db-tab-chip.is-active {
  background: linear-gradient(135deg, rgba(59,130,246,0.15) 0%, rgba(99,102,241,0.15) 100%);
  border-color: rgba(99,102,241,0.4);
  box-shadow: 0 3px 10px rgba(99,102,241,0.2);
}
.dvtv-db-tab-chip.is-hidden-tab {
  opacity: 0.55;
  border-style: dashed;
}
.dvtv-db-tab-chip.dragging {
  opacity: 0.5;
}
.dvtv-db-tab-label {
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  padding: 0 4px;
}

.dvtv-db-tab-shift,
.dvtv-db-tab-edit,
.dvtv-db-tab-del,
.dvtv-db-tab-vis {
  background: transparent;
  border: 0;
  padding: 4px;
  border-radius: 6px;
  cursor: pointer;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.dvtv-db-tab-shift:hover,
.dvtv-db-tab-edit:hover,
.dvtv-db-tab-vis:hover { background: rgba(99,102,241,0.15); color: #4f46e5; }
.dvtv-db-tab-del:hover { background: rgba(239,68,68,0.15); color: #dc2626; }
.dvtv-db-tab-shift:disabled {
  opacity: 0.25;
  cursor: not-allowed;
  pointer-events: none;
}
.dvtv-db-tab-drag-handle {
  cursor: grab;
  color: #94a3b8;
  padding: 2px;
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
}
.dvtv-db-tab-drag-handle:hover {
  color: #64748b;
  background: rgba(148,163,184,0.15);
}
.dvtv-db-tab-drag-handle:active { cursor: grabbing; }

.dvtv-db-empty-inline {
  color: #94a3b8;
  font-size: 13px;
  padding: 8px 12px;
}

/* ===================================================================
 * カードエディタ
 * =================================================================== */
.dvtv-db-cards-editor {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dvtv-db-cards-panel { display: none; }
.dvtv-db-cards-panel.is-active { display: block; }
.dvtv-db-cards-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 6px 2px;
}
.dvtv-db-cards-panel-head h3 {
  margin: 0; padding: 0; border: 0;
  font-size: 15px; font-weight: 700;
  color: #0f172a;
  display: inline-flex; align-items: center; gap: 8px;
}
.dvtv-db-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
  min-height: 100px;
}

.dvtv-db-card-tile {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 12px 12px 10px;
  border-radius: 14px;
  position: relative;
  transition: all 0.25s ease;
}
.dvtv-db-card-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(59,130,246,0.12);
}
.dvtv-db-card-tile.is-hidden-card {
  opacity: 0.55;
  border-style: dashed;
}
.dvtv-db-card-tile.dragging {
  opacity: 0.4;
}
.dvtv-db-card-tile-drag {
  cursor: grab;
  color: #94a3b8;
  padding: 2px;
  display: flex;
  align-items: center;
}
.dvtv-db-card-tile-drag:active { cursor: grabbing; }
.dvtv-db-card-tile-icon { flex-shrink: 0; }
.dvtv-db-card-tile-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.dvtv-db-card-tile-body h4 {
  margin: 0; padding: 0; border: 0;
  font-size: 13px; font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dvtv-db-card-tile-body p {
  margin: 0; padding: 0;
  font-size: 11px;
  color: #64748b;
  line-height: 1.4;
}
.dvtv-db-card-tile-url {
  font-size: 10px;
  color: #94a3b8;
  font-family: ui-monospace, monospace;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dvtv-db-card-tile-actions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
  align-items: flex-start;
}
.dvtv-db-card-tile-shift {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  margin-right: 2px;
}
.dvtv-db-card-tile-shift .dvtv-db-btn-icon {
  min-width: 22px;
  height: 22px;
  padding: 2px;
}
.dvtv-db-card-tile .dvtv-db-btn-icon {
  background: transparent;
  border: 0;
  padding: 5px;
  min-width: 28px;
  height: 28px;
  border-radius: 6px;
  color: #64748b;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.dvtv-db-card-tile .dvtv-db-btn-icon:hover {
  background: rgba(99,102,241,0.15);
  color: #4f46e5;
  transform: none;
  box-shadow: none;
}
.dvtv-db-card-tile .dvtv-db-btn-icon:disabled {
  opacity: 0.25;
  cursor: not-allowed;
  pointer-events: none;
}
.dvtv-db-card-tile .dvtv-db-card-del:hover {
  background: rgba(239,68,68,0.15);
  color: #dc2626;
}

.dvtv-db-hidden-badge {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(148,163,184,0.2);
  color: #64748b;
  font-size: 9px;
  font-weight: 700;
  border-radius: 6px;
  letter-spacing: 0.1em;
  align-self: flex-start;
}

.dvtv-db-empty-small-col {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  border: 2px dashed rgba(148,163,184,0.3);
  border-radius: 14px;
  color: #94a3b8;
  gap: 8px;
}
.dvtv-db-empty-small-col p { margin: 0; font-size: 13px; }

/* ===================================================================
 * ボタン
 * =================================================================== */
.pine-btn-primary, .dvtv-db-btn-primary-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid rgba(99,102,241,0.5);
  background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
  color: #fff;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 3px 10px rgba(99,102,241,0.25);
}
.pine-btn-primary:hover, .dvtv-db-btn-primary-sm:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 6px 16px rgba(99,102,241,0.35);
  color: #fff;
}
.dvtv-db-btn-primary-sm {
  padding: 6px 12px;
  font-size: 12px;
}

.dvtv-db-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #475569;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
}
.dvtv-db-btn-secondary:hover {
  background: rgba(255,255,255,0.7);
  color: #1e293b;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59,130,246,0.15);
}

.dvtv-db-btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid rgba(239,68,68,0.35);
  background: rgba(254,226,226,0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #b91c1c;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  font-weight: 500;
  transition: all 0.2s ease;
}
.dvtv-db-btn-danger:hover {
  background: rgba(239,68,68,0.9);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(239,68,68,0.3);
}

.dvtv-db-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  min-width: 34px;
  height: 34px;
  border: 1px solid rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 9px;
  color: #475569;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  transition: all 0.2s;
}
.dvtv-db-btn-icon:hover {
  background: rgba(255,255,255,0.7);
  color: #1e293b;
  transform: translateY(-1px);
}

/* ===================================================================
 * モーダル
 * =================================================================== */
.dvtv-db-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.dvtv-db-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.dvtv-db-modal-box {
  position: relative;
  width: 100%;
  max-width: 780px;
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  overflow: hidden;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: 0 30px 60px rgba(15,23,42,0.3);
}
.dvtv-db-modal-header {
  padding: 14px 20px;
  border-bottom: 1px solid rgba(148,163,184,0.2);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dvtv-db-modal-header h3 {
  margin: 0; padding: 0; border: 0;
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
}
.dvtv-db-modal-close {
  background: transparent;
  border: 0;
  padding: 6px;
  border-radius: 8px;
  cursor: pointer;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dvtv-db-modal-close:hover {
  background: rgba(148,163,184,0.2);
  color: #1e293b;
}
.dvtv-db-modal-body {
  padding: 18px 22px;
  overflow-y: auto;
  flex: 1;
}
.dvtv-db-modal-footer {
  padding: 12px 20px;
  border-top: 1px solid rgba(148,163,184,0.2);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  background: rgba(255,255,255,0.4);
}

/* ===================================================================
 * フォーム
 * =================================================================== */
.dvtv-db-form {
  display: flex;
  flex-direction: column;
}
.dvtv-db-form-section {
  padding: 14px 0;
  border-bottom: 1px solid rgba(148,163,184,0.2);
}
.dvtv-db-form-section:first-child { padding-top: 0; }
.dvtv-db-form-section:last-child { border-bottom: 0; padding-bottom: 4px; }
.dvtv-db-form-section-h {
  margin: 0 0 12px 0;
  padding: 0;
  border: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #6366f1;
  text-transform: uppercase;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.dvtv-db-form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.dvtv-db-form-label {
  font-size: 12px;
  font-weight: 700;
  color: #334155;
  display: flex;
  align-items: center;
  gap: 4px;
}
.dvtv-db-form-label .req { color: #ef4444; font-weight: 800; }
.dvtv-db-form-control { display: flex; flex-direction: column; gap: 4px; }
.dvtv-db-form-help {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 2px;
  line-height: 1.5;
}

.dvtv-db-input, .dvtv-db-textarea, .dvtv-db-select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid rgba(148,163,184,0.4);
  background: rgba(255,255,255,0.7);
  border-radius: 9px;
  font-size: 13px;
  font-family: inherit;
  color: #1e293b;
  transition: all 0.15s;
}
.dvtv-db-input:focus, .dvtv-db-textarea:focus, .dvtv-db-select:focus {
  outline: 0;
  border-color: #6366f1;
  background: rgba(255,255,255,0.95);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
}
.dvtv-db-textarea {
  min-height: 70px;
  resize: vertical;
  font-family: inherit;
}
.dvtv-db-select[size] {
  padding: 4px;
  font-size: 12px;
}
.dvtv-db-select[size] option {
  padding: 5px 8px;
  border-radius: 4px;
}

.dvtv-db-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #334155;
  cursor: pointer;
  user-select: none;
}
.dvtv-db-checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #6366f1;
}

/* URL選択行（input + 🔍ボタン + プリセット） */
.dvtv-db-url-row {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.dvtv-db-url-input { flex: 1 1 220px; min-width: 0; }
.dvtv-db-url-search {
  flex-shrink: 0;
  width: 36px;
  min-width: 36px;
  height: 36px;
  padding: 0;
}
.dvtv-db-url-preset {
  flex: 0 1 140px;
  min-width: 120px;
  font-size: 12px;
}
.dvtv-db-page-selector {
  margin-top: 8px;
  padding: 12px;
  background: rgba(240, 247, 252, 0.7);
  border: 1px solid rgba(99,102,241,0.2);
  border-radius: 10px;
}
.dvtv-db-page-selector-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}
.dvtv-db-page-selector-row:last-child { margin-bottom: 0; }
.dvtv-db-page-selector-row label {
  font-size: 11px;
  font-weight: 700;
  color: #4f46e5;
}
.dvtv-db-page-selector .dvtv-db-post-sel { min-height: 160px; }
.dvtv-db-page-selector .dvtv-db-form-help { margin-top: 6px; }

/* プリセット編集行 */
.dvtv-db-preset-row {
  display: grid;
  grid-template-columns: 200px 1fr 36px;
  gap: 8px;
  margin-bottom: 8px;
  align-items: center;
}
.dvtv-db-preset-row .preset-label,
.dvtv-db-preset-row .preset-url { margin: 0; }
.dvtv-db-preset-del {
  width: 36px;
  min-width: 36px;
  height: 36px;
  padding: 0;
}
.dvtv-db-preset-del:hover {
  background: rgba(239,68,68,0.15) !important;
  color: #dc2626 !important;
}

/* ===================================================================
 * アイコンピッカー v1.4.0（検索 + カテゴリタブ + 220種）
 * =================================================================== */
.dvtv-db-icon-picker {
  background: rgba(240, 247, 252, 0.45);
  border: 1px solid rgba(148,163,184,0.22);
  border-radius: 12px;
  padding: 8px;
}

/* --- 検索行 --- */
.dvtv-db-icon-search-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 7px;
}
.dvtv-db-icon-search-ico {
  display: inline-flex;
  align-items: center;
  color: #94a3b8;
  flex: 0 0 auto;
  margin-left: 2px;
}
.dvtv-db-icon-search-ico svg { width: 15px; height: 15px; }
input.dvtv-db-input.dvtv-db-icon-search {
  flex: 1 1 auto;
  min-width: 0;
  height: 30px;
  padding: 0 9px;
  font-size: 12.5px;
  border-radius: 8px;
}
.dvtv-db-icon-count {
  flex: 0 0 auto;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  color: #64748b;
  background: rgba(255,255,255,0.8);
  border: 1px solid rgba(148,163,184,0.25);
  border-radius: 999px;
  padding: 2px 8px;
  min-width: 34px;
  text-align: center;
}

/* --- カテゴリタブ（横スクロール1行） --- */
.dvtv-db-icon-cats {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 5px;
  margin-bottom: 6px;
  scrollbar-width: thin;
}
.dvtv-db-icon-cats::-webkit-scrollbar { height: 5px; }
.dvtv-db-icon-cats::-webkit-scrollbar-thumb { background: rgba(148,163,184,0.4); border-radius: 3px; }
.dvtv-db-icon-cat {
  flex: 0 0 auto;
  border: 1px solid rgba(148,163,184,0.28);
  background: rgba(255,255,255,0.7);
  color: #475569;
  font-size: 11px;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.14s;
}
.dvtv-db-icon-cat:hover { background: #fff; color: #1e293b; }
.dvtv-db-icon-cat.is-active {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  border-color: transparent;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 7px rgba(99,102,241,0.32);
}

/* --- グリッド --- */
.dvtv-db-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(66px, 1fr));
  gap: 5px;
  max-height: 288px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 3px;
  scrollbar-width: thin;
}
.dvtv-db-icon-grid::-webkit-scrollbar { width: 7px; }
.dvtv-db-icon-grid::-webkit-scrollbar-thumb { background: rgba(148,163,184,0.42); border-radius: 4px; }
.dvtv-db-icon-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 3px 6px;
  border: 1.5px solid transparent;
  background: rgba(255,255,255,0.72);
  border-radius: 9px;
  cursor: pointer;
  color: #475569;
  transition: background 0.14s, color 0.14s, border-color 0.14s, transform 0.14s;
  min-height: 56px;
}
.dvtv-db-icon-opt:hover {
  background: #fff;
  color: #1e293b;
  transform: translateY(-1px);
  border-color: rgba(148,163,184,0.35);
}
.dvtv-db-icon-opt.is-selected {
  background: linear-gradient(135deg, rgba(99,102,241,0.22) 0%, rgba(139,92,246,0.22) 100%);
  border-color: #6366f1;
  color: #4f46e5;
  box-shadow: 0 2px 8px rgba(99,102,241,0.25);
}
.dvtv-db-icon-opt-svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  height: 21px;
}
/* インラインSVG / <use> のどちらでも確実にサイズが出るようにする */
.dvtv-db-icon-opt-svg svg {
  width: 20px !important;
  height: 20px !important;
  display: block;
  stroke: currentColor;
  fill: none;
}
.dvtv-db-icon-opt-label {
  font-size: 9.5px;
  color: inherit;
  opacity: 0.85;
  line-height: 1.15;
  text-align: center;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dvtv-db-icon-opt.is-selected .dvtv-db-icon-opt-label { opacity: 1; font-weight: 600; }

.dvtv-db-icon-empty {
  text-align: center;
  color: #94a3b8;
  font-size: 12px;
  padding: 22px 8px;
}

/* ===================================================================
 * 汎用エンプティ
 * =================================================================== */
.dvtv-db-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px 24px;
  border-radius: 18px;
  text-align: center;
  gap: 10px;
  color: #64748b;
}
.dvtv-db-empty svg { color: #94a3b8; }
.dvtv-db-empty p { margin: 0; font-size: 14px; line-height: 1.6; }

.dvtv-db-error {
  padding: 20px 24px;
  margin: 12px auto;
  max-width: 1400px;
  background: rgba(254, 226, 226, 0.6);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 14px;
  color: #991b1b;
  backdrop-filter: blur(8px);
}

/* ===================================================================
 * トースト
 * =================================================================== */
.dvtv-db-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  padding: 12px 18px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #fff;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 10px 28px rgba(16,185,129,0.35);
  z-index: 100010;
  animation: dbToastIn 0.3s ease;
}
.dvtv-db-toast.is-error {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  box-shadow: 0 10px 28px rgba(239,68,68,0.35);
}
@keyframes dbToastIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}


/* ===================================================================
 * v1.4.0 追記: アイコンピッカー ダークモード
 * =================================================================== */
.dvtv-db-builder-wrap[data-theme="dark"] .dvtv-db-icon-picker,
.dvtv-db-builder-wrap.dvtv-dark .dvtv-db-icon-picker {
  background: rgba(30, 41, 59, 0.5) !important;
  border-color: rgba(148,163,184,0.2) !important;
}
.dvtv-db-builder-wrap[data-theme="dark"] .dvtv-db-icon-opt,
.dvtv-db-builder-wrap.dvtv-dark .dvtv-db-icon-opt {
  background: rgba(51, 65, 85, 0.6) !important;
  color: #cbd5e1 !important;
}
.dvtv-db-builder-wrap[data-theme="dark"] .dvtv-db-icon-opt:hover,
.dvtv-db-builder-wrap.dvtv-dark .dvtv-db-icon-opt:hover {
  background: rgba(71, 85, 105, 0.9) !important;
  color: #f1f5f9 !important;
}
.dvtv-db-builder-wrap[data-theme="dark"] .dvtv-db-icon-cat,
.dvtv-db-builder-wrap.dvtv-dark .dvtv-db-icon-cat {
  background: rgba(51, 65, 85, 0.6) !important;
  color: #cbd5e1 !important;
  border-color: rgba(148,163,184,0.22) !important;
}
.dvtv-db-builder-wrap[data-theme="dark"] .dvtv-db-icon-cat.is-active,
.dvtv-db-builder-wrap.dvtv-dark .dvtv-db-icon-cat.is-active {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
  color: #fff !important;
}
.dvtv-db-builder-wrap[data-theme="dark"] .dvtv-db-icon-count,
.dvtv-db-builder-wrap.dvtv-dark .dvtv-db-icon-count {
  background: rgba(51, 65, 85, 0.7) !important;
  color: #94a3b8 !important;
}

/* v1.4.0: 内蔵インラインSVGアイコンの共通指定 */
#dvtv-db-builder .dvtv-db-ico { stroke: currentColor; fill: none; vertical-align: middle; flex: 0 0 auto; }

/* 狭い画面ではアイコンを詰める */
@media (max-width: 640px) {
  .dvtv-db-icon-grid { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); max-height: 240px; }
  .dvtv-db-icon-opt { min-height: 50px; padding: 6px 2px 5px; }
  .dvtv-db-icon-opt-label { font-size: 9px; }
}

/* ===================================================================
 * v1.4.1: カード形状ピッカー
 * =================================================================== */
.dvtv-db-shape-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 6px;
}
.dvtv-db-shape-opt {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  padding: 10px 4px 7px;
  border: 1.5px solid transparent;
  background: rgba(255,255,255,0.72);
  border-radius: 10px;
  cursor: pointer;
  color: #475569;
  transition: background 0.14s, color 0.14s, border-color 0.14s, transform 0.14s;
}
.dvtv-db-shape-opt:hover {
  background: #fff; color: #1e293b;
  transform: translateY(-1px);
  border-color: rgba(148,163,184,0.35);
}
.dvtv-db-shape-opt.is-selected {
  background: linear-gradient(135deg, rgba(99,102,241,0.2) 0%, rgba(139,92,246,0.2) 100%);
  border-color: #6366f1;
  color: #4f46e5;
  box-shadow: 0 2px 8px rgba(99,102,241,0.22);
}
.dvtv-db-shape-lbl { font-size: 10px; line-height: 1.1; white-space: nowrap; }

/* --- 形状のミニプレビュー --- */
.dvtv-db-shape-prev {
  display: block;
  width: 30px; height: 22px;
  background: linear-gradient(135deg, #818cf8 0%, #a78bfa 100%);
  flex: 0 0 auto;
}
.dvtv-db-shape-prev-rect    { border-radius: 5px; }
.dvtv-db-shape-prev-square  { width: 22px; height: 22px; border-radius: 5px; }
.dvtv-db-shape-prev-circle  { width: 22px; height: 22px; border-radius: 50%; }
.dvtv-db-shape-prev-pill    { width: 32px; height: 15px; border-radius: 999px; }
.dvtv-db-shape-prev-diamond { width: 19px; height: 19px; border-radius: 3px; transform: rotate(45deg); }
.dvtv-db-shape-prev-hexagon {
  width: 22px; height: 24px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.dvtv-db-shape-prev-ribbon {
  border-radius: 4px;
  background: linear-gradient(90deg, #6366f1 0 6px, #e0e7ff 6px 100%);
}
.dvtv-db-shape-prev-outline {
  border-radius: 5px;
  background: transparent;
  border: 2px solid #818cf8;
}
.dvtv-db-shape-note { margin-top: 6px; min-height: 15px; }

/* ===================================================================
 * v1.4.2: 文字色ピッカー
 * v1.4.1 は似た色の名前付きプリセットを一列に並べていて判別できなかった。
 * カラーピッカーを主役にし、色見本は「色相×濃淡」の格子に並べ替えた。
 * =================================================================== */
.dvtv-db-tc-label {
  font-size: 11px; color: #64748b;
  margin: 8px 0 5px;
}
.dvtv-db-cp {
  background: rgba(240, 247, 252, 0.45);
  border: 1px solid rgba(148,163,184,0.22);
  border-radius: 10px;
  padding: 8px;
}

/* --- 操作行 --- */
.dvtv-db-cp-head {
  display: flex; align-items: center; gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.dvtv-db-cp-def {
  flex: 0 0 auto;
  border: 1.5px solid rgba(148,163,184,0.35);
  background: rgba(255,255,255,0.85);
  color: #475569;
  font-size: 11.5px; line-height: 1;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.14s;
}
.dvtv-db-cp-def:hover { background: #fff; color: #1e293b; }
.dvtv-db-cp-def.is-selected {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  border-color: transparent;
  color: #fff; font-weight: 600;
  box-shadow: 0 2px 7px rgba(99,102,241,0.3);
}

/* ネイティブのカラーピッカーを目立つボタンとして見せる */
.dvtv-db-cp-native {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 7px;
  border: 1.5px solid rgba(99,102,241,0.45);
  background: rgba(255,255,255,0.9);
  border-radius: 8px;
  padding: 5px 11px 5px 6px;
  cursor: pointer;
  font-size: 11.5px; color: #4f46e5; font-weight: 600;
  transition: all 0.14s;
}
.dvtv-db-cp-native:hover {
  background: #fff;
  border-color: #6366f1;
  box-shadow: 0 2px 8px rgba(99,102,241,0.2);
}
input[type="color"].dvtv-db-cp-input {
  width: 30px; height: 26px;
  border: 1px solid rgba(15,23,42,0.15);
  border-radius: 6px;
  background: none;
  padding: 0;
  cursor: pointer;
  flex: 0 0 auto;
}
input[type="color"].dvtv-db-cp-input::-webkit-color-swatch-wrapper { padding: 2px; }
input[type="color"].dvtv-db-cp-input::-webkit-color-swatch { border: none; border-radius: 4px; }

input.dvtv-db-input.dvtv-db-cp-hex {
  flex: 0 0 auto;
  width: 92px; height: 30px;
  font-size: 12.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: lowercase;
}

/* 選択中の色で「あA」を表示するプレビュー（明るい色は暗背景でも確認できるよう2つ並べる） */
.dvtv-db-cp-prev {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 0;
  font-size: 14px; font-weight: 700;
  color: #0f172a;
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid rgba(148,163,184,0.3);
}
.dvtv-db-cp-prev { background: #fff; padding: 0; }
.dvtv-db-cp-prev { line-height: 1; }
.dvtv-db-cp-prev > .dvtv-db-cp-prev-b { background: #1e293b; }
.dvtv-db-cp-prev, .dvtv-db-cp-prev .dvtv-db-cp-prev-b { padding: 6px 8px; }

/* --- 色見本（色相10列 × 濃淡3行） --- */
.dvtv-db-cp-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 4px;
}
/* --- 無彩色は別行（白〜黒） --- */
.dvtv-db-cp-grays {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  margin-top: 6px;
  padding-top: 7px;
  border-top: 1px dashed rgba(148,163,184,0.35);
}
.dvtv-db-cp-grays .dvtv-db-cp-sw { aspect-ratio: 2.2 / 1; }
.dvtv-db-cp-sw {
  aspect-ratio: 1 / 1;
  min-height: 22px;
  border: 1px solid rgba(15,23,42,0.2);
  border-radius: 5px;
  cursor: pointer;
  padding: 0;
  transition: transform 0.12s, box-shadow 0.12s;
}
.dvtv-db-cp-sw:hover {
  transform: scale(1.22);
  z-index: 2;
  box-shadow: 0 2px 8px rgba(15,23,42,0.28);
}
.dvtv-db-cp-sw.is-selected {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #6366f1;
  z-index: 3;
}

@media (max-width: 560px) {
  .dvtv-db-cp-grid  { grid-template-columns: repeat(5, 1fr); }
  .dvtv-db-cp-grays { grid-template-columns: repeat(6, 1fr); }
  input.dvtv-db-input.dvtv-db-cp-hex { width: 84px; }
}

/* 保存ボタンの処理中表示 */
#dvtv-db-modal-save.is-busy { opacity: 0.6; cursor: progress; }
#dvtv-db-modal-save[disabled] { pointer-events: none; }

/* ダークモード */
.dvtv-db-builder-wrap[data-theme="dark"] .dvtv-db-shape-opt,
.dvtv-db-builder-wrap.dvtv-dark .dvtv-db-shape-opt,
.dvtv-db-builder-wrap[data-theme="dark"] .dvtv-db-cp-def,
.dvtv-db-builder-wrap.dvtv-dark .dvtv-db-cp-def {
  background: rgba(51, 65, 85, 0.6) !important;
  color: #cbd5e1 !important;
}

/* v1.4.1: カードタイルに形状・サイズのバッジを表示 */
.dvtv-db-tile-meta {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; color: #64748b;
  background: rgba(148,163,184,0.14);
  border-radius: 999px;
  padding: 2px 8px 2px 5px;
  margin: 3px 0;
}
.dvtv-db-tile-meta .dvtv-db-shape-prev { width: 14px; height: 11px; }
.dvtv-db-tile-meta .dvtv-db-shape-prev-square,
.dvtv-db-tile-meta .dvtv-db-shape-prev-circle { width: 11px; height: 11px; }
.dvtv-db-tile-meta .dvtv-db-shape-prev-diamond { width: 9px; height: 9px; }
.dvtv-db-tile-meta .dvtv-db-shape-prev-hexagon { width: 11px; height: 12px; }
.dvtv-db-tile-meta .dvtv-db-shape-prev-pill { width: 16px; height: 8px; }

/* ===================================================================
 * v1.4.3: モーダル内のエラー表示（消えない）
 * 従来は 2.4 秒で消えるトーストのみだったため、保存失敗に気づけなかった
 * =================================================================== */
.dvtv-db-modal-error {
  display: none;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 11px 14px;
  background: linear-gradient(135deg, rgba(254,226,226,0.96) 0%, rgba(254,242,242,0.96) 100%);
  border-top: 1px solid rgba(239,68,68,0.3);
  border-bottom: 1px solid rgba(239,68,68,0.3);
  color: #991b1b;
  font-size: 12.5px;
  line-height: 1.5;
}
#dvtv-db-modal-error[style*="block"],
#dvtv-db-modal-error:not([style*="none"]) { display: flex; }
.dvtv-db-modal-error-msg { flex: 1; min-width: 0; }
.dvtv-db-modal-error-reload {
  flex: 0 0 auto;
  border: none;
  background: #dc2626;
  color: #fff;
  font-size: 11.5px; font-weight: 600;
  padding: 7px 12px;
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
}
.dvtv-db-modal-error-reload:hover { background: #b91c1c; }
.dvtv-db-modal-error-close {
  flex: 0 0 auto;
  border: none; background: none;
  color: #991b1b; opacity: 0.6;
  font-size: 17px; line-height: 1;
  cursor: pointer; padding: 2px 4px;
}
.dvtv-db-modal-error-close:hover { opacity: 1; }

/* v1.4.3: 画面上部の常設エラーバナー */
#dvtv-db-top-error {
  border-radius: 12px;
  margin-bottom: 12px;
  border: 1px solid rgba(239,68,68,0.35);
}


/* ===================================================================
 * v1.5.5 カラーピッカー統一 / 個別文字サイズ
 * =================================================================== */
.dvtv-db-builder-wrap .dvtv-db-color-custom {
  background: linear-gradient(145deg, rgba(255,255,255,.28), rgba(15,23,42,.16)), var(--dvtv-custom-color) !important;
  color: var(--dvtv-custom-contrast, #fff) !important;
  border-color: rgba(255,255,255,.42) !important;
}
.dvtv-db-builder-wrap .dvtv-db-color-custom svg { color: inherit !important; stroke: currentColor !important; }

.dvtv-db-cp { padding: 0; border: 0; background: transparent; }
.dvtv-db-cp-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.dvtv-db-cp-native {
  display:inline-flex; align-items:center; gap:7px; height:38px; padding:4px 10px 4px 5px;
  border:1px solid rgba(148,163,184,.36); border-radius:9px; background:rgba(255,255,255,.76);
  cursor:pointer; font-size:12px; font-weight:700; color:#334155;
}
input[type="color"].dvtv-db-cp-input { width:32px; height:28px; padding:0; border:0; background:transparent; cursor:pointer; }
input.dvtv-db-input.dvtv-db-cp-hex { width:104px; flex:0 0 104px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.dvtv-db-cp-preview { width:34px; height:34px; border-radius:9px; background:var(--dvtv-preview); border:2px solid rgba(255,255,255,.9); box-shadow:0 0 0 1px rgba(148,163,184,.38), 0 3px 10px rgba(15,23,42,.12); }
.dvtv-db-cp-def { height:34px; padding:0 10px; border:1px solid rgba(148,163,184,.34); border-radius:8px; background:rgba(248,250,252,.85); color:#475569; cursor:pointer; font-size:11px; font-weight:700; }
.dvtv-db-cp-def:hover { background:#fff; color:#1e293b; }

.dvtv-db-fontsize-ctl { display:flex; align-items:center; gap:7px; max-width:300px; }
.dvtv-db-fontsize-ctl .dvtv-db-fontsize-input { width:92px; flex:0 0 92px; }
.dvtv-db-fontsize-unit { font-size:12px; color:#64748b; font-weight:700; }
.dvtv-db-fontsize-auto { height:34px; padding:0 12px; border:1px solid rgba(99,102,241,.28); border-radius:8px; background:rgba(99,102,241,.08); color:#4f46e5; cursor:pointer; font-size:11px; font-weight:700; }
.dvtv-db-fontsize-auto:hover { background:rgba(99,102,241,.15); }

.dvtv-db-builder-wrap .dvtv-db-badge-custom {
  background: var(--dvtv-badge-color) !important;
  color: var(--dvtv-badge-contrast, #fff) !important;
  border-color: transparent !important;
}
.dvtv-db-builder-wrap[data-theme="dark"] .dvtv-db-cp-native,
.dvtv-db-builder-wrap[data-theme="dark"] .dvtv-db-cp-def { background:rgba(15,23,42,.72); color:#e2e8f0; }

.dvtv-db-name-color-tools { display:flex; align-items:center; gap:8px; margin-top:8px; }
.dvtv-db-name-color-status { font-size:11px; font-weight:700; color:#64748b; }


/* ===================================================================
 * v1.5.5: モーダルの保存ボタンがテーマ/サイトの固定フッターより下に潜る対策
 * - z-index を十分高くする
 * - フッターをモーダル内で sticky にし、常に押しやすくする
 * - 小さい画面ではモーダル全体をスクロール可能にする
 * =================================================================== */
.dvtv-db-modal {
  z-index: 2147483000;
  align-items: flex-start;
  overflow-y: auto;
  padding: 24px 20px 32px;
}
.dvtv-db-modal-backdrop { z-index: 0; }
.dvtv-db-modal-box {
  z-index: 1;
  margin: auto;
  overflow: visible;
}
.dvtv-db-modal-footer {
  position: sticky;
  bottom: 0;
  z-index: 4;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -8px 20px rgba(15,23,42,0.08);
}
@media (max-width: 640px) {
  .dvtv-db-modal { padding: 12px 10px 18px; }
  .dvtv-db-modal-box { max-height: calc(100vh - 24px); }
}

/* v1.5.5: ガラス系共通クラスをテーマ側より優先して安定化 */
.dvtv-db-builder-wrap .glass {
  background: rgba(255,255,255,0.50);
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65),
    0 10px 30px rgba(15,23,42,0.08);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
}


/* ===================================================================
 * v1.5.5: ビルダー側カードタイルのアイコンサイズ対応
 * =================================================================== */
.dvtv-db-builder-wrap .dvtv-db-card-bead {
  width: var(--db-card-bead-size, 34px);
  height: var(--db-card-bead-size, 34px);
  min-width: var(--db-card-bead-size, 34px);
  min-height: var(--db-card-bead-size, 34px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dvtv-db-builder-wrap .dvtv-db-card-bead-sm { --db-card-bead-size: 28px; }
.dvtv-db-builder-wrap .dvtv-db-card-bead-md { --db-card-bead-size: 34px; }
.dvtv-db-builder-wrap .dvtv-db-card-bead-lg { --db-card-bead-size: 42px; }
.dvtv-db-builder-wrap .dvtv-db-card-bead-xl { --db-card-bead-size: 48px; }


/* ===================================================================
 * v1.5.5: ビルダー側カードタイルも左上基準で確認しやすくする
 * =================================================================== */
.dvtv-db-card-tile-body {
  align-items: flex-start;
}
.dvtv-db-card-tile-body h4,
.dvtv-db-card-tile-body p,
.dvtv-db-card-tile-url {
  text-align: left;
  width: 100%;
}


/* ===================================================================
 * v1.5.5: カード表示テンプレート 1〜5
 * =================================================================== */
.dvtv-db-card-template-box {
  margin: 0 0 16px;
  padding: 14px;
  border: 1px solid rgba(99,102,241,.24);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(238,242,255,.86), rgba(250,245,255,.72));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}
.dvtv-db-card-template-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.dvtv-db-card-template-head > div { display:flex; flex-direction:column; gap:2px; }
.dvtv-db-card-template-head strong { font-size:13px; color:#312e81; }
.dvtv-db-card-template-head span { font-size:10.5px; color:#64748b; }
.dvtv-db-card-template-safe {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(16,185,129,.12);
  color: #047857 !important;
  font-weight: 800;
}
.dvtv-db-card-template-slots {
  display: grid;
  grid-template-columns: repeat(5, minmax(104px, 1fr));
  gap: 7px;
}
.dvtv-db-card-template-slot {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px;
  min-width: 0;
  border: 1px solid rgba(148,163,184,.28);
  border-radius: 10px;
  background: rgba(255,255,255,.65);
}
.dvtv-db-card-template-slot.is-saved {
  border-color: rgba(99,102,241,.38);
  background: rgba(255,255,255,.90);
}
.dvtv-db-template-apply {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 0;
  border-radius: 9px;
  background: linear-gradient(135deg,#6366f1,#8b5cf6);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(99,102,241,.22);
}
.dvtv-db-template-apply:disabled { background:#cbd5e1; box-shadow:none; cursor:not-allowed; }
.dvtv-db-template-slot-meta { min-width:0; flex:1; display:flex; flex-direction:column; gap:4px; }
.dvtv-db-template-status { font-size:9.5px; font-weight:800; color:#94a3b8; }
.is-saved .dvtv-db-template-status { color:#4f46e5; }
.dvtv-db-template-actions { display:flex; gap:3px; flex-wrap:wrap; }
.dvtv-db-template-actions button {
  border: 1px solid rgba(148,163,184,.30);
  background: rgba(248,250,252,.94);
  color:#475569;
  border-radius:6px;
  padding:3px 5px;
  font: 700 9px/1.2 inherit;
  cursor:pointer;
}
.dvtv-db-template-actions button:hover:not(:disabled) { background:#fff; color:#312e81; border-color:rgba(99,102,241,.4); }
.dvtv-db-template-actions button:disabled { opacity:.38; cursor:not-allowed; }
.dvtv-db-template-clear { color:#b91c1c !important; }
.dvtv-db-card-template-help { margin-top:8px; font-size:10px; line-height:1.45; color:#64748b; }
@media (max-width: 760px) {
  .dvtv-db-card-template-slots { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .dvtv-db-card-template-slot:last-child { grid-column: 1 / -1; }
}
@media (max-width: 430px) {
  .dvtv-db-card-template-slots { grid-template-columns: 1fr; }
  .dvtv-db-card-template-slot:last-child { grid-column: auto; }
  .dvtv-db-card-template-head { align-items:flex-start; }
}

/* v1.6.0 ショートコード画面設定 */
.dvtv-db-shortcode-input {
  min-height: 112px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.55;
}
.dvtv-db-card-shortcode-fields {
  margin: 8px 0 14px;
  padding: 8px 10px;
  border: 1px solid rgba(99,102,241,.18);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(238,242,255,.54), rgba(255,255,255,.52));
}
.dvtv-db-popup-settings {
  margin-top: 4px;
  border-top: 1px dashed rgba(99,102,241,.22);
  padding-top: 4px;
}
.dvtv-db-card-tile-shortcode {
  color: #4f46e5;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}


/* ===================================================================
 * v1.6.1 追加ボタン / 区切り作成ガイド
 * =================================================================== */
.dvtv-db-add-item-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap}
.dvtv-db-add-shortcode-btn{border-color:rgba(99,102,241,.34)!important;background:rgba(238,242,255,.8)!important;color:#4338ca!important}
.dvtv-db-add-divider-btn{border-color:rgba(14,165,233,.28)!important;background:rgba(240,249,255,.82)!important;color:#0369a1!important}
.dvtv-db-add-help{display:flex;gap:8px 18px;flex-wrap:wrap;margin:-2px 2px 10px;padding:8px 11px;border:1px solid rgba(148,163,184,.2);border-radius:11px;background:rgba(255,255,255,.46);font-size:11px;color:#64748b}
.dvtv-db-add-help strong{color:#334155;font-weight:800}
.dvtv-db-type-guide{margin:6px 0 14px;padding:11px 13px;border:1px solid rgba(99,102,241,.2);border-left:4px solid #6366f1;border-radius:10px;background:rgba(238,242,255,.62);font-size:12px;line-height:1.65;color:#475569}
.dvtv-db-type-guide strong{color:#312e81;font-size:13px}.dvtv-db-type-guide code{padding:1px 5px;border-radius:5px;background:rgba(255,255,255,.72);color:#4338ca}
.dvtv-db-type-guide[data-type="divider"]{border-color:rgba(14,165,233,.24);border-left-color:#0ea5e9;background:rgba(240,249,255,.72)}
.dvtv-db-type-guide[data-type="divider"] strong{color:#075985}
.dvtv-db-card-tile.is-divider-tile{grid-column:1/-1;border:1px dashed rgba(14,165,233,.42);background:linear-gradient(90deg,rgba(240,249,255,.76),rgba(255,255,255,.58));align-items:center}
.dvtv-db-card-tile.is-divider-tile .dvtv-db-card-tile-body h4{color:#075985}
.dvtv-db-card-tile.is-divider-tile .dvtv-db-card-tile-icon{opacity:.82}
.dvtv-db-card-tile.is-shortcode-tile{border-color:rgba(99,102,241,.25);box-shadow:inset 3px 0 0 rgba(99,102,241,.55)}
@media (max-width:900px){.dvtv-db-cards-panel-head{align-items:flex-start;gap:10px;flex-direction:column}.dvtv-db-add-item-actions{justify-content:flex-start}}


/* v1.6.2 区切り線：専用の簡単UI */
.dvtv-db-divider-simple-form{max-width:680px;margin:0 auto}
.dvtv-db-divider-simple-note{margin:0 0 16px;padding:12px 14px;border:1px solid rgba(59,130,246,.18);border-radius:12px;background:rgba(239,246,255,.68);color:#475569;line-height:1.65}
.dvtv-db-divider-simple-note strong{color:#1d4ed8}
.dvtv-db-divider-simple-preview{display:flex;align-items:center;gap:12px;margin:12px 0 4px;padding:12px 4px}
.dvtv-db-divider-simple-preview span{height:1px;flex:1;min-width:12px;background:linear-gradient(90deg,transparent,rgba(59,130,246,.55))}
.dvtv-db-divider-simple-preview span:last-child{background:linear-gradient(90deg,rgba(59,130,246,.55),transparent)}
/* v1.7.10: 区切り線の編集プレビューも完成版と同じラベル表示 */
.dvtv-db-divider-simple-preview strong {
  box-sizing: border-box;
  min-width: 0;
  max-width: calc(100% - 48px);
  padding: 5px 16px;
  border: 1px solid rgba(59,130,246,.32);
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(235,244,255,.94));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 2px 5px rgba(30,64,175,.05);
  color: #1e3a5f;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
}
.dvtv-db-divider-simple-preview.is-line-only{gap:0}
.dvtv-db-divider-simple-preview.is-line-only strong,.dvtv-db-divider-simple-preview.is-line-only span:last-child{display:none}
.dvtv-db-divider-simple-preview.is-line-only span:first-child{background:linear-gradient(90deg,transparent,rgba(59,130,246,.6),transparent)}
.dvtv-db-card-tile.is-divider-tile .dvtv-db-card-tile-icon{display:none}


/* ============================================================
 * v1.7.0 - visual builder workspace
 * ============================================================ */
.dvtv-db-builder-body{display:block!important;min-width:0}
.dvtv-db-dashboard-switcher{display:flex;align-items:center;gap:12px;padding:10px 12px;margin-bottom:12px;overflow:hidden}
.dvtv-db-dashboard-switcher .dvtv-db-sidebar-header{flex:0 0 auto;margin:0;padding:0 10px 0 2px;border:0}
.dvtv-db-dashboard-switcher .dvtv-db-sidebar-header h3{white-space:nowrap;margin:0}
.dvtv-db-dashboard-switcher .dvtv-db-dash-list{display:flex!important;gap:8px;overflow-x:auto;min-width:0;padding:2px;flex:1}
.dvtv-db-dashboard-switcher .dvtv-db-dash-item{flex:0 0 auto;min-width:160px;max-width:230px;padding:8px 10px;border:1px solid rgba(148,163,184,.25);border-radius:12px;background:rgba(255,255,255,.55)}
.dvtv-db-dashboard-switcher .dvtv-db-dash-item.is-active{border-color:rgba(99,102,241,.55);background:rgba(238,242,255,.82);box-shadow:0 0 0 2px rgba(99,102,241,.08)}
.dvtv-db-dashboard-switcher .dvtv-db-dash-item-slug{font-size:9px;opacity:.62}
.dvtv-db-main{min-width:0}

.dvtv-db-builder-workspace{display:grid;grid-template-columns:210px minmax(520px,1fr) 300px;gap:12px;align-items:start}
.dvtv-db-element-library,.dvtv-db-inspector{position:sticky;top:12px;padding:12px;max-height:calc(100vh - 24px);overflow:auto;border-radius:18px}
.dvtv-db-pane-title{display:flex;align-items:center;justify-content:space-between;padding:4px 2px 11px;margin-bottom:10px;border-bottom:1px solid rgba(148,163,184,.18)}
.dvtv-db-pane-title>div{display:flex;flex-direction:column;gap:2px}.dvtv-db-pane-title strong{font-size:14px;color:#1e1b4b}.dvtv-db-pane-title span{font-size:10px;color:#64748b}
.dvtv-db-library-section{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}.dvtv-db-library-label{font-size:10px;font-weight:800;letter-spacing:.08em;color:#64748b;text-transform:uppercase;padding:0 3px}
.dvtv-db-library-help{font-size:10px;line-height:1.45;color:#64748b;margin:0 3px 2px}
.dvtv-db-library-item{width:100%;display:flex;align-items:center;gap:9px;text-align:left;border:1px solid rgba(148,163,184,.24);background:rgba(255,255,255,.66);border-radius:12px;padding:9px;cursor:pointer;color:#334155;transition:.15s ease}
.dvtv-db-library-item:hover{transform:translateY(-1px);border-color:rgba(99,102,241,.42);background:rgba(255,255,255,.9);box-shadow:0 8px 24px rgba(99,102,241,.08)}
.dvtv-db-library-item.is-primary{border-color:rgba(99,102,241,.35);background:linear-gradient(135deg,rgba(238,242,255,.92),rgba(255,255,255,.72))}
.dvtv-db-library-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:rgba(99,102,241,.1);color:#4f46e5;flex:0 0 auto}
.dvtv-db-library-item span:last-child{display:flex;flex-direction:column;gap:1px;min-width:0}.dvtv-db-library-item strong{font-size:11.5px}.dvtv-db-library-item small{font-size:9.5px;color:#64748b}

.dvtv-db-layout-preset{display:grid;grid-template-columns:56px 1fr;align-items:center;gap:8px;padding:7px;border-radius:10px;border:1px solid rgba(148,163,184,.22);background:rgba(255,255,255,.54);cursor:pointer;text-align:left;color:#334155}
.dvtv-db-layout-preset:hover{border-color:rgba(99,102,241,.38);background:#fff}.dvtv-db-layout-preset.is-busy{opacity:.5;pointer-events:none}.dvtv-db-layout-preset strong{font-size:10.5px}
.dvtv-db-layout-mini{display:grid;gap:2px;height:32px;padding:3px;border:1px solid rgba(99,102,241,.2);border-radius:6px;background:rgba(248,250,252,.9)}
.dvtv-db-layout-mini.cols-2{grid-template-columns:repeat(2,1fr)}.dvtv-db-layout-mini.cols-3{grid-template-columns:repeat(3,1fr)}.dvtv-db-layout-mini.cols-4{grid-template-columns:repeat(4,1fr)}
.dvtv-db-layout-mini i{display:block;border-radius:2px;background:rgba(99,102,241,.24)}.dvtv-db-layout-mini.is-line i{background:transparent;border:1px solid rgba(99,102,241,.3)}

.dvtv-db-builder-stage{min-width:0}.dvtv-db-canvas-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border-radius:15px;margin-bottom:8px}
.dvtv-db-canvas-toolbar .dvtv-db-tabs-editor-head>div{display:flex;flex-direction:column;gap:1px}.dvtv-db-canvas-toolbar strong{font-size:12px;color:#312e81}.dvtv-db-canvas-toolbar span{font-size:9.5px;color:#64748b}
.dvtv-db-device-switch{display:flex;gap:3px;padding:3px;border-radius:10px;background:rgba(226,232,240,.6)}.dvtv-db-device-btn{display:flex;align-items:center;gap:4px;border:0;background:transparent;border-radius:8px;padding:6px 8px;font-size:9.5px;color:#64748b;cursor:pointer}.dvtv-db-device-btn.is-active{background:#fff;color:#4338ca;box-shadow:0 2px 8px rgba(15,23,42,.08)}
.dvtv-db-tabs-editor{padding:8px 10px!important;border-radius:14px!important;margin-bottom:8px!important}.dvtv-db-tabs-row{gap:5px!important}.dvtv-db-tab-chip{padding:6px 7px!important;border-radius:9px!important;font-size:10.5px!important}
.dvtv-db-tab-shift{display:none!important}

.dvtv-db-canvas-viewport{overflow:auto;border-radius:18px;padding:10px;background:linear-gradient(145deg,rgba(226,232,240,.55),rgba(199,210,254,.34));border:1px solid rgba(148,163,184,.18);min-height:570px}
.dvtv-db-canvas-frame{width:100%;min-height:540px;margin:0 auto;padding:18px;border-radius:16px;background:linear-gradient(150deg,rgba(255,255,255,.78),rgba(241,245,249,.7));box-shadow:0 12px 40px rgba(15,23,42,.08);transition:max-width .22s ease,width .22s ease}
.dvtv-db-canvas-frame[data-device="tablet"]{max-width:820px}.dvtv-db-canvas-frame[data-device="mobile"]{max-width:390px;padding:12px}
.dvtv-db-canvas-dashboard-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;padding:4px 3px 14px;margin-bottom:12px;border-bottom:1px solid rgba(148,163,184,.16)}
.dvtv-db-canvas-dashboard-head h3{font-size:20px;margin:2px 0 4px;color:#0f172a}.dvtv-db-canvas-dashboard-head p{margin:0;font-size:11px;color:#64748b}.dvtv-db-canvas-kicker{font-size:8px;font-weight:900;letter-spacing:.16em;color:#6366f1}.dvtv-db-canvas-view-note{font-size:9px;color:#64748b;background:rgba(255,255,255,.7);padding:5px 7px;border-radius:999px;white-space:nowrap}
.dvtv-db-cards-editor{margin:0!important}.dvtv-db-cards-panel-head{margin:0 0 9px!important;padding:0 2px!important}.dvtv-db-cards-panel-head h3{font-size:11px!important}.dvtv-db-cards-panel-head small{font-size:9px;color:#94a3b8}
.dvtv-db-cards-grid{display:grid!important;gap:10px!important;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))!important}
.dvtv-db-grid-cols-2 .dvtv-db-cards-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.dvtv-db-grid-cols-3 .dvtv-db-cards-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}.dvtv-db-grid-cols-4 .dvtv-db-cards-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}.dvtv-db-grid-cols-5 .dvtv-db-cards-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important}
.dvtv-db-canvas-frame[data-device="tablet"] .dvtv-db-cards-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.dvtv-db-canvas-frame[data-device="mobile"] .dvtv-db-cards-grid{grid-template-columns:1fr!important}

.dvtv-db-card-tile.dvtv-db-canvas-item{position:relative;display:block!important;min-width:0;min-height:112px;padding:14px!important;border:1px solid rgba(255,255,255,.75)!important;border-radius:16px!important;background:rgba(255,255,255,.56)!important;box-shadow:0 8px 24px rgba(15,23,42,.06),inset 0 1px 0 rgba(255,255,255,.68)!important;cursor:pointer;overflow:visible;transition:.15s ease;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.dvtv-db-card-tile.dvtv-db-canvas-item:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(15,23,42,.1)!important}.dvtv-db-card-tile.dvtv-db-canvas-item.is-selected{outline:2px solid rgba(99,102,241,.75);outline-offset:2px;box-shadow:0 10px 32px rgba(79,70,229,.14)!important}
.dvtv-db-card-tile.dvtv-db-style-soft{background:rgba(255,255,255,.38)!important}.dvtv-db-card-tile.dvtv-db-style-strong{background:rgba(255,255,255,.86)!important;border-color:rgba(99,102,241,.24)!important}.dvtv-db-card-tile.dvtv-db-style-accent{box-shadow:inset 4px 0 0 var(--dvtv-custom-color,#6366f1),0 8px 24px rgba(15,23,42,.06)!important}.dvtv-db-card-tile.dvtv-db-style-minimal{background:transparent!important;box-shadow:none!important;border-color:rgba(148,163,184,.3)!important}.dvtv-db-card-tile.dvtv-db-style-compact{min-height:78px;padding:10px!important}
.dvtv-db-card-tile.dvtv-db-size-large{grid-column:span 2}.dvtv-db-card-tile.dvtv-db-size-featured{grid-column:span 2;min-height:190px}.dvtv-db-card-tile.dvtv-db-size-small{min-height:72px;padding:9px!important}
.dvtv-db-canvas-card-content{display:flex;align-items:flex-start;gap:10px;min-width:0}.dvtv-db-card-tile-icon{flex:0 0 auto}.dvtv-db-card-tile-body{min-width:0!important;flex:1}.dvtv-db-canvas-card-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:6px}.dvtv-db-card-tile-body h4{font-size:13px!important;line-height:1.25!important;margin:1px 0 5px!important;color:#0f172a!important}.dvtv-db-card-tile-body p{font-size:10px!important;line-height:1.45!important;margin:0 0 6px!important;color:#64748b!important}.dvtv-db-card-tile-url{font-size:8.5px!important;opacity:.72;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dvtv-db-type-pill{font-size:7px!important;font-weight:900;letter-spacing:.06em;color:#4f46e5!important;background:rgba(99,102,241,.1);padding:3px 5px;border-radius:999px;flex:0 0 auto}.dvtv-db-canvas-badge{display:inline-block;margin-top:6px;font-size:8px;font-weight:800;padding:3px 6px;border-radius:999px;background:rgba(34,197,94,.12);color:#166534}
.dvtv-db-canvas-item-toolbar{position:absolute;z-index:6;right:7px;top:-14px;display:flex;align-items:center;gap:2px;padding:3px;border-radius:9px;background:rgba(15,23,42,.88);box-shadow:0 5px 16px rgba(15,23,42,.22);opacity:0;transform:translateY(3px);pointer-events:none;transition:.12s ease}.dvtv-db-card-tile:hover .dvtv-db-canvas-item-toolbar,.dvtv-db-card-tile.is-selected .dvtv-db-canvas-item-toolbar{opacity:1;transform:none;pointer-events:auto}.dvtv-db-canvas-item-toolbar .dvtv-db-btn-icon,.dvtv-db-canvas-item-toolbar .dvtv-db-card-tile-drag{width:24px!important;height:24px!important;min-width:24px!important;display:grid!important;place-items:center;color:#e2e8f0!important;background:transparent!important;border:0!important;border-radius:6px!important;cursor:pointer;padding:0!important}.dvtv-db-canvas-item-toolbar .dvtv-db-btn-icon:hover,.dvtv-db-canvas-item-toolbar .dvtv-db-card-tile-drag:hover{background:rgba(255,255,255,.12)!important}.dvtv-db-canvas-item-toolbar .dvtv-db-btn-icon:disabled{opacity:.25}
.dvtv-db-divider-canvas{display:flex;align-items:center;gap:10px;min-height:38px}.dvtv-db-divider-canvas span{height:1px;flex:1;background:linear-gradient(90deg,transparent,rgba(99,102,241,.45),transparent)}.dvtv-db-divider-canvas strong{font-size:10px;color:#475569;white-space:nowrap}.dvtv-db-card-tile.is-divider-tile{grid-column:1/-1!important;min-height:50px!important;padding:6px 12px!important;background:transparent!important;border:1px dashed rgba(99,102,241,.24)!important;box-shadow:none!important}.dvtv-db-card-tile.is-divider-tile .dvtv-db-hidden-badge{top:5px}
.dvtv-db-canvas-empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:140px;border:1px dashed rgba(99,102,241,.35);background:rgba(255,255,255,.36);border-radius:14px;color:#6366f1;cursor:pointer}.dvtv-db-canvas-empty strong{font-size:11px}.dvtv-db-canvas-empty span{font-size:9px;color:#94a3b8}

.dvtv-db-inspector-content{min-height:260px}.dvtv-db-inspector-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px;padding:34px 10px;color:#94a3b8}.dvtv-db-inspector-empty strong{font-size:12px;color:#475569}.dvtv-db-inspector-empty span{font-size:10px;line-height:1.5}.dvtv-db-inspector-loading,.dvtv-db-inspector-error{padding:18px;font-size:11px;color:#64748b}.dvtv-db-inspector-error{color:#b91c1c}
.dvtv-db-inspector-kind{display:inline-flex;align-items:center;padding:4px 7px;border-radius:999px;background:rgba(99,102,241,.1);color:#4f46e5;font-size:9px;font-weight:900;margin-bottom:9px}.dvtv-db-inspector-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:3px;background:rgba(226,232,240,.58);border-radius:9px;margin-bottom:10px}.dvtv-db-inspector-tabs button{border:0;background:transparent;border-radius:7px;padding:6px 2px;font-size:9.5px;color:#64748b;cursor:pointer}.dvtv-db-inspector-tabs button.is-active{background:#fff;color:#4338ca;font-weight:800;box-shadow:0 2px 7px rgba(15,23,42,.06)}.dvtv-db-inspector-panel{display:none}.dvtv-db-inspector-panel.is-active{display:block}.dvtv-db-inspector-field{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}.dvtv-db-inspector-field>span{font-size:9.5px;font-weight:800;color:#475569}.dvtv-db-inspector-field input[type="text"],.dvtv-db-inspector-field textarea,.dvtv-db-inspector-select{width:100%;box-sizing:border-box;border:1px solid rgba(148,163,184,.34);border-radius:9px;background:rgba(255,255,255,.75);padding:8px;font:inherit;font-size:10.5px;color:#0f172a;outline:none}.dvtv-db-inspector-field textarea{resize:vertical}.dvtv-db-inspector-field input:focus,.dvtv-db-inspector-field textarea:focus,.dvtv-db-inspector-select:focus{border-color:#818cf8;box-shadow:0 0 0 2px rgba(99,102,241,.1)}.dvtv-db-inspector-field input[type="color"]{width:100%;height:34px;border:1px solid rgba(148,163,184,.3);border-radius:9px;background:#fff;padding:3px}.dvtv-db-inspector-field small{font-size:8.5px;color:#94a3b8}.dvtv-db-inspector-check{display:flex;align-items:center;gap:6px;font-size:10px;color:#475569;margin:7px 0}.dvtv-db-inspector-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:14px;padding-top:10px;border-top:1px solid rgba(148,163,184,.18)}.dvtv-db-inspector-actions button{justify-content:center!important;font-size:10px!important;padding:8px!important}

@media(max-width:1280px){.dvtv-db-builder-workspace{grid-template-columns:190px minmax(460px,1fr) 270px}.dvtv-db-grid-cols-4 .dvtv-db-cards-grid,.dvtv-db-grid-cols-5 .dvtv-db-cards-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(max-width:1050px){.dvtv-db-builder-workspace{grid-template-columns:180px minmax(0,1fr)}.dvtv-db-inspector{position:relative;top:auto;grid-column:1/-1;max-height:none}.dvtv-db-inspector-content{min-height:0}.dvtv-db-grid-cols-3 .dvtv-db-cards-grid,.dvtv-db-grid-cols-4 .dvtv-db-cards-grid,.dvtv-db-grid-cols-5 .dvtv-db-cards-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:760px){.dvtv-db-builder-workspace{display:block}.dvtv-db-element-library,.dvtv-db-inspector{position:relative;top:auto;max-height:none;margin-bottom:10px}.dvtv-db-library-section{display:grid;grid-template-columns:1fr 1fr}.dvtv-db-library-label,.dvtv-db-library-help{grid-column:1/-1}.dvtv-db-layout-presets{display:none}.dvtv-db-canvas-frame{padding:10px}.dvtv-db-cards-grid{grid-template-columns:1fr!important}.dvtv-db-card-tile.dvtv-db-size-large,.dvtv-db-card-tile.dvtv-db-size-featured{grid-column:auto}.dvtv-db-editor-bar{align-items:flex-start;flex-direction:column}.dvtv-db-editor-bar-right{width:100%;flex-wrap:wrap}}

/* v1.7 preview shape cues */
.dvtv-db-card-tile.dvtv-db-style-accent{box-shadow:inset 4px 0 0 var(--dvtv-card-accent,#6366f1),0 8px 24px rgba(15,23,42,.06)!important}
.dvtv-db-card-tile.dvtv-db-shape-pill{border-radius:999px!important;padding-left:18px!important;padding-right:18px!important}
.dvtv-db-card-tile.dvtv-db-shape-square{aspect-ratio:1/1;min-height:0!important;display:flex!important;align-items:center}
.dvtv-db-card-tile.dvtv-db-shape-circle{aspect-ratio:1/1;min-height:0!important;border-radius:50%!important;display:flex!important;align-items:center;justify-content:center;text-align:center}
.dvtv-db-card-tile.dvtv-db-shape-circle .dvtv-db-canvas-card-content{flex-direction:column;align-items:center}.dvtv-db-card-tile.dvtv-db-shape-circle .dvtv-db-card-tile-url{display:none}
.dvtv-db-card-tile.dvtv-db-shape-outline{background:transparent!important;border:1.5px solid rgba(99,102,241,.42)!important;box-shadow:none!important}
.dvtv-db-card-tile.dvtv-db-shape-ribbon{border-left:6px solid var(--dvtv-card-accent,#6366f1)!important}
.dvtv-db-card-tile.dvtv-db-shape-diamond{border-radius:22px 5px 22px 5px!important}.dvtv-db-card-tile.dvtv-db-shape-hexagon{border-radius:26px 10px 26px 10px!important}


/* v1.7 shortcode quick-create */
.dvtv-db-shortcode-quick-hero{display:flex;flex-direction:column;gap:3px;padding:12px 14px;margin-bottom:12px;border-radius:13px;background:linear-gradient(135deg,rgba(238,242,255,.9),rgba(255,255,255,.72));border:1px solid rgba(99,102,241,.2)}
.dvtv-db-shortcode-quick-hero strong{font-size:14px;color:#312e81}.dvtv-db-shortcode-quick-hero span{font-size:10.5px;color:#64748b}
.dvtv-db-shortcode-mode-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:10px 0 12px}.dvtv-db-shortcode-mode-cards label{cursor:pointer;position:relative}.dvtv-db-shortcode-mode-cards input{position:absolute;opacity:0;pointer-events:none}.dvtv-db-shortcode-mode-cards span{display:flex;flex-direction:column;gap:3px;min-height:56px;padding:10px;border-radius:11px;border:1px solid rgba(148,163,184,.3);background:rgba(255,255,255,.62)}.dvtv-db-shortcode-mode-cards strong{font-size:11px;color:#334155}.dvtv-db-shortcode-mode-cards small{font-size:9px;color:#64748b}.dvtv-db-shortcode-mode-cards input:checked+span{border-color:#6366f1;background:rgba(238,242,255,.9);box-shadow:0 0 0 2px rgba(99,102,241,.08)}
.dvtv-db-q-two{display:grid;grid-template-columns:1fr 1fr;gap:7px}
@media(max-width:640px){.dvtv-db-shortcode-mode-cards{grid-template-columns:1fr}.dvtv-db-q-two{grid-template-columns:1fr}}


/* ============================================================
 * v1.7.2 - dashboard switcher: compact full-width grid
 * ============================================================ */
.dvtv-db-builder-wrap .dvtv-db-dashboard-switcher {
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-items: stretch !important;
  gap: 10px !important;
  padding: 14px 16px !important;
  margin: 0 0 12px !important;
  overflow: visible !important;
}

.dvtv-db-builder-wrap .dvtv-db-dashboard-switcher .dvtv-db-sidebar-header {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 0 9px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(148,163,184,.18) !important;
  box-sizing: border-box !important;
}

.dvtv-db-builder-wrap .dvtv-db-dashboard-switcher .dvtv-db-sidebar-header h3 {
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
  color: #334155 !important;
  white-space: nowrap !important;
}

.dvtv-db-builder-wrap .dvtv-db-dashboard-switcher .dvtv-db-sidebar-header .chip {
  flex: 0 0 auto !important;
}

.dvtv-db-builder-wrap .dvtv-db-dashboard-switcher .dvtv-db-dash-list {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

.dvtv-db-builder-wrap .dvtv-db-dashboard-switcher .dvtv-db-dash-item {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 62px !important;
  padding: 10px 12px !important;
  margin: 0 !important;
  border: 1px solid rgba(148,163,184,.24) !important;
  border-radius: 14px !important;
  background: linear-gradient(145deg,rgba(255,255,255,.76),rgba(248,250,252,.56)) !important;
  box-shadow: 0 4px 14px rgba(15,23,42,.045), inset 0 1px 0 rgba(255,255,255,.78) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  transform: none !important;
  box-sizing: border-box !important;
}

.dvtv-db-builder-wrap .dvtv-db-dashboard-switcher .dvtv-db-dash-item:hover {
  border-color: rgba(99,102,241,.42) !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 8px 22px rgba(79,70,229,.10) !important;
  transform: translateY(-1px) !important;
}

.dvtv-db-builder-wrap .dvtv-db-dashboard-switcher .dvtv-db-dash-item.is-active {
  border-color: rgba(99,102,241,.62) !important;
  background: linear-gradient(135deg,rgba(238,242,255,.98),rgba(245,243,255,.90)) !important;
  box-shadow: inset 4px 0 0 #6d5dfc, 0 7px 20px rgba(99,102,241,.13) !important;
}

.dvtv-db-builder-wrap .dvtv-db-dashboard-switcher .dvtv-db-dash-item.is-active::after {
  content: '編集中';
  position: absolute;
  top: 7px;
  right: 8px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(109,93,252,.11);
  color: #5947e8;
  font-size: 8px;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: .03em;
}

.dvtv-db-builder-wrap .dvtv-db-dashboard-switcher .dvtv-db-dash-item.is-active .dvtv-db-dash-item-text {
  padding-right: 40px !important;
}

.dvtv-db-builder-wrap .dvtv-db-dashboard-switcher .dvtv-db-dash-item-title {
  display: block !important;
  font-size: 12.5px !important;
  line-height: 1.25 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.dvtv-db-builder-wrap .dvtv-db-dashboard-switcher .dvtv-db-dash-item-slug {
  display: block !important;
  margin-top: 2px !important;
  font-size: 9px !important;
  opacity: .58 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (max-width: 1200px) {
  .dvtv-db-builder-wrap .dvtv-db-dashboard-switcher .dvtv-db-dash-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 700px) {
  .dvtv-db-builder-wrap .dvtv-db-dashboard-switcher {
    padding: 12px !important;
  }
  .dvtv-db-builder-wrap .dvtv-db-dashboard-switcher .dvtv-db-dash-list {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
 * v1.7.3 - WYSIWYG live canvas
 * 完成版と同じ display.css / render_card() を使用し、PCは1600pxを縮小表示。
 * ============================================================ */
.dvtv-db-canvas-viewport {
  position: relative;
  overflow: auto;
}
.dvtv-db-canvas-scale-box {
  position: relative;
  margin: 0 auto;
  min-height: 1px;
}
.dvtv-db-canvas-frame {
  width: 1600px !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 16px;
  transform-origin: top left;
  transition: transform .18s ease;
  background: transparent !important;
  box-shadow: none !important;
}
.dvtv-db-canvas-frame[data-device="tablet"] { width: 820px !important; max-width: none !important; }
.dvtv-db-canvas-frame[data-device="mobile"] { width: 390px !important; max-width: none !important; }

/* display.css の viewport breakout をビルダー内部では無効化 */
.dvtv-db-builder-live-render.dvtv-db-wrap.pine-root {
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 20px !important;
  overflow: visible !important;
  border-radius: 16px;
  background: linear-gradient(150deg,rgba(255,255,255,.78),rgba(241,245,249,.72));
  box-shadow: 0 12px 40px rgba(15,23,42,.08);
}
.dvtv-db-builder-live-render .dvtv-db-container {
  width: 100% !important;
  max-width: 1600px !important;
  margin: 0 auto !important;
  gap: 12px !important;
}
.dvtv-db-builder-live-render .dvtv-db-canvas-dashboard-head {
  margin: 0 0 12px !important;
}

/* 公開側と同じグリッド規則をビルダーでも固定的に再現 */
.dvtv-db-builder-live-render .dvtv-db-cards-grid.dvtv-db-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill,minmax(240px,1fr)) !important;
  gap: 10px !important;
  align-items: start !important;
  justify-items: stretch !important;
  grid-auto-flow: row dense !important;
}
.dvtv-db-builder-live-render .dvtv-db-cards-grid.dvtv-db-grid-sectioned {
  grid-auto-flow: row !important;
}
.dvtv-db-builder-live-render .dvtv-db-cards-grid.dvtv-db-grid.grid-cols-2 { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
.dvtv-db-builder-live-render .dvtv-db-cards-grid.dvtv-db-grid.grid-cols-3 { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
.dvtv-db-builder-live-render .dvtv-db-cards-grid.dvtv-db-grid.grid-cols-4 { grid-template-columns: repeat(4,minmax(0,1fr)) !important; }
.dvtv-db-builder-live-render .dvtv-db-cards-grid.dvtv-db-grid.grid-cols-5 { grid-template-columns: repeat(5,minmax(0,1fr)) !important; }
.dvtv-db-canvas-frame[data-device="tablet"] .dvtv-db-cards-grid.grid-cols-4,
.dvtv-db-canvas-frame[data-device="tablet"] .dvtv-db-cards-grid.grid-cols-5 { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
.dvtv-db-canvas-frame[data-device="mobile"] .dvtv-db-cards-grid.dvtv-db-grid,
.dvtv-db-canvas-frame[data-device="mobile"] .dvtv-db-cards-grid.grid-cols-2,
.dvtv-db-canvas-frame[data-device="mobile"] .dvtv-db-cards-grid.grid-cols-3,
.dvtv-db-canvas-frame[data-device="mobile"] .dvtv-db-cards-grid.grid-cols-4,
.dvtv-db-canvas-frame[data-device="mobile"] .dvtv-db-cards-grid.grid-cols-5 { grid-template-columns: 1fr !important; }

/* 編集用の外枠は見た目を持たず、中身の公開カードをそのまま見せる */
.dvtv-db-builder-live-render .dvtv-db-card-tile.dvtv-db-canvas-item {
  position: relative !important;
  display: block !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible !important;
  cursor: pointer;
  transform: none !important;
}
.dvtv-db-builder-live-render .dvtv-db-card-tile.dvtv-db-size-large,
.dvtv-db-builder-live-render .dvtv-db-card-tile.dvtv-db-size-featured {
  grid-column: span 2;
}
.dvtv-db-builder-live-render .dvtv-db-card-tile.dvtv-db-size-featured { grid-row: span 2; }
.dvtv-db-builder-live-render .dvtv-db-card-tile.dvtv-db-size-large.dvtv-db-shape-square,
.dvtv-db-builder-live-render .dvtv-db-card-tile.dvtv-db-size-featured.dvtv-db-shape-square,
.dvtv-db-builder-live-render .dvtv-db-card-tile.dvtv-db-size-large.dvtv-db-shape-circle,
.dvtv-db-builder-live-render .dvtv-db-card-tile.dvtv-db-size-featured.dvtv-db-shape-circle,
.dvtv-db-builder-live-render .dvtv-db-card-tile.dvtv-db-size-large.dvtv-db-shape-hexagon,
.dvtv-db-builder-live-render .dvtv-db-card-tile.dvtv-db-size-featured.dvtv-db-shape-hexagon,
.dvtv-db-builder-live-render .dvtv-db-card-tile.dvtv-db-size-large.dvtv-db-shape-diamond,
.dvtv-db-builder-live-render .dvtv-db-card-tile.dvtv-db-size-featured.dvtv-db-shape-diamond {
  grid-column: span 1 !important;
  grid-row: auto !important;
}
.dvtv-db-builder-live-render .dvtv-db-card-tile.is-divider-tile {
  grid-column: 1 / -1 !important;
}
.dvtv-db-live-card-render { width: 100%; min-width: 0; }
.dvtv-db-live-card-render > .dvtv-db-card,
.dvtv-db-live-card-render > .dvtv-db-divider {
  pointer-events: none;
}
.dvtv-db-builder-live-render .dvtv-db-card-tile.is-hidden-card .dvtv-db-live-card-render { opacity: .35; }
.dvtv-db-builder-live-render .dvtv-db-card-tile.is-selected::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 2px solid rgba(99,102,241,.78);
  border-radius: 18px;
  pointer-events: none;
  box-shadow: 0 0 0 3px rgba(99,102,241,.08);
}
.dvtv-db-live-type-badge {
  position: absolute;
  left: 8px;
  top: -8px;
  z-index: 7;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(67,56,202,.9);
  color: #fff;
  font-size: 8px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .05em;
  pointer-events: none;
}

/* 旧の編集カード専用疑似デザインをライブレンダー内では完全に無効化 */
.dvtv-db-builder-live-render .dvtv-db-card-tile.dvtv-db-shape-pill,
.dvtv-db-builder-live-render .dvtv-db-card-tile.dvtv-db-shape-square,
.dvtv-db-builder-live-render .dvtv-db-card-tile.dvtv-db-shape-circle,
.dvtv-db-builder-live-render .dvtv-db-card-tile.dvtv-db-shape-outline,
.dvtv-db-builder-live-render .dvtv-db-card-tile.dvtv-db-shape-ribbon,
.dvtv-db-builder-live-render .dvtv-db-card-tile.dvtv-db-shape-diamond,
.dvtv-db-builder-live-render .dvtv-db-card-tile.dvtv-db-shape-hexagon {
  aspect-ratio: auto !important;
  border-radius: 0 !important;
  padding: 0 !important;
}


/* ============================================================
 * v1.7.4 - 完成版と同じ「奇数列 + 2列spanカード」の中央寄せ
 * ビルダーはカードを編集用 tile で包むため tile の size/shape を判定する。
 * ============================================================ */
.dvtv-db-canvas-frame[data-device="desktop"] .dvtv-db-builder-live-render .dvtv-db-cards-grid.grid-cols-5:has(> .dvtv-db-size-large, > .dvtv-db-size-featured):not(:has(
  > .dvtv-db-size-small,
  > .dvtv-db-size-normal,
  > .dvtv-db-size-large.dvtv-db-shape-square,
  > .dvtv-db-size-large.dvtv-db-shape-circle,
  > .dvtv-db-size-large.dvtv-db-shape-hexagon,
  > .dvtv-db-size-large.dvtv-db-shape-diamond,
  > .dvtv-db-size-featured.dvtv-db-shape-square,
  > .dvtv-db-size-featured.dvtv-db-shape-circle,
  > .dvtv-db-size-featured.dvtv-db-shape-hexagon,
  > .dvtv-db-size-featured.dvtv-db-shape-diamond
)) {
  width: calc(80% - 2px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
}
.dvtv-db-canvas-frame[data-device="desktop"] .dvtv-db-builder-live-render .dvtv-db-cards-grid.grid-cols-3:has(> .dvtv-db-size-large, > .dvtv-db-size-featured):not(:has(
  > .dvtv-db-size-small,
  > .dvtv-db-size-normal,
  > .dvtv-db-size-large.dvtv-db-shape-square,
  > .dvtv-db-size-large.dvtv-db-shape-circle,
  > .dvtv-db-size-large.dvtv-db-shape-hexagon,
  > .dvtv-db-size-large.dvtv-db-shape-diamond,
  > .dvtv-db-size-featured.dvtv-db-shape-square,
  > .dvtv-db-size-featured.dvtv-db-shape-circle,
  > .dvtv-db-size-featured.dvtv-db-shape-hexagon,
  > .dvtv-db-size-featured.dvtv-db-shape-diamond
)) {
  width: calc(66.666667% - 3.333px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
}
.dvtv-db-canvas-frame[data-device="tablet"] .dvtv-db-builder-live-render .dvtv-db-cards-grid.grid-cols-3:has(> .dvtv-db-size-large, > .dvtv-db-size-featured):not(:has(> .dvtv-db-size-small, > .dvtv-db-size-normal)),
.dvtv-db-canvas-frame[data-device="tablet"] .dvtv-db-builder-live-render .dvtv-db-cards-grid.grid-cols-4:has(> .dvtv-db-size-large, > .dvtv-db-size-featured):not(:has(> .dvtv-db-size-small, > .dvtv-db-size-normal)),
.dvtv-db-canvas-frame[data-device="tablet"] .dvtv-db-builder-live-render .dvtv-db-cards-grid.grid-cols-5:has(> .dvtv-db-size-large, > .dvtv-db-size-featured):not(:has(> .dvtv-db-size-small, > .dvtv-db-size-normal)) {
  width: calc(66.666667% - 3.333px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
}


/* v1.7.5: 完成版と同じPHP判定クラスをビルダーにも適用 */
.dvtv-db-canvas-frame[data-device="desktop"] .dvtv-db-cards-grid.grid-cols-5.dvtv-db-odd-wide-center {
  width: calc(80% - 2px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.dvtv-db-canvas-frame[data-device="desktop"] .dvtv-db-cards-grid.grid-cols-3.dvtv-db-odd-wide-center {
  width: calc(66.666667% - 3.333px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.dvtv-db-canvas-frame[data-device="tablet"] .dvtv-db-cards-grid.dvtv-db-odd-wide-center {
  width: calc(66.666667% - 3.333px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* ============================================================
 * v1.7.6 - 完成版と同一の実用カード幅システム（ビルダー側）
 * ============================================================ */
.dvtv-db-builder-live-render .dvtv-db-cards-grid.dvtv-db-grid.dvtv-db-grid-capped {
  width: 100% !important;
  max-width: var(--dvtv-grid-max, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  justify-content: center !important;
}
.dvtv-db-builder-live-render .dvtv-db-cards-grid.dvtv-db-grid.dvtv-db-grid-capped:not(.grid-cols-2):not(.grid-cols-3):not(.grid-cols-4):not(.grid-cols-5) {
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), var(--dvtv-card-max, 380px))) !important;
}
@media (min-width: 1025px) {
  .dvtv-db-builder-live-render .dvtv-db-cards-grid.dvtv-db-grid.dvtv-db-grid-capped.grid-cols-2 { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .dvtv-db-builder-live-render .dvtv-db-cards-grid.dvtv-db-grid.dvtv-db-grid-capped.grid-cols-3 { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
  .dvtv-db-builder-live-render .dvtv-db-cards-grid.dvtv-db-grid.dvtv-db-grid-capped.grid-cols-4 { grid-template-columns: repeat(4,minmax(0,1fr)) !important; }
  .dvtv-db-builder-live-render .dvtv-db-cards-grid.dvtv-db-grid.dvtv-db-grid-capped.grid-cols-5 { grid-template-columns: repeat(5,minmax(0,1fr)) !important; }
}
.dvtv-db-builder-live-render .dvtv-db-card-tile.dvtv-db-width-1 { grid-column: span 1 !important; }
.dvtv-db-builder-live-render .dvtv-db-card-tile.dvtv-db-width-2 { grid-column: span 2 !important; }
.dvtv-db-builder-live-render .dvtv-db-card-tile.dvtv-db-width-3 { grid-column: span 3 !important; }
.dvtv-db-builder-live-render .dvtv-db-card-tile.dvtv-db-width-full { grid-column: 1 / -1 !important; }
.dvtv-db-builder-live-render .dvtv-db-cards-grid.grid-cols-2 > .dvtv-db-card-tile.dvtv-db-width-3 { grid-column: span 2 !important; }
.dvtv-db-builder-live-render .dvtv-db-card-tile.dvtv-db-shape-square,
.dvtv-db-builder-live-render .dvtv-db-card-tile.dvtv-db-shape-circle,
.dvtv-db-builder-live-render .dvtv-db-card-tile.dvtv-db-shape-hexagon,
.dvtv-db-builder-live-render .dvtv-db-card-tile.dvtv-db-shape-diamond { grid-column: span 1 !important; }
.dvtv-db-canvas-frame[data-device="tablet"] .dvtv-db-builder-live-render .dvtv-db-card-tile.dvtv-db-width-3 { grid-column: span 2 !important; }
.dvtv-db-canvas-frame[data-device="mobile"] .dvtv-db-builder-live-render .dvtv-db-card-tile.dvtv-db-width-1,
.dvtv-db-canvas-frame[data-device="mobile"] .dvtv-db-builder-live-render .dvtv-db-card-tile.dvtv-db-width-2,
.dvtv-db-canvas-frame[data-device="mobile"] .dvtv-db-builder-live-render .dvtv-db-card-tile.dvtv-db-width-3,
.dvtv-db-canvas-frame[data-device="mobile"] .dvtv-db-builder-live-render .dvtv-db-card-tile.dvtv-db-width-full {
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
}

/* v1.7.6: ビルダー上で頻繁に触る列数/カード幅を常時表示 */
.dvtv-db-layout-quick{display:flex;align-items:center;gap:8px;margin-left:auto;margin-right:8px;padding:5px 7px;border:1px solid rgba(148,163,184,.22);border-radius:12px;background:rgba(255,255,255,.58)}
.dvtv-db-layout-quick label{display:flex;align-items:center;gap:5px;color:#64748b;font-size:10px;font-weight:800;white-space:nowrap}
.dvtv-db-layout-quick select{height:30px;min-width:76px;padding:0 24px 0 8px;border:1px solid rgba(148,163,184,.3);border-radius:9px;background:rgba(255,255,255,.88);color:#0f172a;font-size:11px;font-weight:700}
.dvtv-db-layout-quick label:last-child select{min-width:150px}
@media(max-width:980px){.dvtv-db-layout-quick{order:3;width:100%;margin:6px 0 0}.dvtv-db-canvas-toolbar{flex-wrap:wrap}}


/* ============================================================
 * v1.7.7 - カード全体を直接ドラッグ＆ドロップ
 * ============================================================ */
.dvtv-db-builder-live-render .dvtv-db-card-tile.dvtv-db-canvas-item {
  cursor: grab !important;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}
.dvtv-db-builder-live-render .dvtv-db-card-tile.dvtv-db-canvas-item:active {
  cursor: grabbing !important;
}
.dvtv-db-builder-live-render .dvtv-db-card-tile.dvtv-db-canvas-item .dvtv-db-canvas-item-toolbar,
.dvtv-db-builder-live-render .dvtv-db-card-tile.dvtv-db-canvas-item .dvtv-db-canvas-item-toolbar * {
  cursor: pointer !important;
}
.dvtv-db-builder-live-render .dvtv-db-card-tile.dvtv-db-sort-chosen {
  outline: 2px solid rgba(99,102,241,.55) !important;
  outline-offset: 3px;
  transform: scale(.995);
}
.dvtv-db-builder-live-render .dvtv-db-card-tile.dvtv-db-sort-ghost {
  opacity: .28 !important;
  background: rgba(99,102,241,.09) !important;
  border: 2px dashed rgba(99,102,241,.55) !important;
  box-shadow: none !important;
}
.dvtv-db-builder-live-render .dvtv-db-card-tile.dvtv-db-sort-dragging,
.dvtv-db-builder-live-render .dvtv-db-card-tile.is-drag-source {
  cursor: grabbing !important;
  opacity: .94 !important;
  box-shadow: 0 18px 44px rgba(15,23,42,.20) !important;
  transform: scale(1.015) rotate(.25deg);
  z-index: 50;
}
body.dvtv-db-is-sorting .dvtv-db-canvas-item-toolbar {
  opacity: 0 !important;
  pointer-events: none !important;
}
body.dvtv-db-is-sorting .dvtv-db-card-tile:hover {
  transform: none;
}

/* Insertion markers do not change grid dimensions while dragging. */
.dvtv-db-builder-live-render .dvtv-db-drop-before::before,
.dvtv-db-builder-live-render .dvtv-db-drop-after::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 3px;
  background: #4f46e5;
  box-shadow: 0 0 0 2px rgba(255,255,255,.85);
  pointer-events: none;
  z-index: 60;
}
.dvtv-db-builder-live-render .dvtv-db-drop-before::before { left: -6px; }
.dvtv-db-builder-live-render .dvtv-db-drop-after::before { right: -6px; }
.dvtv-db-builder-live-render .dvtv-db-drop-vertical::before {
  left: 0;
  right: 0;
  bottom: auto;
  width: auto;
  height: 3px;
}
.dvtv-db-builder-live-render .dvtv-db-drop-vertical.dvtv-db-drop-before::before { top: -6px; }
.dvtv-db-builder-live-render .dvtv-db-drop-vertical.dvtv-db-drop-after::before { top: auto; bottom: -6px; }

/* ============================================================
 * v1.7.8 - 編集操作バーを押しやすいサイズへ
 * カード自体のドラッグは維持し、ボタンは約40pxのクリック領域に拡大。
 * ============================================================ */
.dvtv-db-canvas-item-toolbar {
  right: 9px !important;
  top: -22px !important;
  gap: 4px !important;
  padding: 5px !important;
  border-radius: 13px !important;
  background: rgba(15,23,42,.94) !important;
  box-shadow: 0 8px 24px rgba(15,23,42,.28) !important;
}
.dvtv-db-canvas-item-toolbar .dvtv-db-btn-icon,
.dvtv-db-canvas-item-toolbar .dvtv-db-card-tile-drag {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  border-radius: 10px !important;
  color: #f8fafc !important;
  background: rgba(255,255,255,.055) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
}
.dvtv-db-canvas-item-toolbar .dvtv-db-btn-icon:hover,
.dvtv-db-canvas-item-toolbar .dvtv-db-card-tile-drag:hover {
  background: rgba(99,102,241,.42) !important;
  border-color: rgba(165,180,252,.38) !important;
  color: #fff !important;
}
.dvtv-db-canvas-item-toolbar .dvtv-db-card-edit:hover {
  background: rgba(59,130,246,.48) !important;
}
.dvtv-db-canvas-item-toolbar .dvtv-db-card-del:hover {
  background: rgba(239,68,68,.68) !important;
  color:#fff !important;
}
.dvtv-db-canvas-item-toolbar .dvtv-db-btn-icon:disabled {
  opacity: .28 !important;
  background: rgba(255,255,255,.025) !important;
}
@media (max-width: 760px) {
  .dvtv-db-canvas-item-toolbar {
    top: 8px !important;
    right: 8px !important;
  }
  .dvtv-db-canvas-item-toolbar .dvtv-db-btn-icon,
  .dvtv-db-canvas-item-toolbar .dvtv-db-card-tile-drag {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
  }
}
/* v1.9.0: 編集領域を役割ごとに色分け。完成版カードの配色はそのまま保持。 */
#dvtv-db-builder .dvtv-db-builder-header {
  background: linear-gradient(110deg,#1e40af,#5b21b6) !important;
  border: 1px solid #818cf8 !important;
}
#dvtv-db-builder .dvtv-db-builder-header h1,
#dvtv-db-builder .dvtv-db-builder-header .dvtv-db-eyebrow { color: #fff !important; opacity: 1 !important; }
#dvtv-db-builder .dvtv-db-dashboard-switcher { background: #eef2ff !important; border: 1px solid #a5b4fc !important; }
#dvtv-db-builder .dvtv-db-element-library { border: 1px solid #93c5fd !important; background: #f0f7ff !important; }
#dvtv-db-builder .dvtv-db-element-library > .dvtv-db-pane-title { background: #1d4ed8 !important; color: white !important; }
#dvtv-db-builder .dvtv-db-inspector { border: 1px solid #c4b5fd !important; background: #faf5ff !important; }
#dvtv-db-builder .dvtv-db-inspector > .dvtv-db-pane-title { background: #6d28d9 !important; color: white !important; }
#dvtv-db-builder .dvtv-db-pane-title strong,
#dvtv-db-builder .dvtv-db-pane-title span { color: inherit !important; opacity: 1; }
#dvtv-db-builder .dvtv-db-canvas-toolbar { background: #ecfdf5 !important; border: 1px solid #6ee7b7 !important; flex-wrap: wrap; }
#dvtv-db-builder .dvtv-db-tabs-editor { background: #e0f2fe !important; border: 1px solid #7dd3fc !important; }
#dvtv-db-builder .dvtv-db-tabs-editor .dvtv-db-tab-chip.is-active { background: #075985 !important; border-color: #075985 !important; color: #fff !important; }
#dvtv-db-builder .dvtv-db-tab-chip.is-active .dvtv-db-tab-label,
#dvtv-db-builder .dvtv-db-tab-chip.is-active > button { color: #fff !important; }
#dvtv-db-builder .dvtv-db-library-item { border-left: 4px solid var(--dvtv-part-color,#2563eb) !important; background: var(--dvtv-part-bg,#dbeafe) !important; }
#dvtv-db-builder .dvtv-db-library-item[data-content-type="shortcode"] { --dvtv-part-color:#7c3aed; --dvtv-part-bg:#ede9fe; }
#dvtv-db-builder .dvtv-db-library-item[data-content-type="divider"] { --dvtv-part-color:#c2410c; --dvtv-part-bg:#ffedd5; }
#dvtv-db-builder #dvtv-db-add-tab { --dvtv-part-color:#047857; --dvtv-part-bg:#d1fae5; }
#dvtv-db-builder .dvtv-db-library-item strong,
#dvtv-db-builder .dvtv-db-library-item small { color: #172554 !important; opacity: 1; }
#dvtv-db-builder .dvtv-db-library-icon { background: var(--dvtv-part-color,#2563eb) !important; color: #fff !important; }
#dvtv-db-builder .dvtv-db-layout-presets { background: #fff7ed; border-top: 2px solid #fdba74; }
#dvtv-db-builder .dvtv-db-layout-preset { background: #fff !important; border: 1px solid #fdba74 !important; }
#dvtv-db-builder .dvtv-db-layout-preset:hover { background: #ffedd5 !important; }
#dvtv-db-builder .dvtv-db-layout-quick { flex-wrap: wrap; background: #fff !important; border-color: #6ee7b7 !important; margin: 0 !important; }
#dvtv-db-builder .dvtv-db-layout-scope { flex: 1 0 100%; color: #065f46; font-size: 13px; overflow-wrap: anywhere; }
#dvtv-db-builder .dvtv-db-layout-quick label { min-width: 100px; }
#dvtv-db-builder .dvtv-db-layout-quick select { max-width: 235px; min-height: 34px; }
#dvtv-db-builder .dvtv-db-content-switch { padding: 10px; background: #dbeafe; border: 1px solid #93c5fd; border-radius: 10px; }
#dvtv-db-builder .dvtv-db-inspector-tabs button[data-ins-tab="content"].is-active { background:#1d4ed8!important; color:#fff!important; }
#dvtv-db-builder .dvtv-db-inspector-tabs button[data-ins-tab="design"].is-active { background:#7c3aed!important; color:#fff!important; }
#dvtv-db-builder .dvtv-db-inspector-tabs button[data-ins-tab="action"].is-active { background:#047857!important; color:#fff!important; }
#dvtv-db-builder .dvtv-db-inspector-popup-fields { background:#ede9fe; padding:8px; border-radius:10px; }
#dvtv-db-builder .dvtv-db-saved-link-note { margin-top:8px; padding:7px 9px; background:#fef3c7; border-left:3px solid #d97706; border-radius:5px; color:#78350f; font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
#dvtv-db-builder .dvtv-db-modal-header { background:linear-gradient(100deg,#dbeafe,#ede9fe); border-bottom:2px solid #a5b4fc; }
#dvtv-db-builder .dvtv-db-form-section-h { background:#e0e7ff!important; color:#312e81!important; border-left:4px solid #6366f1!important; padding:8px 10px!important; }
#dvtv-db-builder .dvtv-db-form-row { border-radius:8px; border-left:3px solid #93c5fd; padding:8px 10px; background:#f0f7ff; }
#dvtv-db-builder .dvtv-db-card-shortcode-fields > .dvtv-db-form-row,
#dvtv-db-builder .dvtv-db-popup-settings > .dvtv-db-form-row { background:#f5f3ff; border-left-color:#a78bfa; }
#dvtv-db-builder .dvtv-db-card-link-fields > .dvtv-db-form-row { background:#ecfdf5; border-left-color:#34d399; }
#dvtv-db-builder .dvtv-db-form-label { color:#172554!important; font-weight:800!important; }
#dvtv-db-builder .dvtv-db-shortcode-mode-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }

/* 一覧プレビューでも完成版と同じ1列表示を使い、編集ツールを残す。 */
#dvtv-db-builder .dvtv-db-builder-live-render[data-view="list"] .dvtv-db-cards-grid.dvtv-db-grid {
  display: flex !important; flex-direction: column !important; width:100%!important; max-width:100%!important; gap:6px!important;
}
#dvtv-db-builder .dvtv-db-builder-live-render[data-view="list"] .dvtv-db-card-tile { width:100%!important; min-width:0!important; aspect-ratio:auto!important; }
#dvtv-db-builder .dvtv-db-builder-live-render[data-view="list"] .dvtv-db-card-tile .dvtv-db-card { max-width:none!important; }