.dh-wrap { --card:#0f172a; --fg:#e2e8f0; --muted:#94a3b8; --bar:#0b1220; --accent:#10b981; font-family: var(--font, system-ui,-apple-system,Segoe UI,Roboto); color: var(--fg); }
#dh-app { max-width: 980px; margin: 0 auto; padding: 16px; }
.dh-row { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 900px){ .dh-row{ grid-template-columns: 1fr 1fr; } }
.dh-card { background: linear-gradient(180deg, rgba(30,41,59,.6), rgba(2,6,23,.8)), var(--card); border: 1px solid #1f2937; border-radius: 16px; padding: 16px; }
.dh-title { font-size: 26px; font-weight: 700; margin: 0 0 8px; }
.dh-sub { color: var(--muted); margin: 0 0 16px; }
.dh-progress { height: 12px; background:var(--bar); border-radius: 999px; overflow: hidden; }
.dh-progress > div { height:100%; background: var(--accent); width:0; transition: width .3s ease; }
.dh-list { display: grid; gap: 12px; }
.dh-item { background: rgba(2,6,23,.6); border:1px solid #263244; border-radius: 12px; padding: 12px; }
.dh-flex { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dh-badge { font-size: 12px; color: var(--muted); }
.dh-btn { background:#0f172a; border:1px solid #334155; color:#e2e8f0; border-radius:10px; padding:6px 10px; cursor:pointer; }
.dh-btn:hover{ background:#111827; }
.dh-input { background:#0b1220; color:#e2e8f0; border:1px solid #334155; border-radius:10px; padding:6px 10px; }
.dh-textarea { width:100%; min-height: 120px; }
.dh-muted { color: var(--muted); font-size: 12px; }
.dh-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.dh-leader { list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.dh-hero { text-align: center; position: relative; }
.dh-hero img { display: block; margin: 0 auto; max-width: 100%; border-radius: 12px; }
.dh-wide { grid-column: 1 / -1; }

/* 円グラフ */
.dh-pie-wrap { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.dh-pie { display:block; background:#0b1220; border-radius:12px; }
.dh-legend { display:grid; gap:8px; min-width:200px; }
.dh-legend-item { display:flex; align-items:center; gap:8px; }
.dh-dot { display:inline-block; width:12px; height:12px; border-radius:50%; border:1px solid #263244; }

/* 大きい数値 */
.dh-stats { font-size: 22px; font-weight: 700; margin-top: 10px; }

/* カウントダウン＆終了後 */
.dh-count { margin-top: 8px; color: #c7f9ff; font-weight: 600; }
.dh-endmsg { margin-top: 8px; font-weight: 700; color: #ffd166; }

/* 演出（ヒビ＆光） */
.dh-hero .dh-hero-wrap { position: relative; display: inline-block; }
.dh-hero .dh-glow { position:absolute; inset:0; border-radius:12px; pointer-events:none; opacity:0; box-shadow:0 0 40px 10px rgba(255,255,255,.5) inset, 0 0 80px rgba(255,255,255,.5); transition: opacity .6s ease; }
.dh-hero .dh-crack { position:absolute; inset:0; border-radius:12px; pointer-events:none; background:
  radial-gradient(circle at 50% 50%, rgba(255,255,255,.6), transparent 60%),
  repeating-linear-gradient(60deg, rgba(255,255,255,.7) 0 2px, transparent 2px 6px);
  opacity:0; mix-blend-mode:screen; transition: opacity .4s ease; }
.dh-hero.dh-cracking .dh-glow { opacity: .65; }
.dh-hero.dh-cracking .dh-crack { opacity: .8; }

/* 花吹雪Canvas */
.dh-confetti{ position:absolute; left:0; right:0; top:0; height:100%; pointer-events:none; border-radius:12px; }

/* weekly bar chart */
.dh-bars { display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.dh-bar-row { position:relative; border-radius:12px; overflow:hidden; background: rgba(15,23,42,.35); }
.dh-bar-fill { position:absolute; left:0; top:0; bottom:0; width:0; background: var(--accent, #22c55e); opacity:.35; transition: width .6s ease; }
.dh-bar-inner { padding:10px 12px; position:relative; z-index:1; }
.dh-bar-label { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:70%; }
.dh-bar-val { font-variant-numeric: tabular-nums; }