/* ===================================================================
 * DVTV-061 ダッシュボードビルダー v1.6.2
 * Display CSS - Liquid Glass + 挨拶ヒーロー（コンパクト版）+ ブルーネオン名
 * =================================================================== */

/* ===================================================================
 * フルブリード
 * =================================================================== */
body.dvtv-db-page {
  background: #e0e7ff !important;
  background-color: #e0e7ff !important;
}
body.dvtv-db-page .site,
body.dvtv-db-page .site-content,
body.dvtv-db-page .site-main,
body.dvtv-db-page .site-inner,
body.dvtv-db-page .entry-content,
body.dvtv-db-page .entry-header,
body.dvtv-db-page #primary,
body.dvtv-db-page #content,
body.dvtv-db-page #main,
body.dvtv-db-page main,
body.dvtv-db-page article,
body.dvtv-db-page .post,
body.dvtv-db-page .page,
body.dvtv-db-page .wp-site-blocks,
body.dvtv-db-page .wp-block-post-content,
body.dvtv-db-page .wp-block-group,
body.dvtv-db-page .is-layout-constrained,
body.dvtv-db-page .is-layout-flow,
body.dvtv-db-page .container,
body.dvtv-db-page .container-fluid,
body.dvtv-db-page .wrap {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: auto !important;
}
body.dvtv-db-page .entry-title,
body.dvtv-db-page .entry-meta,
body.dvtv-db-page .post-thumbnail,
body.dvtv-db-page .entry-footer,
body.dvtv-db-page .post-navigation,
body.dvtv-db-page .page-header,
body.dvtv-db-page .breadcrumb,
body.dvtv-db-page .breadcrumbs,
body.dvtv-db-page .widget-area,
body.dvtv-db-page .sidebar,
body.dvtv-db-page #secondary {
  display: none !important;
}

/* ===================================================================
 * ルートラッパー + CSS変数
 * =================================================================== */
.dvtv-db-wrap.pine-root {
  --db-fs-base: 14px;
  --db-fs-card-title: 14px;
  --db-fs-card-desc: 11.5px;
  --db-fs-h1: 22px;
  --db-fs-h2: 18px;
  --db-fs-h3: 16px;
  --db-fs-h4: 13px;
  --db-fs-tab: 13px;
  --db-fs-toolbar: 11px;
  --db-fs-small: 11px;
  --db-fs-tiny: 10px;
  --db-fs-hero-label: 10px;
  --db-fs-hero-title: 24px;
  --db-fs-hero-sub: 12px;
  --db-fw-base: 400;
  --db-fw-key: 700;
  --db-fw-title: 800;
  --db-scale: 1;
  min-height: 100vh;
  padding: 20px;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  font-size: var(--db-fs-base);
  font-family: system-ui, -apple-system, "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif;
  font-feature-settings: "palt";
  color: #1e293b;
}
.dvtv-db-wrap * { box-sizing: border-box; }

/* v1.5.5: カラーピッカーで指定した任意色。DVTV-000 のプリセット色に依存しない。 */
.dvtv-db-wrap .dvtv-db-color-custom,
.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-wrap .dvtv-db-color-custom svg,
.dvtv-db-builder-wrap .dvtv-db-color-custom svg { color: inherit !important; stroke: currentColor !important; }
.dvtv-db-wrap .dvtv-db-badge-custom {
  background: var(--dvtv-badge-color) !important;
  color: var(--dvtv-badge-contrast, #fff) !important;
  border-color: transparent !important;
}

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

/* --- フォントサイズ段階 --- */
.dvtv-db-wrap[data-fs="0"] {
  --db-scale: 0.86;
  --db-fs-base: 12px; --db-fs-card-title: 12px; --db-fs-card-desc: 10px;
  --db-fs-h1: 18px; --db-fs-h2: 14px; --db-fs-h3: 14px; --db-fs-h4: 12px;
  --db-fs-tab: 11px; --db-fs-toolbar: 10px; --db-fs-small: 10px; --db-fs-tiny: 9px;
  --db-fs-hero-label: 9px; --db-fs-hero-title: 19px; --db-fs-hero-sub: 10px;
}
.dvtv-db-wrap[data-fs="1"] {
  --db-scale: 0.93;
  --db-fs-base: 13px; --db-fs-card-title: 13px; --db-fs-card-desc: 11px;
  --db-fs-h1: 20px; --db-fs-h2: 15px; --db-fs-h3: 15px; --db-fs-h4: 12.5px;
  --db-fs-tab: 12px; --db-fs-toolbar: 10.5px; --db-fs-small: 10.5px; --db-fs-tiny: 9.5px;
  --db-fs-hero-label: 9.5px; --db-fs-hero-title: 22px; --db-fs-hero-sub: 11px;
}
.dvtv-db-wrap[data-fs="2"] {
  --db-scale: 1;
  --db-fs-base: 14px; --db-fs-card-title: 14px; --db-fs-card-desc: 11.5px;
  --db-fs-h1: 22px; --db-fs-h2: 16px; --db-fs-h3: 16px; --db-fs-h4: 13px;
  --db-fs-tab: 13px; --db-fs-toolbar: 11px; --db-fs-small: 11px; --db-fs-tiny: 10px;
  --db-fs-hero-label: 10px; --db-fs-hero-title: 24px; --db-fs-hero-sub: 12px;
}
.dvtv-db-wrap[data-fs="3"] {
  --db-scale: 1.14;
  --db-fs-base: 16px; --db-fs-card-title: 16px; --db-fs-card-desc: 13px;
  --db-fs-h1: 25px; --db-fs-h2: 18px; --db-fs-h3: 18px; --db-fs-h4: 15px;
  --db-fs-tab: 15px; --db-fs-toolbar: 13px; --db-fs-small: 13px; --db-fs-tiny: 11.5px;
  --db-fs-hero-label: 11px; --db-fs-hero-title: 28px; --db-fs-hero-sub: 14px;
}
.dvtv-db-wrap[data-fs="4"] {
  --db-scale: 1.29;
  --db-fs-base: 18px; --db-fs-card-title: 18px; --db-fs-card-desc: 15px;
  --db-fs-h1: 28px; --db-fs-h2: 20px; --db-fs-h3: 20px; --db-fs-h4: 16px;
  --db-fs-tab: 16px; --db-fs-toolbar: 14px; --db-fs-small: 14px; --db-fs-tiny: 13px;
  --db-fs-hero-label: 12px; --db-fs-hero-title: 32px; --db-fs-hero-sub: 15px;
}

/* --- ボルド切替 --- */
body .dvtv-db-wrap[data-bold="1"] { --db-fw-base: 700; --db-fw-key: 800; --db-fw-title: 900; }
body .dvtv-db-wrap[data-bold="1"],
body .dvtv-db-wrap[data-bold="1"] p,
body .dvtv-db-wrap[data-bold="1"] span,
body .dvtv-db-wrap[data-bold="1"] a,
body .dvtv-db-wrap[data-bold="1"] div,
body .dvtv-db-wrap[data-bold="1"] button { font-weight: var(--db-fw-base) !important; }
body .dvtv-db-wrap[data-bold="1"] h1,
body .dvtv-db-wrap[data-bold="1"] h2,
body .dvtv-db-wrap[data-bold="1"] h3,
body .dvtv-db-wrap[data-bold="1"] h4,
body .dvtv-db-wrap[data-bold="1"] .dvtv-db-card-title,
body .dvtv-db-wrap[data-bold="1"] .dvtv-db-hero-title,
body .dvtv-db-wrap[data-bold="1"] .pine-h2 { font-weight: var(--db-fw-title) !important; }
body .dvtv-db-wrap[data-bold="1"] .dvtv-db-tab.is-active,
body .dvtv-db-wrap[data-bold="1"] .dvtv-db-tb-sz.is-active,
body .dvtv-db-wrap[data-bold="1"] .chip { font-weight: var(--db-fw-key) !important; }

/* ===================================================================
 * ヘッダー
 * =================================================================== */
.dvtv-db-header {
  padding: 12px 20px;
  border-radius: 20px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; margin-bottom: 0;
  flex-wrap: wrap;
}
.dvtv-db-header-left {
  display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0;
}
.dvtv-db-header-right {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.dvtv-db-header .bead { flex-shrink: 0; }
.dvtv-db-header-text h1 {
  margin: 0; padding: 0; border: 0;
  font-size: var(--db-fs-h1);
  font-weight: 800; letter-spacing: -0.02em;
  background: linear-gradient(135deg, #1e293b 0%, #3b82f6 60%, #a855f7 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  line-height: 1.2;
}
.dvtv-db-wrap[data-theme="dark"] .dvtv-db-header-text h1 {
  background: linear-gradient(135deg, #f1f5f9 0%, #93c5fd 60%, #c4b5fd 100%);
  -webkit-background-clip: text; background-clip: text;
}
.dvtv-db-desc {
  margin: 2px 0 0 0;
  font-size: var(--db-fs-small);
  color: #64748b;
  font-weight: 500;
}

/* ===================================================================
 * ツールバー（5ボタン統合版）
 * =================================================================== */
.dvtv-db-toolbar {
  display: inline-flex; gap: 3px; align-items: center;
  padding: 4px; border-radius: 12px;
  background: rgba(255,255,255,0.35);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}
.dvtv-db-wrap[data-theme="dark"] .dvtv-db-toolbar {
  background: rgba(30,41,59,0.5);
  border-color: rgba(255,255,255,0.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.dvtv-db-tb-sz, .dvtv-db-tb-btn {
  background: transparent; border: 0; border-radius: 8px;
  padding: 5px 10px; cursor: pointer;
  font-size: var(--db-fs-toolbar);
  font-family: inherit; color: #64748b;
  transition: all 0.2s;
  display: inline-flex; align-items: center; gap: 4px;
  min-width: 30px;
}
.dvtv-db-tb-sz:hover, .dvtv-db-tb-btn:hover {
  background: rgba(255,255,255,0.5); color: #1e293b;
}
.dvtv-db-wrap[data-theme="dark"] .dvtv-db-tb-sz,
.dvtv-db-wrap[data-theme="dark"] .dvtv-db-tb-btn { color: #94a3b8; }
.dvtv-db-wrap[data-theme="dark"] .dvtv-db-tb-sz:hover,
.dvtv-db-wrap[data-theme="dark"] .dvtv-db-tb-btn:hover {
  background: rgba(255,255,255,0.1); color: #f1f5f9;
}
.dvtv-db-tb-sz.is-active, .dvtv-db-tb-btn.is-active {
  background: linear-gradient(180deg, rgba(59,130,246,0.9), rgba(99,102,241,0.9));
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 2px 6px rgba(59,130,246,0.3);
}
.dvtv-db-tb-sep {
  width: 1px; height: 18px;
  background: rgba(148,163,184,0.3);
  margin: 0 3px;
}

/* ユーザーチップ & 時計 */
.dvtv-db-user-chip, .dvtv-db-clock {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--db-fs-small); color: #475569;
  padding: 6px 12px; border-radius: 10px;
  background: rgba(255,255,255,0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.45);
  font-weight: 500;
}
.dvtv-db-clock {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--db-fs-tiny);
  color: #64748b;
}
.dvtv-db-wrap[data-theme="dark"] .dvtv-db-user-chip,
.dvtv-db-wrap[data-theme="dark"] .dvtv-db-clock {
  background: rgba(30,41,59,0.5);
  border-color: rgba(255,255,255,0.1);
  color: #cbd5e1;
}

/* 旧 ±UI 互換 */
.dvtv-db-fs-ctrl {
  display: inline-flex; gap: 3px; align-items: center;
  padding: 4px; border-radius: 12px;
  background: rgba(255,255,255,0.35);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.5);
}
.dvtv-db-fs-label {
  font-size: var(--db-fs-toolbar);
  color: #64748b;
  padding: 0 6px;
  font-weight: 600;
  min-width: 38px;
  text-align: center;
}

.dvtv-db-btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 10px; min-width: 36px; height: 36px;
  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: 10px;
  color: #475569; cursor: pointer;
  font-size: var(--db-fs-small); font-family: inherit; font-weight: 500;
  text-decoration: none;
  transition: all 0.2s;
}
.dvtv-db-btn-icon:hover {
  background: rgba(255,255,255,0.6);
  color: #1e293b;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59,130,246,0.12);
}
.dvtv-db-wrap[data-theme="dark"] .dvtv-db-btn-icon {
  background: rgba(30,41,59,0.5); border-color: rgba(255,255,255,0.1); color: #cbd5e1;
}
.dvtv-db-wrap[data-theme="dark"] .dvtv-db-btn-icon:hover {
  background: rgba(30,41,59,0.7); color: #f1f5f9;
}

/* ===================================================================
 * ヒーロー挨拶（DVTV-001スタイル）
 * =================================================================== */
.dvtv-db-hero {
  position: relative;
  padding: 6px 20px 7px;
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(147,197,253,0.35) 0%, rgba(196,181,253,0.28) 50%, rgba(249,168,212,0.25) 100%);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 1px 2px rgba(15,23,42,0.04),
    0 12px 32px -10px rgba(99,102,241,0.25);
  overflow: hidden;
}
.dvtv-db-hero::before {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: radial-gradient(ellipse 100% 60% at 50% -15%, rgba(255,255,255,0.7), transparent 55%);
  pointer-events: none;
}
.dvtv-db-wrap[data-theme="dark"] .dvtv-db-hero {
  background: linear-gradient(135deg, rgba(59,130,246,0.22) 0%, rgba(124,58,237,0.2) 50%, rgba(236,72,153,0.18) 100%);
  border-color: rgba(255,255,255,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 12px 32px -10px rgba(0,0,0,0.4);
}
.dvtv-db-wrap[data-theme="dark"] .dvtv-db-hero::before {
  background: radial-gradient(ellipse 100% 60% at 50% -15%, rgba(147,197,253,0.2), transparent 55%);
}
.dvtv-db-hero-decor { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.dvtv-db-hero-dot { position: absolute; border-radius: 50%; filter: blur(24px); opacity: 0.7; }
.dvtv-db-hero-dot.dot1 { width: 120px; height: 120px; top: -40px; right: 15%; background: radial-gradient(circle, #c084fc, transparent 70%); }
.dvtv-db-hero-dot.dot2 { width: 100px; height: 100px; bottom: -30px; right: 5%; background: radial-gradient(circle, #fbbf24, transparent 70%); opacity: 0.5; }
.dvtv-db-hero-dot.dot3 { width: 90px; height: 90px; top: 30%; right: 30%; background: radial-gradient(circle, #60a5fa, transparent 70%); opacity: 0.5; }

.dvtv-db-hero-main {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.dvtv-db-hero-body {
  flex: 1 1 260px;
  min-width: 0;
}

/* ラベル（DASHBOARD等） */
.dvtv-db-hero-label {
  display: inline-block;
  font-size: var(--db-fs-hero-label);
  font-weight: 800;
  letter-spacing: 0.15em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  margin-bottom: 0;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
/* 色バリエーション */
.hero-label-indigo  { color: #6366f1; }
.hero-label-blue    { color: #3b82f6; }
.hero-label-violet  { color: #8b5cf6; }
.hero-label-emerald { color: #10b981; }
.hero-label-amber   { color: #f59e0b; }
.hero-label-rose    { color: #f43f5e; }
.hero-label-slate   { color: #64748b; }
.dvtv-db-wrap[data-theme="dark"] .hero-label-indigo  { color: #a5b4fc; }
.dvtv-db-wrap[data-theme="dark"] .hero-label-blue    { color: #93c5fd; }
.dvtv-db-wrap[data-theme="dark"] .hero-label-violet  { color: #c4b5fd; }
.dvtv-db-wrap[data-theme="dark"] .hero-label-emerald { color: #6ee7b7; }
.dvtv-db-wrap[data-theme="dark"] .hero-label-amber   { color: #fcd34d; }
.dvtv-db-wrap[data-theme="dark"] .hero-label-rose    { color: #fda4af; }
.dvtv-db-wrap[data-theme="dark"] .hero-label-slate   { color: #cbd5e1; }

.dvtv-db-hero-title {
  margin: 0 0 2px 0; padding: 0; border: 0;
  font-size: var(--db-fs-hero-title);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: #1e293b;
  text-shadow: 0 1px 2px rgba(255,255,255,0.5);
}
.dvtv-db-wrap[data-theme="dark"] .dvtv-db-hero-title {
  color: #f1f5f9;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.dvtv-db-hero-name {
  background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 35%, #0369a1 70%, #0c4a6e 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-weight: 900;
  filter:
    drop-shadow(0 0 1px rgba(30, 64, 175, 1))
    drop-shadow(0 0 4px rgba(29, 78, 216, 1))
    drop-shadow(0 0 9px rgba(6, 182, 212, 0.95))
    drop-shadow(0 0 18px rgba(14, 165, 233, 0.75))
    drop-shadow(0 0 30px rgba(59, 130, 246, 0.55))
    drop-shadow(0 0 46px rgba(6, 182, 212, 0.35));
  padding: 0 3px;
}
.dvtv-db-wrap[data-theme="dark"] .dvtv-db-hero-name {
  background: linear-gradient(135deg, #60a5fa 0%, #22d3ee 35%, #3b82f6 70%, #06b6d4 100%);
  -webkit-background-clip: text; background-clip: text;
  filter:
    drop-shadow(0 0 2px rgba(96, 165, 250, 1))
    drop-shadow(0 0 6px rgba(34, 211, 238, 1))
    drop-shadow(0 0 14px rgba(59, 130, 246, 0.85))
    drop-shadow(0 0 26px rgba(6, 182, 212, 0.65))
    drop-shadow(0 0 42px rgba(34, 211, 238, 0.4));
}
.dvtv-db-hero-sub {
  margin: 0; padding: 0;
  font-size: var(--db-fs-hero-sub);
  color: #64748b;
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  line-height: 1.3;
}
.dvtv-db-hero-sub-date {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: ui-monospace, monospace;
  font-weight: 600;
  color: #1e293b;
}
.dvtv-db-hero-sub-sep { color: #cbd5e1; }
.dvtv-db-wrap[data-theme="dark"] .dvtv-db-hero-sub { color: #94a3b8; }
.dvtv-db-wrap[data-theme="dark"] .dvtv-db-hero-sub-date { color: #e2e8f0; }

/* ウィジェット（CPU/GPUモニター等の埋込エリア） */
.dvtv-db-hero-widgets {
  display: flex; gap: 10px;
  flex-direction: row; flex-wrap: wrap;
  flex: 1 1 auto; min-width: 0;
  max-width: 560px;
  justify-content: flex-end;
}
.dvtv-db-hero-widget {
  flex: 1 1 240px;
  min-width: 0; max-width: 100%;
  border-radius: 14px;
  overflow: hidden;
  align-self: stretch;
  display: flex;
}
.dvtv-db-hero-widget > div,
.dvtv-db-hero-widget .pine-root {
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* ===================================================================
 * v1.7.11 タブナビゲーション / 表示形式と同じ1行に配置
 * =================================================================== */
.dvtv-db-navigation {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 6px;
  border-radius: 14px;
  background: rgba(255,255,255,0.3);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 2px 6px rgba(15,23,42,0.04);
  flex-wrap: nowrap;
}
.dvtv-db-tabs {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  gap: 8px;
  padding: 2px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,.5) transparent;
}
.dvtv-db-tabs::-webkit-scrollbar { height: 6px; }
.dvtv-db-tabs::-webkit-scrollbar-thumb { background: rgba(148,163,184,0.3); border-radius: 3px; }
.dvtv-db-wrap[data-theme="dark"] .dvtv-db-navigation {
  background: rgba(30,41,59,0.45);
  border-color: rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 2px 6px rgba(0,0,0,0.3);
}
.dvtv-db-tabs .dvtv-db-tab {
  flex: 0 0 auto;
  min-height: 42px;
  background: linear-gradient(180deg, #ffffff, #eef4ff);
  border: 1px solid #b8cae7;
  border-radius: 10px;
  padding: 8px 16px 12px;
  cursor: pointer;
  font-size: calc(var(--db-fs-tab, 13px) + 1px);
  font-weight: 700;
  line-height: 1.4;
  color: #334155;
  font-family: inherit;
  transition: background .15s, border-color .15s, box-shadow .15s;
  display: inline-flex; align-items: center; gap: 6px;
  position: relative;
  white-space: nowrap;
}
.dvtv-db-tabs .dvtv-db-tab:hover {
  background: #e0ecff;
  border-color: #7ca6e8;
  color: #1e3a8a;
}
.dvtv-db-wrap .dvtv-db-tabs .dvtv-db-tab.is-active {
  background: linear-gradient(180deg, #2563eb, #1d4ed8);
  border-color: #1d4ed8;
  color: #fff;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 2px 6px rgba(29,78,216,.2);
}
.dvtv-db-tab.is-active::after {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 4px;
  height: 3px;
  border-radius: 2px;
  background: #bfdbfe;
  pointer-events: none;
}
.dvtv-db-navigation button:focus-visible {
  outline: 2px solid #1d4ed8;
  outline-offset: 2px;
}
.dvtv-db-wrap[data-theme="dark"] .dvtv-db-tab {
  background: linear-gradient(180deg, #334155, #263449);
  border-color: #64748b;
  color: #e2e8f0;
}
.dvtv-db-wrap[data-theme="dark"] .dvtv-db-tab:not(.is-active):hover {
  background: #3b4b62;
  border-color: #93c5fd;
  color: #fff;
}
.dvtv-db-wrap[data-theme="dark"] .dvtv-db-navigation button:focus-visible {
  outline-color: #93c5fd;
}

/* ===================================================================
 * パネル
 * =================================================================== */
.dvtv-db-panel { display: block; }
.dvtv-db-panel.is-hidden { display: none; }
.dvtv-db-panel:not(.is-hidden) { animation: dbFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes dbFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dvtv-db-tab-desc {
  margin: 4px 0 10px 4px;
  color: #64748b;
  font-size: var(--db-fs-small);
}
.dvtv-db-wrap[data-theme="dark"] .dvtv-db-tab-desc { color: #94a3b8; }

/* ===================================================================
 * グリッド + カード
 * =================================================================== */
.dvtv-db-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
  /* v1.4.1: 既定の stretch だと同じ行のカードが最も高いものに揃えられ、
     「小」と「標準」が同じ高さに見えてしまう。各カード自身の高さを使わせる。 */
  align-items: start;
}
/* 2行ぶん占める特大だけは、確保した領域いっぱいに広げる */
.dvtv-db-grid .dvtv-db-card-featured { align-self: stretch; }
.dvtv-db-grid.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.dvtv-db-grid.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.dvtv-db-grid.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.dvtv-db-grid.grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1024px) {
  .dvtv-db-grid.grid-cols-4,
  .dvtv-db-grid.grid-cols-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .dvtv-db-grid,
  .dvtv-db-grid.grid-cols-3,
  .dvtv-db-grid.grid-cols-4,
  .dvtv-db-grid.grid-cols-5 { grid-template-columns: repeat(2, 1fr); }
  .dvtv-db-hero-widgets { justify-content: flex-start; }
}
@media (max-width: 480px) {
  .dvtv-db-grid,
  .dvtv-db-grid.grid-cols-2,
  .dvtv-db-grid.grid-cols-3,
  .dvtv-db-grid.grid-cols-4,
  .dvtv-db-grid.grid-cols-5 { grid-template-columns: 1fr; }
}

/* ===================================================================
 * カード本体 v1.4.1
 * サイズは「グリッド上の占有マス数」と「最低高さ」で本当に変わるようにした。
 * v1.4.0 以前は padding と font-size しか変えておらず、
 * 列幅が minmax(240px,1fr) 固定のため小/標準/大がほぼ同じ見た目だった。
 * =================================================================== */
.dvtv-db-card {
  display: flex;
  padding: 14px 16px;
  border-radius: 14px;
  text-decoration: none; color: inherit;
  position: relative;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  min-height: var(--db-card-h, 76px);
  box-sizing: border-box;
}
.dvtv-db-card-inner {
  display: flex; align-items: flex-start; gap: 12px;
  width: 100%;
  min-width: 0;
}
.dvtv-db-card[href]:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 0 rgba(255,255,255,0.9),
    inset 0 0 0 1px rgba(255,255,255,0.3),
    0 1px 2px rgba(15,23,42,0.08),
    0 14px 30px -10px rgba(99,102,241,0.3),
    0 0 32px rgba(129,140,248,0.15);
}
.dvtv-db-card[href]:hover .anim-spin { animation: aSpin 0.9s cubic-bezier(0.4, 0, 0.2, 1); }
.dvtv-db-card[href]:hover .dvtv-db-card-arrow { opacity: 1; transform: translate(2px,-2px); }

.dvtv-db-card-icon { flex-shrink: 0; margin-top: 1px; display: inline-flex; }
.dvtv-db-card-body {
  display: flex; flex-direction: column; gap: 2px;
  flex: 1; min-width: 0;
  padding-right: 14px;
}
.dvtv-db-card-title {
  display: block;
  margin: 0; padding: 0;
  font-size: var(--db-fs-card-title); font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 1px rgba(255,255,255,0.6);
}
.dvtv-db-card-desc {
  display: -webkit-box;
  margin: 0; padding: 0;
  font-size: var(--db-fs-card-desc);
  color: #64748b;
  line-height: 1.4;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.dvtv-db-card-arrow {
  position: absolute; top: 12px; right: 12px;
  opacity: 0; color: #94a3b8;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
}
.dvtv-db-card-badge { position: absolute; top: 10px; right: 10px; z-index: 2; }
.dvtv-db-card:has(.dvtv-db-card-badge) .dvtv-db-card-arrow { display: none; }

/* ダークモード。ただし個別に色指定されたカードは上書きしない（inline style が優先） */
.dvtv-db-wrap[data-theme="dark"] .dvtv-db-card-title {
  color: #f1f5f9;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.dvtv-db-wrap[data-theme="dark"] .dvtv-db-card-desc  { color: #94a3b8; }
.dvtv-db-wrap[data-theme="dark"] .dvtv-db-card-arrow { color: #64748b; }

/* ===================================================================
 * サイズ（占有マス数 + 高さ）
 * =================================================================== */
.dvtv-db-card-small {
  --db-card-h: 54px;
  padding: 9px 12px;
}
.dvtv-db-card-small .dvtv-db-card-inner { align-items: center; }
.dvtv-db-card-small .dvtv-db-card-title { font-size: calc(var(--db-fs-card-title) - 1px); }
.dvtv-db-card-small .dvtv-db-card-desc  { display: none; }

.dvtv-db-card-normal { --db-card-h: 76px; }

.dvtv-db-card-large {
  --db-card-h: 108px;
  grid-column: span 2;
  padding: 18px 22px;
}
.dvtv-db-card-large .dvtv-db-card-inner  { align-items: center; gap: 16px; }
.dvtv-db-card-large .dvtv-db-card-title  { font-size: calc(var(--db-fs-card-title) + 3px); margin-bottom: 3px; }
.dvtv-db-card-large .dvtv-db-card-desc   { font-size: calc(var(--db-fs-card-desc) + 1px); -webkit-line-clamp: 3; }

.dvtv-db-card-featured {
  --db-card-h: 196px;
  grid-column: span 2;
  grid-row: span 2;
  padding: 24px;
}
.dvtv-db-card-featured .dvtv-db-card-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
.dvtv-db-card-featured .dvtv-db-card-title {
  font-size: calc(var(--db-fs-card-title) + 6px);
  margin-bottom: 6px;
  white-space: normal;
}
.dvtv-db-card-featured .dvtv-db-card-desc { font-size: calc(var(--db-fs-card-desc) + 2px); -webkit-line-clamp: 4; }

/* 1列表示のときは span を解除しないと崩れる */
@media (max-width: 768px) {
  .dvtv-db-card-large,
  .dvtv-db-card-featured { grid-column: span 1; grid-row: auto; }
  .dvtv-db-card-featured { --db-card-h: 130px; }
}
/* 2列固定のときに span 2 が幅いっぱいになるのは意図通り */
.dvtv-db-grid.grid-cols-2 .dvtv-db-card-large,
.dvtv-db-grid.grid-cols-2 .dvtv-db-card-featured { grid-column: span 2; }

/* ===================================================================
 * 形状バリエーション v1.4.1
 * =================================================================== */

/* --- 角丸（既定） --- */
.dvtv-db-shape-rect { border-radius: 14px; }

/* --- 正方形: アイコンとタイトルを中央に --- */
.dvtv-db-shape-square {
  border-radius: 16px;
  aspect-ratio: 1 / 1;
  min-height: 0;
  width: 100%;
  max-width: 190px;
  justify-self: center;
  padding: 14px;
  align-items: center;
}
.dvtv-db-card-small.dvtv-db-shape-square { max-width: 124px; }
.dvtv-db-card-large.dvtv-db-shape-square,
.dvtv-db-card-featured.dvtv-db-shape-square { max-width: 260px; }
.dvtv-db-shape-square .dvtv-db-card-inner {
  flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; height: 100%;
}
.dvtv-db-shape-square .dvtv-db-card-body { flex: 0 1 auto; padding-right: 0; align-items: center; }
.dvtv-db-shape-square .dvtv-db-card-title { white-space: normal; }
.dvtv-db-shape-square .dvtv-db-card-arrow { top: 10px; right: 10px; }

/* --- 円形: 真円を保つ --- */
.dvtv-db-shape-circle {
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  min-height: 0;
  width: 100%;
  max-width: 190px;
  justify-self: center;
  padding: 12px;
  align-items: center;
  text-align: center;
}
.dvtv-db-shape-circle .dvtv-db-card-inner {
  flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; height: 100%;
}
.dvtv-db-shape-circle .dvtv-db-card-body { flex: 0 1 auto; padding-right: 0; align-items: center; }
.dvtv-db-shape-circle .dvtv-db-card-title { white-space: normal; font-size: calc(var(--db-fs-card-title) - 1px); }
.dvtv-db-shape-circle .dvtv-db-card-arrow { display: none; }
.dvtv-db-card-small.dvtv-db-shape-circle { max-width: 120px; }
.dvtv-db-card-featured.dvtv-db-shape-circle,
.dvtv-db-card-large.dvtv-db-shape-circle { max-width: 260px; }

/* --- カプセル --- */
.dvtv-db-shape-pill {
  border-radius: 999px;
  --db-card-h: 58px;
  padding: 10px 24px;
  align-items: center;
}
.dvtv-db-shape-pill .dvtv-db-card-inner { align-items: center; }
.dvtv-db-shape-pill .dvtv-db-card-desc  { display: none; }
.dvtv-db-shape-pill .dvtv-db-card-arrow { top: 50%; transform: translateY(-50%); right: 16px; }
.dvtv-db-shape-pill[href]:hover .dvtv-db-card-arrow { transform: translateY(-50%) translateX(2px); }

/* --- ひし形: 外側を45度回転し、中身を逆回転で戻す --- */
.dvtv-db-shape-diamond {
  aspect-ratio: 1 / 1;
  min-height: 0;
  width: 68%;
  max-width: 150px;
  justify-self: center;
  align-self: center;
  border-radius: 14px;
  transform: rotate(45deg);
  padding: 0;
  align-items: center; justify-content: center;
}
.dvtv-db-shape-diamond .dvtv-db-card-inner {
  transform: rotate(-45deg);
  flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center;
  width: 128%; height: 128%;
  padding: 4px;
}
.dvtv-db-shape-diamond .dvtv-db-card-body { flex: 0 1 auto; padding-right: 0; align-items: center; }
.dvtv-db-shape-diamond .dvtv-db-card-title { white-space: normal; font-size: calc(var(--db-fs-card-title) - 2px); }
.dvtv-db-shape-diamond .dvtv-db-card-arrow { display: none; }
.dvtv-db-shape-diamond[href]:hover { transform: rotate(45deg) translateY(-2px); }
.dvtv-db-card-small.dvtv-db-shape-diamond { max-width: 110px; }
.dvtv-db-card-large.dvtv-db-shape-diamond,
.dvtv-db-card-featured.dvtv-db-shape-diamond { max-width: 200px; }

/* --- 六角形 --- */
.dvtv-db-shape-hexagon {
  aspect-ratio: 1 / 1.06;
  min-height: 0;
  width: 100%;
  max-width: 180px;
  justify-self: center;
  border-radius: 0;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  padding: 12px;
  align-items: center;
}
.dvtv-db-shape-hexagon .dvtv-db-card-inner {
  flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; text-align: center; height: 100%;
}
.dvtv-db-shape-hexagon .dvtv-db-card-body { flex: 0 1 auto; padding-right: 0; align-items: center; }
.dvtv-db-shape-hexagon .dvtv-db-card-title { white-space: normal; font-size: calc(var(--db-fs-card-title) - 1px); }
.dvtv-db-shape-hexagon .dvtv-db-card-arrow { display: none; }
.dvtv-db-card-small.dvtv-db-shape-hexagon { max-width: 120px; }
.dvtv-db-card-large.dvtv-db-shape-hexagon,
.dvtv-db-card-featured.dvtv-db-shape-hexagon { max-width: 250px; }

/* --- 帯（左端にビーズ色のバー） --- */
.dvtv-db-shape-ribbon {
  border-radius: 10px;
  padding-left: 22px;
}
.dvtv-db-shape-ribbon::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 7px;
  background: var(--dvtv-card-accent, #3b82f6);
  background: linear-gradient(180deg, color-mix(in srgb, var(--dvtv-card-accent, #3b82f6) 72%, white), var(--dvtv-card-accent, #3b82f6));
}

/* --- 枠線のみ --- */
.dvtv-db-wrap .dvtv-db-shape-outline {
  border-radius: 12px;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border: 1.5px solid rgba(99,102,241,0.35);
}
.dvtv-db-wrap .dvtv-db-shape-outline[href]:hover {
  background: rgba(255,255,255,0.55) !important;
  border-color: rgba(99,102,241,0.6);
  box-shadow: 0 8px 20px -10px rgba(99,102,241,0.4) !important;
}
.dvtv-db-wrap[data-theme="dark"] .dvtv-db-shape-outline { border-color: rgba(148,163,184,0.35); }
.dvtv-db-wrap[data-theme="dark"] .dvtv-db-shape-outline[href]:hover { background: rgba(51,65,85,0.5) !important; }

/* ===================================================================
 * エンプティ + フッター + エラー
 * =================================================================== */
.dvtv-db-empty {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 60px 24px;
  border-radius: 20px;
  text-align: center;
  gap: 12px;
  color: #64748b;
}
.dvtv-db-empty svg { color: #94a3b8; }
.dvtv-db-empty p { margin: 0; font-size: var(--db-fs-base); }
.dvtv-db-wrap[data-theme="dark"] .dvtv-db-empty { color: #94a3b8; }

.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-footer {
  text-align: center;
  padding: 14px 0 4px;
}
.dvtv-db-footer-brand {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--db-fs-tiny);
  color: #94a3b8;
  letter-spacing: 0.05em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ダークモード全般 */
.dvtv-db-wrap[data-theme="dark"] { color: #e2e8f0; }
.dvtv-db-wrap[data-theme="dark"] .dvtv-db-desc { color: #94a3b8; }
.dvtv-db-wrap[data-theme="dark"] .pine-blob { opacity: 0.35; }

/* ============================================================
   v1.3.0 - 白背景モード（plain_background）
   ブロブを非出力にしているのでセレクタは背景色のみ。
   ============================================================ */
/* v1.4.4: DVTV-000 やテーマの背景指定に負けないよう詳細度を上げる */
body .dvtv-db-wrap.dvtv-db-plain-bg,
body .pine-root.dvtv-db-plain-bg {
  background: #ffffff !important;
  background-image: none !important;
}
body .dvtv-db-wrap.dvtv-db-plain-bg[data-theme="dark"],
body .pine-root.dvtv-db-plain-bg[data-theme="dark"] {
  background: #0f172a !important;
  background-image: none !important;
}
/* 万一ほかの経路でブロブ装飾が差し込まれても白モード中は消す */
body .dvtv-db-wrap.dvtv-db-plain-bg .pine-canvas,
body .dvtv-db-wrap.dvtv-db-plain-bg .pine-blob,
body .dvtv-db-wrap.dvtv-db-plain-bg .pine-grain {
  display: none !important;
}

/* v1.4.5: DVTV-000 は .pine-root の疑似要素(::before/::after)でオーロラ背景を
   描くことがある。疑似要素は要素自身の背景の「上」に描画されるため、
   ラップを白くしてもカラーが被さってしまう。白モード中は疑似要素ごと消す。 */
body .dvtv-db-wrap.dvtv-db-plain-bg::before,
body .dvtv-db-wrap.dvtv-db-plain-bg::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

/* v1.4.5: パインズのテーマ/DVTV-000 が body 側にページ全体の背景を敷く場合への対処。
   白モードのダッシュボードが置かれたページでは、ページ全体を白（ダーク時は黒）にし、
   ラップの外にある装飾キャンバスも消す。クラスは display.js が付与する。 */
html.dvtv-db-plain-page,
body.dvtv-db-plain-page {
  background: #ffffff !important;
  background-image: none !important;
}
html.dvtv-db-plain-page.dvtv-db-plain-dark,
body.dvtv-db-plain-page.dvtv-db-plain-dark {
  background: #0f172a !important;
}
body.dvtv-db-plain-page::before,
body.dvtv-db-plain-page::after,
html.dvtv-db-plain-page::before,
html.dvtv-db-plain-page::after {
  content: none !important;
  display: none !important;
}
body.dvtv-db-plain-page .pine-canvas,
body.dvtv-db-plain-page .pine-blob,
body.dvtv-db-plain-page .pine-grain {
  display: none !important;
}
/* 白背景時はガラス効果を弱め、文字をはっきり見せる */
.dvtv-db-wrap.dvtv-db-plain-bg .glass {
  background: rgba(255,255,255,0.9) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid #e2e8f0 !important;
}
.dvtv-db-wrap.dvtv-db-plain-bg[data-theme="dark"] .glass {
  background: rgba(30,41,59,0.9) !important;
  border: 1px solid #334155 !important;
}
/* 白背景時はヒーローのドット装飾を控えめに */
.dvtv-db-wrap.dvtv-db-plain-bg .dvtv-db-hero-decor {
  opacity: 0.5;
}

/* ============================================================
   v1.3.0 - 名前文字色（プリセット指定時はインラインstyleで上書き）
   gradient のときは元のCSSのまま、それ以外はインラインstyleが効く。
   ============================================================ */

/* ===================================================================
 * v1.4.0 追記: 内蔵インラインSVGアイコン
 * DVTV-000 のスプライトに依存せず、DVTV-061 が自前で描画する。
 * =================================================================== */
.dvtv-db-wrap .dvtv-db-ico {
  stroke: currentColor;
  fill: none;
  vertical-align: middle;
  flex: 0 0 auto;
}

/* --- ダークモード切替ボタン（月 / 太陽をCSSで出し分け） ---
 * 従来は JS が <use href> を差し替えていたが、インラインSVG化により
 * 機能しなくなるため、両方を出力して表示を切り替える方式にした。 */
.dvtv-db-wrap .dvtv-db-dark-toggle .dvtv-db-ico-moon,
.dvtv-db-wrap .dvtv-db-dark-toggle .dvtv-db-ico-sun {
  display: none;
}
.dvtv-db-wrap .dvtv-db-dark-toggle .dvtv-db-ico-moon { display: inline-block; }
.dvtv-db-wrap[data-theme="dark"] .dvtv-db-dark-toggle .dvtv-db-ico-moon,
.dvtv-db-wrap.dvtv-dark .dvtv-db-dark-toggle .dvtv-db-ico-moon { display: none; }
.dvtv-db-wrap[data-theme="dark"] .dvtv-db-dark-toggle .dvtv-db-ico-sun,
.dvtv-db-wrap.dvtv-dark .dvtv-db-dark-toggle .dvtv-db-ico-sun { display: inline-block; }

.dvtv-db-wrap[data-theme="dark"] .dvtv-db-dark-toggle .dvtv-db-ico-sun {
  color: #fcd34d;
}


/* ===================================================================
 * v1.5.5: テーマ/DVTV-000 の .glass / .pine-card の影響を受けて
 * カード内容が不自然に下寄せ・中央寄せされるケースへの対策
 * =================================================================== */
.dvtv-db-wrap .glass {
  background: rgba(255,255,255,0.42);
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.75),
    inset 0 0 0 1px rgba(255,255,255,0.22),
    0 1px 2px rgba(15,23,42,0.06),
    0 10px 28px rgba(99,102,241,0.08);
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
}
.dvtv-db-wrap .dvtv-db-card.dvtv-db-shape-rect,
.dvtv-db-wrap .dvtv-db-card.dvtv-db-shape-ribbon,
.dvtv-db-wrap .dvtv-db-card.dvtv-db-shape-outline,
.dvtv-db-wrap .dvtv-db-card.dvtv-db-shape-pill {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  height: auto !important;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  place-self: auto stretch !important;
}
.dvtv-db-wrap .dvtv-db-card.dvtv-db-shape-rect > .dvtv-db-card-inner,
.dvtv-db-wrap .dvtv-db-card.dvtv-db-shape-ribbon > .dvtv-db-card-inner,
.dvtv-db-wrap .dvtv-db-card.dvtv-db-shape-outline > .dvtv-db-card-inner,
.dvtv-db-wrap .dvtv-db-card.dvtv-db-shape-pill > .dvtv-db-card-inner {
  width: 100% !important;
  min-width: 0 !important;
  justify-content: flex-start !important;
}
.dvtv-db-wrap .dvtv-db-card.dvtv-db-shape-rect.dvtv-db-card-featured > .dvtv-db-card-inner,
.dvtv-db-wrap .dvtv-db-card.dvtv-db-shape-ribbon.dvtv-db-card-featured > .dvtv-db-card-inner,
.dvtv-db-wrap .dvtv-db-card.dvtv-db-shape-outline.dvtv-db-card-featured > .dvtv-db-card-inner {
  align-items: flex-start !important;
}
.dvtv-db-grid {
  grid-auto-flow: row dense;
}
/* Do not backfill cards from a later section into holes before its divider. */
.dvtv-db-grid.dvtv-db-grid-sectioned {
  grid-auto-flow: row;
}


/* ===================================================================
 * v1.5.5: 非矩形カードや正方形カードでグリッドが不自然に空く問題を修正
 * - 正方形/円/六角形を列幅いっぱいに使う
 * - これらの形状では large/featured の列・行 span を抑制
 * - カードの寄せ方向を統一して見た目の整列を改善
 * =================================================================== */
.dvtv-db-grid {
  justify-items: stretch;
}

.dvtv-db-card.dvtv-db-shape-square,
.dvtv-db-card.dvtv-db-shape-circle,
.dvtv-db-card.dvtv-db-shape-hexagon {
  width: 100%;
  max-width: none;
  justify-self: stretch;
}

.dvtv-db-grid .dvtv-db-card-large.dvtv-db-shape-square,
.dvtv-db-grid .dvtv-db-card-featured.dvtv-db-shape-square,
.dvtv-db-grid .dvtv-db-card-large.dvtv-db-shape-circle,
.dvtv-db-grid .dvtv-db-card-featured.dvtv-db-shape-circle,
.dvtv-db-grid .dvtv-db-card-large.dvtv-db-shape-hexagon,
.dvtv-db-grid .dvtv-db-card-featured.dvtv-db-shape-hexagon,
.dvtv-db-grid .dvtv-db-card-large.dvtv-db-shape-diamond,
.dvtv-db-grid .dvtv-db-card-featured.dvtv-db-shape-diamond {
  grid-column: span 1 !important;
  grid-row: auto !important;
}

.dvtv-db-card.dvtv-db-shape-square .dvtv-db-card-inner,
.dvtv-db-card.dvtv-db-shape-circle .dvtv-db-card-inner,
.dvtv-db-card.dvtv-db-shape-hexagon .dvtv-db-card-inner {
  width: 100%;
}

/* 正方形/円/六角形は大サイズでも“巨大化”しすぎないようにする */
.dvtv-db-card-large.dvtv-db-shape-square,
.dvtv-db-card-large.dvtv-db-shape-circle,
.dvtv-db-card-large.dvtv-db-shape-hexagon,
.dvtv-db-card-featured.dvtv-db-shape-square,
.dvtv-db-card-featured.dvtv-db-shape-circle,
.dvtv-db-card-featured.dvtv-db-shape-hexagon {
  padding: 16px;
}
.dvtv-db-card-large.dvtv-db-shape-square .dvtv-db-card-title,
.dvtv-db-card-large.dvtv-db-shape-circle .dvtv-db-card-title,
.dvtv-db-card-large.dvtv-db-shape-hexagon .dvtv-db-card-title,
.dvtv-db-card-featured.dvtv-db-shape-square .dvtv-db-card-title,
.dvtv-db-card-featured.dvtv-db-shape-circle .dvtv-db-card-title,
.dvtv-db-card-featured.dvtv-db-shape-hexagon .dvtv-db-card-title {
  font-size: var(--db-fs-card-title);
}
.dvtv-db-card-large.dvtv-db-shape-square .dvtv-db-card-desc,
.dvtv-db-card-large.dvtv-db-shape-circle .dvtv-db-card-desc,
.dvtv-db-card-large.dvtv-db-shape-hexagon .dvtv-db-card-desc,
.dvtv-db-card-featured.dvtv-db-shape-square .dvtv-db-card-desc,
.dvtv-db-card-featured.dvtv-db-shape-circle .dvtv-db-card-desc,
.dvtv-db-card-featured.dvtv-db-shape-hexagon .dvtv-db-card-desc {
  font-size: var(--db-fs-card-desc);
  -webkit-line-clamp: 3;
}

/* カラム数が少ないときのダイヤ型も暴れにくくする */
.dvtv-db-card.dvtv-db-shape-diamond {
  width: 76%;
  max-width: 170px;
}


/* ===================================================================
 * v1.5.5: 整列優先 + スマホ最適化 + カード個別アイコンサイズ
 * =================================================================== */
.dvtv-db-grid {
  align-items: stretch;
}

/* スマホでは 1 列にして崩れにくくする */
@media (max-width: 640px) {
  .dvtv-db-grid,
  .dvtv-db-grid.grid-cols-2,
  .dvtv-db-grid.grid-cols-3,
  .dvtv-db-grid.grid-cols-4,
  .dvtv-db-grid.grid-cols-5 {
    grid-template-columns: 1fr;
  }
}

/* 角丸系カードは高さを揃えて見た目を整える */
.dvtv-db-card.dvtv-db-shape-rect,
.dvtv-db-card.dvtv-db-shape-ribbon,
.dvtv-db-card.dvtv-db-shape-outline,
.dvtv-db-card.dvtv-db-shape-pill {
  height: var(--db-card-h, 76px);
}
.dvtv-db-card.dvtv-db-shape-square,
.dvtv-db-card.dvtv-db-shape-circle,
.dvtv-db-card.dvtv-db-shape-diamond,
.dvtv-db-card.dvtv-db-shape-hexagon {
  height: auto;
}
.dvtv-db-card.dvtv-db-shape-rect .dvtv-db-card-body,
.dvtv-db-card.dvtv-db-shape-ribbon .dvtv-db-card-body,
.dvtv-db-card.dvtv-db-shape-outline .dvtv-db-card-body {
  justify-content: center;
}

/* カードアイコンサイズ */
.dvtv-db-card-bead {
  width: var(--db-card-bead-size, 36px);
  height: var(--db-card-bead-size, 36px);
  min-width: var(--db-card-bead-size, 36px);
  min-height: var(--db-card-bead-size, 36px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dvtv-db-card-bead-sm { --db-card-bead-size: 30px; }
.dvtv-db-card-bead-md { --db-card-bead-size: 36px; }
.dvtv-db-card-bead-lg { --db-card-bead-size: 44px; }
.dvtv-db-card-bead-xl { --db-card-bead-size: 52px; }


/* ===================================================================
 * v1.5.5: カード内容を左上基準で揃える
 * - アイコンを左上へ
 * - タイトル / 説明も左揃え
 * - 同形状カードの表示位置を統一して“バラつき感”を抑える
 * =================================================================== */
.dvtv-db-card.dvtv-db-shape-square,
.dvtv-db-card.dvtv-db-shape-rect,
.dvtv-db-card.dvtv-db-shape-ribbon,
.dvtv-db-card.dvtv-db-shape-outline {
  text-align: left;
}

.dvtv-db-card.dvtv-db-shape-square .dvtv-db-card-inner,
.dvtv-db-card.dvtv-db-shape-rect .dvtv-db-card-inner,
.dvtv-db-card.dvtv-db-shape-ribbon .dvtv-db-card-inner,
.dvtv-db-card.dvtv-db-shape-outline .dvtv-db-card-inner {
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 12px;
  height: 100%;
}

.dvtv-db-card.dvtv-db-shape-square .dvtv-db-card-icon,
.dvtv-db-card.dvtv-db-shape-rect .dvtv-db-card-icon,
.dvtv-db-card.dvtv-db-shape-ribbon .dvtv-db-card-icon,
.dvtv-db-card.dvtv-db-shape-outline .dvtv-db-card-icon {
  margin-top: 0;
  align-self: flex-start;
}

.dvtv-db-card.dvtv-db-shape-square .dvtv-db-card-body,
.dvtv-db-card.dvtv-db-shape-rect .dvtv-db-card-body,
.dvtv-db-card.dvtv-db-shape-ribbon .dvtv-db-card-body,
.dvtv-db-card.dvtv-db-shape-outline .dvtv-db-card-body {
  width: 100%;
  min-width: 0;
  padding-right: 0;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 6px;
  text-align: left;
}

.dvtv-db-card.dvtv-db-shape-square .dvtv-db-card-title,
.dvtv-db-card.dvtv-db-shape-rect .dvtv-db-card-title,
.dvtv-db-card.dvtv-db-shape-ribbon .dvtv-db-card-title,
.dvtv-db-card.dvtv-db-shape-outline .dvtv-db-card-title {
  width: 100%;
  white-space: normal;
  overflow: hidden;
  text-overflow: initial;
  text-align: left;
}

.dvtv-db-card.dvtv-db-shape-square .dvtv-db-card-desc,
.dvtv-db-card.dvtv-db-shape-rect .dvtv-db-card-desc,
.dvtv-db-card.dvtv-db-shape-ribbon .dvtv-db-card-desc,
.dvtv-db-card.dvtv-db-shape-outline .dvtv-db-card-desc {
  width: 100%;
  text-align: left;
}

/* 正方形カードは“中央寄せ”ではなく、左上に統一 */
.dvtv-db-shape-square {
  justify-self: stretch;
  max-width: none;
  padding: 16px;
  align-items: stretch;
}
.dvtv-db-card-small.dvtv-db-shape-square,
.dvtv-db-card-large.dvtv-db-shape-square,
.dvtv-db-card-featured.dvtv-db-shape-square {
  max-width: none;
}
.dvtv-db-shape-square .dvtv-db-card-inner {
  text-align: left;
}
.dvtv-db-shape-square .dvtv-db-card-body {
  flex: 1 1 auto;
}

/* ===================================================================
 * v1.6.0 ショートコード画面 / Glass Popup
 * =================================================================== */
button.dvtv-db-card.dvtv-db-shortcode-trigger {
  width: 100%;
  font: inherit;
  text-align: left;
  color: inherit;
}
.dvtv-db-card.dvtv-db-shortcode-trigger:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 0 rgba(255,255,255,0.9),
    inset 0 0 0 1px rgba(255,255,255,0.3),
    0 1px 2px rgba(15,23,42,0.08),
    0 14px 30px -10px rgba(99,102,241,0.3),
    0 0 32px rgba(129,140,248,0.15);
}
.dvtv-db-card.dvtv-db-shortcode-trigger:hover .anim-spin { animation: aSpin 0.9s cubic-bezier(0.4, 0, 0.2, 1); }
.dvtv-db-card.dvtv-db-shortcode-trigger:hover .dvtv-db-card-arrow { opacity: 1; transform: translate(2px,-2px); }

.dvtv-db-shortcode-host.is-hidden,
.dvtv-db-sc-page.is-hidden,
.dvtv-db-sc-expand.is-hidden { display: none !important; }
.dvtv-db-sc-hidden-source { display: none !important; }

/* ダッシュボード内ページ */
.dvtv-db-sc-page {
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: dbFadeIn .22s ease-out;
}
.dvtv-db-sc-page-head {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 54px;
  padding: 10px 14px;
  border-radius: 15px;
}
.dvtv-db-sc-page-head h2 {
  margin: 0;
  font-size: calc(18px * var(--db-scale));
  line-height: 1.25;
  color: #0f172a;
}
.dvtv-db-sc-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  border: 1px solid rgba(99,102,241,.22);
  border-radius: 10px;
  padding: 8px 11px;
  background: rgba(255,255,255,.66);
  color: #4338ca;
  font: 700 12px/1 inherit;
  cursor: pointer;
}
.dvtv-db-sc-back:hover { background: rgba(255,255,255,.94); }
.dvtv-db-sc-page-body {
  min-height: 180px;
  padding: 18px;
  border-radius: 18px;
  overflow: visible;
}

/* タブ内展開 */
.dvtv-db-sc-expand {
  margin-top: 14px;
  animation: dbFadeIn .22s ease-out;
}
.dvtv-db-sc-expand-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 4px 8px;
}
.dvtv-db-sc-expand-head h2 {
  margin: 0;
  font-size: calc(16px * var(--db-scale));
  color: #0f172a;
}
.dvtv-db-sc-expand-body {
  padding: 16px;
  border-radius: 16px;
}
.dvtv-db-sc-close-expand,
.dvtv-db-sc-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(148,163,184,.28);
  border-radius: 11px;
  background: rgba(255,255,255,.78);
  color: #475569;
  cursor: pointer;
}
.dvtv-db-sc-close-expand:hover,
.dvtv-db-sc-close:hover { background: rgba(255,255,255,.98); color: #0f172a; }

/* Glassポップアップ */
body.dvtv-db-popup-open { overflow: hidden; }
.dvtv-db-sc-popup {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999999;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.dvtv-db-sc-popup.is-open { display: flex; }
.dvtv-db-sc-popup-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15,23,42,.34);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.dvtv-db-sc-popup-box {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(1080px, 94vw);
  max-height: 85vh;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(255,255,255,.84);
  box-shadow: 0 28px 80px -28px rgba(15,23,42,.55), inset 0 1px 0 rgba(255,255,255,.9);
  animation: dvtvDbPopupIn .18s ease-out;
}
@keyframes dvtvDbPopupIn {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.dvtv-db-sc-size-small  { width: min(640px, 94vw); }
.dvtv-db-sc-size-medium { width: min(820px, 94vw); }
.dvtv-db-sc-size-large  { width: min(1080px, 94vw); }
.dvtv-db-sc-size-wide   { width: min(1320px, 96vw); }
.dvtv-db-sc-size-full   { width: 97vw; }
.dvtv-db-sc-height-auto { max-height: 92vh; }
.dvtv-db-sc-height-70   { height: 70vh; max-height: 70vh; }
.dvtv-db-sc-height-85   { height: 85vh; max-height: 85vh; }
.dvtv-db-sc-height-full { height: 95vh; max-height: 95vh; }
.dvtv-db-sc-popup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: 0 0 auto;
  min-height: 58px;
  padding: 10px 12px 10px 18px;
  border-bottom: 1px solid rgba(148,163,184,.22);
  background: rgba(255,255,255,.42);
}
.dvtv-db-sc-popup-head.no-title {
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 4;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.dvtv-db-sc-popup-head h2 {
  margin: 0;
  min-width: 0;
  font-size: calc(18px * var(--db-scale));
  line-height: 1.25;
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dvtv-db-sc-popup-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 18px;
  background: rgba(255,255,255,.2);
}
.dvtv-db-sc-popup-head.no-title + .dvtv-db-sc-popup-body { padding-top: 58px; }
.dvtv-db-sc-empty { padding: 24px; text-align: center; color: #64748b; }

/* ダークモード */
.dvtv-db-wrap[data-theme="dark"] .dvtv-db-sc-page-head h2,
.dvtv-db-wrap[data-theme="dark"] .dvtv-db-sc-expand-head h2,
.dvtv-db-wrap[data-theme="dark"] .dvtv-db-sc-popup-head h2 { color: #f1f5f9; }
.dvtv-db-wrap[data-theme="dark"] .dvtv-db-sc-back,
.dvtv-db-wrap[data-theme="dark"] .dvtv-db-sc-close-expand,
.dvtv-db-wrap[data-theme="dark"] .dvtv-db-sc-close {
  background: rgba(30,41,59,.76);
  color: #cbd5e1;
  border-color: rgba(148,163,184,.22);
}
.dvtv-db-wrap[data-theme="dark"] .dvtv-db-sc-popup-box {
  background: rgba(15,23,42,.92);
  box-shadow: 0 28px 90px -26px rgba(0,0,0,.78), inset 0 1px 0 rgba(255,255,255,.08);
}
.dvtv-db-wrap[data-theme="dark"] .dvtv-db-sc-popup-head,
.dvtv-db-wrap[data-theme="dark"] .dvtv-db-sc-popup-body { background: rgba(15,23,42,.38); }

@media (max-width: 640px) {
  .dvtv-db-sc-popup { padding: 8px; }
  .dvtv-db-sc-popup-box,
  .dvtv-db-sc-size-small,
  .dvtv-db-sc-size-medium,
  .dvtv-db-sc-size-large,
  .dvtv-db-sc-size-wide,
  .dvtv-db-sc-size-full { width: 98vw; max-height: 96vh; border-radius: 16px; }
  .dvtv-db-sc-height-70,
  .dvtv-db-sc-height-85,
  .dvtv-db-sc-height-full { height: 94vh; max-height: 94vh; }
  .dvtv-db-sc-popup-body { padding: 12px; }
  .dvtv-db-sc-page-head { align-items: flex-start; flex-direction: column; }
}

/* ===================================================================
 * v1.6.0 カード / 一覧表示切替・区切り・カードデザイン
 * =================================================================== */
.dvtv-db-view-switch {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin: 0;
  padding: 0 2px 0 12px;
  border-left: 1px solid rgba(148,163,184,.35);
}
.dvtv-db-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 38px;
  border: 1px solid rgba(148,163,184,.24);
  border-radius: 9px;
  padding: 6px 10px;
  background: rgba(255,255,255,.46);
  color: #64748b;
  font-family: inherit;
  font-size: calc(12px * var(--db-scale, 1));
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  cursor: pointer;
}
.dvtv-db-view-btn.is-active {
  background: rgba(255,255,255,.88);
  border-color: rgba(99,102,241,.34);
  color: #4338ca;
  box-shadow: 0 4px 14px -9px rgba(79,70,229,.45);
}
@media (max-width: 640px) {
  .dvtv-db-navigation { gap: 6px; padding: 4px; }
  .dvtv-db-tabs { gap: 6px; }
  .dvtv-db-tabs .dvtv-db-tab { padding-left: 12px; padding-right: 12px; }
  .dvtv-db-view-switch { gap: 3px; padding-left: 6px; padding-right: 0; }
  .dvtv-db-view-btn { gap: 3px; padding: 6px; }
}
.dvtv-db-list-head { display: none; }

/* セクション区切り / v1.7.10: 見出しをGlassラベルで表示 */
.dvtv-db-divider {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(12px,1fr) fit-content(80%) minmax(12px,1fr);
  align-items: center;
  gap: 12px;
  min-height: 42px;
  margin: 3px 0;
}
.dvtv-db-divider-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--dvtv-divider-accent,#6366f1) 55%, transparent));
}
.dvtv-db-divider-line:last-child {
  background: linear-gradient(90deg, color-mix(in srgb, var(--dvtv-divider-accent,#6366f1) 55%, transparent), transparent);
}
.dvtv-db-divider-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  padding: 5px 16px;
  border: 1px solid rgba(59,130,246,.32);
  border-color: color-mix(in srgb, var(--dvtv-divider-accent,#3b82f6) 32%, transparent);
  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;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
}
.dvtv-db-divider-label strong {
  min-width: 0;
  font-size: calc(16px * var(--db-scale, 1)) !important;
  font-weight: 800 !important;
  line-height: 1.35;
  color: inherit !important;
}
.dvtv-db-divider-label small { font-size: calc(10px * var(--db-scale)); color: #94a3b8; }
.dvtv-db-divider-label svg { color: var(--dvtv-divider-accent,#6366f1); }

/* 実用カードデザイン: shapeとは独立 */
.dvtv-db-style-soft {
  background: rgba(255,255,255,.48) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 5px 18px -14px rgba(15,23,42,.28) !important;
}
.dvtv-db-style-strong {
  background: rgba(255,255,255,.90) !important;
  border-color: rgba(148,163,184,.34) !important;
  box-shadow: inset 0 1px 0 #fff, 0 10px 26px -18px rgba(15,23,42,.52) !important;
}
.dvtv-db-style-accent::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background: var(--dvtv-card-accent,#3b82f6);
}
.dvtv-db-style-accent { padding-left: 20px; }
.dvtv-db-style-minimal {
  background: rgba(255,255,255,.20) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  box-shadow: none !important;
  border-color: rgba(148,163,184,.16) !important;
}
.dvtv-db-style-compact {
  --db-card-h: 58px;
  padding: 9px 12px;
}
.dvtv-db-style-compact .dvtv-db-card-inner { align-items: center; gap: 9px; }
.dvtv-db-style-compact .dvtv-db-card-desc { -webkit-line-clamp: 1; }

/* 特殊形状はカード表示時だけ説明/バッジ/矢印を抑える。一覧表示では復活させる。 */
.dvtv-db-wrap:not([data-view="list"]) .dvtv-db-shape-circle .dvtv-db-card-desc,
.dvtv-db-wrap:not([data-view="list"]) .dvtv-db-shape-diamond .dvtv-db-card-desc,
.dvtv-db-wrap:not([data-view="list"]) .dvtv-db-shape-hexagon .dvtv-db-card-desc,
.dvtv-db-wrap:not([data-view="list"]) .dvtv-db-shape-circle .dvtv-db-card-badge,
.dvtv-db-wrap:not([data-view="list"]) .dvtv-db-shape-diamond .dvtv-db-card-badge,
.dvtv-db-wrap:not([data-view="list"]) .dvtv-db-shape-hexagon .dvtv-db-card-badge { display: none !important; }

/* 一覧表示: 保存されている形状・サイズを無視して読みやすい横一列へ正規化 */
.dvtv-db-wrap[data-view="list"] .dvtv-db-list-head {
  display: grid;
  grid-template-columns: minmax(180px, .9fr) minmax(260px, 2fr) 100px;
  gap: 12px;
  padding: 0 14px 5px 62px;
  color: #94a3b8;
  font-size: calc(10px * var(--db-scale));
  font-weight: 800;
  letter-spacing: .04em;
}
.dvtv-db-wrap[data-view="list"] .dvtv-db-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dvtv-db-wrap[data-view="list"] .dvtv-db-card {
  width: 100% !important;
  max-width: none !important;
  min-height: 52px !important;
  height: auto !important;
  aspect-ratio: auto !important;
  grid-column: auto !important;
  grid-row: auto !important;
  clip-path: none !important;
  transform: none !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
  justify-self: stretch !important;
  text-align: left !important;
}
.dvtv-db-wrap[data-view="list"] .dvtv-db-card:hover { transform: translateY(-1px) !important; }
.dvtv-db-wrap[data-view="list"] .dvtv-db-card-inner {
  transform: none !important;
  width: 100% !important;
  height: auto !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  text-align: left !important;
  padding: 0 !important;
}
.dvtv-db-wrap[data-view="list"] .dvtv-db-card-icon { width: 38px; justify-content: center; margin: 0; }
.dvtv-db-wrap[data-view="list"] .dvtv-db-card-body {
  display: grid !important;
  grid-template-columns: minmax(180px,.9fr) minmax(260px,2fr);
  align-items: center;
  gap: 12px;
  width: 100%;
  padding-right: 120px;
  text-align: left !important;
}
.dvtv-db-wrap[data-view="list"] .dvtv-db-card-title,
.dvtv-db-wrap[data-view="list"] .dvtv-db-card-desc {
  display: block !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  -webkit-line-clamp: unset !important;
  font-size: calc(12px * var(--db-scale)) !important;
}
.dvtv-db-wrap[data-view="list"] .dvtv-db-card-title { font-weight: 800 !important; }
.dvtv-db-wrap[data-view="list"] .dvtv-db-card-desc { color: #64748b; }
.dvtv-db-wrap[data-view="list"] .dvtv-db-card-badge {
  display: inline-flex !important;
  top: 50% !important;
  right: 42px !important;
  transform: translateY(-50%);
}
.dvtv-db-wrap[data-view="list"] .dvtv-db-card-arrow {
  display: inline-flex !important;
  opacity: .65;
  top: 50% !important;
  right: 13px !important;
  transform: translateY(-50%) !important;
}
.dvtv-db-wrap[data-view="list"] .dvtv-db-divider { width: 100%; }

.dvtv-db-wrap[data-theme="dark"] .dvtv-db-view-btn { background: rgba(30,41,59,.55); color:#94a3b8; }
.dvtv-db-wrap[data-theme="dark"] .dvtv-db-view-btn.is-active { color:#c7d2fe; border-color:rgba(129,140,248,.36); }
.dvtv-db-wrap[data-theme="dark"] .dvtv-db-divider-label {
  color: #e2e8f0;
  border-color: rgba(129,140,248,.42);
  background: linear-gradient(180deg, rgba(51,65,85,.94), rgba(30,41,59,.94));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 2px 5px rgba(0,0,0,.12);
}
.dvtv-db-wrap[data-theme="dark"] .dvtv-db-style-strong { background: rgba(30,41,59,.92) !important; }
.dvtv-db-wrap[data-theme="dark"] .dvtv-db-style-soft { background: rgba(30,41,59,.54) !important; }
.dvtv-db-wrap[data-theme="dark"] .dvtv-db-style-minimal { background: rgba(15,23,42,.18) !important; }

@media (max-width: 760px) {
  .dvtv-db-wrap[data-view="list"] .dvtv-db-list-head { display:none; }
  .dvtv-db-wrap[data-view="list"] .dvtv-db-card-body { display:flex !important; flex-direction:column; align-items:flex-start; gap:2px; padding-right:80px; }
  .dvtv-db-wrap[data-view="list"] .dvtv-db-card-desc { max-width:100%; }
  .dvtv-db-divider-label small { display:none; }
}
/* ひし形ショートコードカードはボタン化しても回転を保持 */
.dvtv-db-wrap:not([data-view="list"]) .dvtv-db-shape-diamond.dvtv-db-shortcode-trigger:hover {
  transform: rotate(45deg) translateY(-2px);
}


/* v1.6.2 区切り線：空欄なら線だけ */
.dvtv-db-divider.is-line-only{display:block;padding:10px 2px}
.dvtv-db-divider.is-line-only .dvtv-db-divider-line-full{display:block;width:100%;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--dvtv-divider-accent,#3b82f6) 58%,transparent),transparent)}

/* ============================================================
 * v1.7.3 - viewport centered full-width render
 * - テーマ側の本文幅に依存せず、ダッシュボード自体を画面中央へ展開
 * - 77サーバーのワイド画面で右側だけ余らないよう最大幅を1600pxへ統一
 * ============================================================ */
.dvtv-db-wrap.pine-root {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.dvtv-db-wrap .dvtv-db-container {
  width: 100%;
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
}


/* v1.7.4: テーマ側コンテンツが左右非対称でも、公開ダッシュボードの中心を実ビューポート中心へ補正。
   値は display.js が実測して設定する。JS無効時は v1.7.3 のCSS中央寄せをフォールバックとして使う。 */
.dvtv-db-wrap.pine-root:not(.dvtv-db-builder-live-render) {
  left: var(--dvtv-vp-center-shift, 0px);
}

/* ============================================================
 * v1.7.4 - 大カードだけの奇数列レイアウトを中央配置
 *
 * 5列設定で large / featured（矩形系）がすべて2列 span の場合、
 * 2 + 2 = 4列だけが使用され、5列目だけが右側に空いて見える。
 * カード自体の幅は変えず、使用中の列ブロックを左右中央へ配置する。
 * ============================================================ */
@media (min-width: 1025px) {
  .dvtv-db-grid.grid-cols-5:has(> .dvtv-db-card-large, > .dvtv-db-card-featured):not(:has(
    > .dvtv-db-card-small,
    > .dvtv-db-card-normal,
    > .dvtv-db-card-large.dvtv-db-shape-square,
    > .dvtv-db-card-large.dvtv-db-shape-circle,
    > .dvtv-db-card-large.dvtv-db-shape-hexagon,
    > .dvtv-db-card-large.dvtv-db-shape-diamond,
    > .dvtv-db-card-featured.dvtv-db-shape-square,
    > .dvtv-db-card-featured.dvtv-db-shape-circle,
    > .dvtv-db-card-featured.dvtv-db-shape-hexagon,
    > .dvtv-db-card-featured.dvtv-db-shape-diamond
  )) {
    width: calc(80% - 2px);
    margin-inline: auto;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .dvtv-db-grid.grid-cols-3:has(> .dvtv-db-card-large, > .dvtv-db-card-featured):not(:has(
    > .dvtv-db-card-small,
    > .dvtv-db-card-normal,
    > .dvtv-db-card-large.dvtv-db-shape-square,
    > .dvtv-db-card-large.dvtv-db-shape-circle,
    > .dvtv-db-card-large.dvtv-db-shape-hexagon,
    > .dvtv-db-card-large.dvtv-db-shape-diamond,
    > .dvtv-db-card-featured.dvtv-db-shape-square,
    > .dvtv-db-card-featured.dvtv-db-shape-circle,
    > .dvtv-db-card-featured.dvtv-db-shape-hexagon,
    > .dvtv-db-card-featured.dvtv-db-shape-diamond
  )) {
    width: calc(66.666667% - 3.333px);
    margin-inline: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 769-1024pxでは既存仕様上4/5列指定も3列へ落ちるため、同じ理屈で2列へ中央寄せ */
@media (min-width: 769px) and (max-width: 1024px) {
  .dvtv-db-grid.grid-cols-3:has(> .dvtv-db-card-large, > .dvtv-db-card-featured):not(:has(> .dvtv-db-card-small, > .dvtv-db-card-normal)),
  .dvtv-db-grid.grid-cols-4:has(> .dvtv-db-card-large, > .dvtv-db-card-featured):not(:has(> .dvtv-db-card-small, > .dvtv-db-card-normal)),
  .dvtv-db-grid.grid-cols-5:has(> .dvtv-db-card-large, > .dvtv-db-card-featured):not(:has(> .dvtv-db-card-small, > .dvtv-db-card-normal)) {
    width: calc(66.666667% - 3.333px);
    margin-inline: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* ============================================================
 * v1.7.5 - 奇数列 + 2列幅カードの中央配置（PHP判定版）
 * v1.7.4 の :has() 判定に依存せず、PHPが付けたクラスで確実に適用する。
 * 5列→列幅は変えず4列分(80%)、3列→2列分(66.666%)を中央へ置く。
 * ============================================================ */
@media (min-width: 1025px) {
  .dvtv-db-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-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;
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .dvtv-db-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 - 実用カード幅システム
 * - 画面が広くても1枚のカードが巨大化しない
 * - グリッド自体を中央配置
 * - カードの高さ/強調(size)と横幅(width_span)を分離
 * ============================================================ */
.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;
}

/* 自動列は 260px〜設定上限のカードを必要数だけ並べ、余りを左右へ均等配分 */
.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;
}

/* 固定列でも1列が標準カード幅を超えないよう、グリッド全体に上限を掛ける */
@media (min-width: 1025px) {
  .dvtv-db-grid.dvtv-db-grid-capped.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .dvtv-db-grid.dvtv-db-grid-capped.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .dvtv-db-grid.dvtv-db-grid-capped.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .dvtv-db-grid.dvtv-db-grid-capped.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .dvtv-db-grid.dvtv-db-grid-capped.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .dvtv-db-grid.dvtv-db-grid-capped.grid-cols-3,
  .dvtv-db-grid.dvtv-db-grid-capped.grid-cols-4,
  .dvtv-db-grid.dvtv-db-grid-capped.grid-cols-5 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (min-width: 641px) and (max-width: 768px) {
  .dvtv-db-grid.dvtv-db-grid-capped,
  .dvtv-db-grid.dvtv-db-grid-capped.grid-cols-2,
  .dvtv-db-grid.dvtv-db-grid-capped.grid-cols-3,
  .dvtv-db-grid.dvtv-db-grid-capped.grid-cols-4,
  .dvtv-db-grid.dvtv-db-grid-capped.grid-cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 640px) {
  .dvtv-db-grid.dvtv-db-grid-capped,
  .dvtv-db-grid.dvtv-db-grid-capped.grid-cols-2,
  .dvtv-db-grid.dvtv-db-grid-capped.grid-cols-3,
  .dvtv-db-grid.dvtv-db-grid-capped.grid-cols-4,
  .dvtv-db-grid.dvtv-db-grid-capped.grid-cols-5 {
    max-width: 100% !important;
    grid-template-columns: 1fr !important;
  }
}

/* 個別カード幅。auto は旧仕様(size連動)をそのまま使う */
.dvtv-db-grid > .dvtv-db-card.dvtv-db-width-1 { grid-column: span 1 !important; }
.dvtv-db-grid > .dvtv-db-card.dvtv-db-width-2 { grid-column: span 2 !important; }
.dvtv-db-grid > .dvtv-db-card.dvtv-db-width-3 { grid-column: span 3 !important; }
.dvtv-db-grid > .dvtv-db-card.dvtv-db-width-full { grid-column: 1 / -1 !important; }

/* 2列グリッドでは3列指定を安全に2列へ縮める */
.dvtv-db-grid.grid-cols-2 > .dvtv-db-card.dvtv-db-width-3 { grid-column: span 2 !important; }

/* 円/正方形/六角/ひし形は横長にすると視認性が落ちるため1列固定 */
.dvtv-db-grid > .dvtv-db-card.dvtv-db-shape-square,
.dvtv-db-grid > .dvtv-db-card.dvtv-db-shape-circle,
.dvtv-db-grid > .dvtv-db-card.dvtv-db-shape-hexagon,
.dvtv-db-grid > .dvtv-db-card.dvtv-db-shape-diamond {
  grid-column: span 1 !important;
}

@media (max-width: 768px) {
  .dvtv-db-grid > .dvtv-db-card.dvtv-db-width-3 { grid-column: span 2 !important; }
}
@media (max-width: 640px) {
  .dvtv-db-grid > .dvtv-db-card.dvtv-db-width-1,
  .dvtv-db-grid > .dvtv-db-card.dvtv-db-width-2,
  .dvtv-db-grid > .dvtv-db-card.dvtv-db-width-3,
  .dvtv-db-grid > .dvtv-db-card.dvtv-db-width-full {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }
}

/* 一覧表示は幅上限を無視して常に読みやすい全幅リスト */
.dvtv-db-wrap[data-view="list"] .dvtv-db-grid.dvtv-db-grid-capped {
  width: 100% !important;
  max-width: none !important;
}

/* ============================================================
 * v1.7.8 - 実用カード情報レイアウト
 * アイコン横にタイトル（最大2行）、説明はその下に最大3行。
 * サイズ変更時も配置ルールを共通化してバランスを崩しにくくする。
 * ============================================================ */
.dvtv-db-wrap .dvtv-db-card.dvtv-db-shape-rect > .dvtv-db-card-inner,
.dvtv-db-wrap .dvtv-db-card.dvtv-db-shape-ribbon > .dvtv-db-card-inner,
.dvtv-db-wrap .dvtv-db-card.dvtv-db-shape-outline > .dvtv-db-card-inner,
.dvtv-db-wrap .dvtv-db-card.dvtv-db-shape-pill > .dvtv-db-card-inner {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  grid-template-areas:
    "icon title"
    "desc desc" !important;
  column-gap: 11px !important;
  row-gap: 8px !important;
  align-items: center !important;
}
.dvtv-db-wrap .dvtv-db-card.dvtv-db-shape-rect .dvtv-db-card-icon,
.dvtv-db-wrap .dvtv-db-card.dvtv-db-shape-ribbon .dvtv-db-card-icon,
.dvtv-db-wrap .dvtv-db-card.dvtv-db-shape-outline .dvtv-db-card-icon,
.dvtv-db-wrap .dvtv-db-card.dvtv-db-shape-pill .dvtv-db-card-icon {
  grid-area: icon;
  align-self: center;
  margin: 0 !important;
}
.dvtv-db-wrap .dvtv-db-card.dvtv-db-shape-rect .dvtv-db-card-body,
.dvtv-db-wrap .dvtv-db-card.dvtv-db-shape-ribbon .dvtv-db-card-body,
.dvtv-db-wrap .dvtv-db-card.dvtv-db-shape-outline .dvtv-db-card-body,
.dvtv-db-wrap .dvtv-db-card.dvtv-db-shape-pill .dvtv-db-card-body {
  display: contents !important;
  padding: 0 !important;
}
.dvtv-db-wrap .dvtv-db-card.dvtv-db-shape-rect .dvtv-db-card-title,
.dvtv-db-wrap .dvtv-db-card.dvtv-db-shape-ribbon .dvtv-db-card-title,
.dvtv-db-wrap .dvtv-db-card.dvtv-db-shape-outline .dvtv-db-card-title,
.dvtv-db-wrap .dvtv-db-card.dvtv-db-shape-pill .dvtv-db-card-title {
  grid-area: title;
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis;
  line-height: 1.32 !important;
  font-weight: 800 !important;
  margin: 0 !important;
  padding-right: 24px !important;
  align-self: center;
}
.dvtv-db-wrap .dvtv-db-card.dvtv-db-shape-rect .dvtv-db-card-desc,
.dvtv-db-wrap .dvtv-db-card.dvtv-db-shape-ribbon .dvtv-db-card-desc,
.dvtv-db-wrap .dvtv-db-card.dvtv-db-shape-outline .dvtv-db-card-desc,
.dvtv-db-wrap .dvtv-db-card.dvtv-db-shape-pill .dvtv-db-card-desc {
  grid-area: desc;
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3 !important;
  overflow: hidden !important;
  line-height: 1.48 !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}
/* サイズごとにレイアウトを変えず、余白と文字の強弱だけを穏やかに変える */
.dvtv-db-wrap .dvtv-db-card-small.dvtv-db-shape-rect,
.dvtv-db-wrap .dvtv-db-card-small.dvtv-db-shape-ribbon,
.dvtv-db-wrap .dvtv-db-card-small.dvtv-db-shape-outline,
.dvtv-db-wrap .dvtv-db-card-small.dvtv-db-shape-pill {
  --db-card-h: 88px;
  padding: 11px 13px !important;
}
.dvtv-db-wrap .dvtv-db-card-small .dvtv-db-card-desc { display: -webkit-box !important; }
.dvtv-db-wrap .dvtv-db-card-normal.dvtv-db-shape-rect,
.dvtv-db-wrap .dvtv-db-card-normal.dvtv-db-shape-ribbon,
.dvtv-db-wrap .dvtv-db-card-normal.dvtv-db-shape-outline,
.dvtv-db-wrap .dvtv-db-card-normal.dvtv-db-shape-pill {
  --db-card-h: 102px;
  padding: 13px 15px !important;
}
.dvtv-db-wrap .dvtv-db-card-large.dvtv-db-shape-rect,
.dvtv-db-wrap .dvtv-db-card-large.dvtv-db-shape-ribbon,
.dvtv-db-wrap .dvtv-db-card-large.dvtv-db-shape-outline,
.dvtv-db-wrap .dvtv-db-card-large.dvtv-db-shape-pill {
  --db-card-h: 112px;
  padding: 14px 17px !important;
}
.dvtv-db-wrap .dvtv-db-card-featured.dvtv-db-shape-rect,
.dvtv-db-wrap .dvtv-db-card-featured.dvtv-db-shape-ribbon,
.dvtv-db-wrap .dvtv-db-card-featured.dvtv-db-shape-outline,
.dvtv-db-wrap .dvtv-db-card-featured.dvtv-db-shape-pill {
  --db-card-h: 124px;
  padding: 16px 18px !important;
}
.dvtv-db-wrap .dvtv-db-card-featured.dvtv-db-shape-rect > .dvtv-db-card-inner,
.dvtv-db-wrap .dvtv-db-card-featured.dvtv-db-shape-ribbon > .dvtv-db-card-inner,
.dvtv-db-wrap .dvtv-db-card-featured.dvtv-db-shape-outline > .dvtv-db-card-inner,
.dvtv-db-wrap .dvtv-db-card-featured.dvtv-db-shape-pill > .dvtv-db-card-inner {
  grid-template-columns: auto minmax(0, 1fr) !important;
  grid-template-areas: "icon title" "desc desc" !important;
}
.dvtv-db-wrap .dvtv-db-card-large .dvtv-db-card-title,
.dvtv-db-wrap .dvtv-db-card-featured .dvtv-db-card-title {
  font-size: calc(var(--db-fs-card-title) + 1px) !important;
  margin: 0 !important;
}
.dvtv-db-wrap .dvtv-db-card-large .dvtv-db-card-desc,
.dvtv-db-wrap .dvtv-db-card-featured .dvtv-db-card-desc {
  font-size: var(--db-fs-card-desc) !important;
  -webkit-line-clamp: 3 !important;
}

/* ============================================================
 * v1.7.8 - ショートコードポップアップの閉じるボタン
 * 赤系の明確な色＋「閉じる」文字付き。タイトル非表示でも見失わない。
 * ============================================================ */
.dvtv-db-wrap .dvtv-db-sc-close.dvtv-db-sc-close-primary {
  width: auto !important;
  min-width: 88px !important;
  height: 42px !important;
  padding: 0 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  border: 1px solid rgba(185,28,28,.28) !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg,#ef4444,#dc2626) !important;
  color: #fff !important;
  box-shadow: 0 7px 18px rgba(220,38,38,.24), inset 0 1px 0 rgba(255,255,255,.28) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  opacity: 1 !important;
}
.dvtv-db-wrap .dvtv-db-sc-close.dvtv-db-sc-close-primary:hover {
  background: linear-gradient(135deg,#dc2626,#b91c1c) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 9px 22px rgba(185,28,28,.3), inset 0 1px 0 rgba(255,255,255,.25) !important;
}
.dvtv-db-wrap .dvtv-db-sc-close.dvtv-db-sc-close-primary:focus-visible {
  outline: 3px solid rgba(248,113,113,.38) !important;
  outline-offset: 2px !important;
}
.dvtv-db-sc-close-label { display: inline-block; }
.dvtv-db-sc-popup-head.no-title { right: 12px; top: 12px; }
.dvtv-db-sc-popup-head.no-title + .dvtv-db-sc-popup-body { padding-top: 66px; }
.dvtv-db-wrap[data-theme="dark"] .dvtv-db-sc-close.dvtv-db-sc-close-primary {
  background: linear-gradient(135deg,#ef4444,#b91c1c) !important;
  color:#fff !important;
  border-color:rgba(248,113,113,.32) !important;
}
@media (max-width: 480px) {
  .dvtv-db-wrap .dvtv-db-sc-close.dvtv-db-sc-close-primary {
    min-width: 46px !important;
    width: 46px !important;
    padding: 0 !important;
  }
  .dvtv-db-sc-close-label { display:none; }
}
.dvtv-db-wrap .dvtv-db-card.dvtv-db-shape-rect:not(:has(.dvtv-db-card-desc)) > .dvtv-db-card-inner,
.dvtv-db-wrap .dvtv-db-card.dvtv-db-shape-ribbon:not(:has(.dvtv-db-card-desc)) > .dvtv-db-card-inner,
.dvtv-db-wrap .dvtv-db-card.dvtv-db-shape-outline:not(:has(.dvtv-db-card-desc)) > .dvtv-db-card-inner,
.dvtv-db-wrap .dvtv-db-card.dvtv-db-shape-pill:not(:has(.dvtv-db-card-desc)) > .dvtv-db-card-inner {
  grid-template-areas: "icon title" !important;
  grid-template-rows: auto !important;
  row-gap: 0 !important;
}
/* v1.9.0: ダイアログの見出しをテーマ装飾から独立させ、上部をコンパクトに。 */
.dvtv-db-wrap .dvtv-db-sc-popup-box > .dvtv-db-sc-popup-head {
  position: relative !important;
  inset: auto !important;
  box-sizing: border-box !important;
  min-height: 48px !important;
  padding: 4px 8px 4px 12px !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}
.dvtv-db-wrap .dvtv-db-sc-popup-box > .dvtv-db-sc-popup-head.no-title { justify-content: flex-end; }
.dvtv-db-wrap .dvtv-db-sc-popup-box > .dvtv-db-sc-popup-head > h2 {
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  font-size: calc(17px * var(--db-scale, 1)) !important;
  line-height: 1.3 !important;
  font-weight: 800 !important;
}
.dvtv-db-wrap .dvtv-db-sc-popup-head > h2::before,
.dvtv-db-wrap .dvtv-db-sc-popup-head > h2::after { content: none !important; }
.dvtv-db-wrap .dvtv-db-sc-popup-box > .dvtv-db-sc-popup-body { padding: 6px 8px 8px !important; }
.dvtv-db-wrap .dvtv-db-sc-popup-box > .dvtv-db-sc-popup-head > .dvtv-db-sc-close-primary {
  min-height: 38px !important;
  height: 38px !important;
  padding: 6px 12px !important;
  flex-shrink: 0;
}
.dvtv-db-wrap .dvtv-db-sc-popup-head .dvtv-db-sc-close-label { display: inline-block !important; }
.dvtv-db-wrap .dvtv-db-sc-size-full { width: calc(100vw - 16px); }
.dvtv-db-wrap .dvtv-db-sc-height-full { height: calc(100dvh - 16px); max-height: calc(100dvh - 16px); }
.dvtv-db-wrap .dvtv-db-sc-popup:has(> .dvtv-db-sc-size-full),
.dvtv-db-wrap .dvtv-db-sc-popup:has(> .dvtv-db-sc-height-full) { padding: 8px; }

/* v1.10.1: 単一画面用の業務プラグインを独立文書で読み込む。 */
.dvtv-db-sc-frame-region { position:relative; display:flex; width:100%; height:78vh; height:78dvh; min-height:260px; }
.dvtv-db-sc-frame { display:block; flex:1 1 auto; width:100%; height:100%; min-width:0; border:0; background:#f7f9fc; }
.dvtv-db-sc-frame-loading { position:absolute; inset:0; display:grid; place-items:center; padding:16px; background:#f7f9fc; color:#334155; font:700 14px/1.5 system-ui,sans-serif; }
.dvtv-db-sc-frame-loading[hidden] { display:none; }
.dvtv-db-sc-popup-box:has(.dvtv-db-sc-frame-region) > .dvtv-db-sc-popup-body { display:flex; flex:1 1 auto; min-height:0; overflow:hidden; }
.dvtv-db-sc-popup-box .dvtv-db-sc-frame-region { flex:1 1 auto; height:100%; min-height:0; }
.dvtv-db-sc-popup-box.dvtv-db-sc-height-auto:has(.dvtv-db-sc-frame-region) { height:85vh; height:85dvh; }
body.dvtv-db-screen-embedded { margin:0!important; padding:0!important; }
body.dvtv-db-screen-embedded > .dvtv-db-screen-content { padding:0!important; max-width:none!important; }

/* v1.10.2: 専用文書内だけで管理者バーとPC・モバイル用の上部余白を解除。 */
html.dvtv-db-screen-document { margin-top:0!important; padding-top:0!important; }
html.dvtv-db-screen-document #wpadminbar { display:none!important; }

/* 別タブ専用画面。登録済みショートコード側の内部デザインには手を加えない。 */
body.dvtv-db-screen-page {
  --db-scale: 1;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100vh;
  background: #f4f7fc;
  color: #0f172a;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.dvtv-db-screen-page > .dvtv-db-screen-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 4px 12px;
  box-sizing: border-box;
  background: #eff6ff;
  border-bottom: 1px solid #bfdbfe;
}
.dvtv-db-screen-page > .dvtv-db-screen-head h1 {
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  font: 800 18px/1.3 system-ui, sans-serif !important;
  color: #0f172a !important;
}
.dvtv-db-screen-page > .dvtv-db-screen-head h1::before,
.dvtv-db-screen-page > .dvtv-db-screen-head h1::after { content: none !important; }
.dvtv-db-screen-head > a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 9px;
  background: #1d4ed8;
  color: #fff !important;
  font: 700 14px/1.2 system-ui, sans-serif;
  text-decoration: none;
  white-space: nowrap;
}
.dvtv-db-screen-page > .dvtv-db-screen-content {
  margin: 0;
  padding: 6px 8px 8px;
  max-width: none;
  min-width: 0;
}