:root{
  --dmq-bg:#0f172a;           /* slate-900 */
  --dmq-card:#ffffff;
  --dmq-muted:#64748b;        /* slate-500 */
  --dmq-border:#e5e7eb;       /* gray-200 */
  --dmq-primary:#2563eb;      /* blue-600 */
  --dmq-primary-dark:#1e40af; /* blue-800 */
  --dmq-success:#16a34a;      /* green-600 */
  --dmq-success-dark:#166534; /* green-800 */
  --dmq-shadow:0 10px 25px rgba(2,6,23,.08);
}

.dmq{
  max-width: 860px;
  margin: 24px auto;
  padding: 0 12px;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

.dmq__header{
  background: radial-gradient(110% 110% at 0% 0%, #1e293b 0%, #0b1220 100%);
  color:#e2e8f0;
  border-radius: 18px;
  padding: 22px 22px;
  box-shadow: var(--dmq-shadow);
  margin-bottom: 14px;
}
.dmq__title{ font-size: 1.35rem; font-weight: 700; letter-spacing:.2px; }
.dmq__subtitle{ color:#cbd5e1; margin-top:6px; font-size:.98rem; }

.dmq__questions{
  background: var(--dmq-card);
  border:1px solid var(--dmq-border);
  border-radius: 16px;
  padding: 16px;
  box-shadow: var(--dmq-shadow);
}

.dmq-question{
  border:1px solid var(--dmq-border);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
  transition: border-color .2s, box-shadow .2s, transform .08s;
}
.dmq-question:hover{ border-color:#d1d5db; box-shadow:0 4px 12px rgba(0,0,0,.04); }

.dmq-q{
  font-weight: 600;
  color:#0f172a;
  margin-bottom: 10px;
}

.dmq-option{
  display:flex; align-items:center; gap:10px;
  padding: 10px 12px;
  border:1px solid var(--dmq-border);
  border-radius:10px;
  margin-bottom:8px;
  cursor:pointer;
  transition: background .15s, border-color .15s;
}
.dmq-option:hover{ background:#f8fafc; border-color:#dbeafe; }
.dmq-option input[type="radio"]{ accent-color: var(--dmq-primary); transform: scale(1.05); }

.dmq__actions{
  display:flex; gap:10px; flex-wrap:wrap;
  justify-content:flex-end;
  padding: 12px 2px;
}

.dmq-btn{
  appearance:none; border:none; cursor:pointer;
  padding:12px 18px; border-radius:12px; font-weight: 600; font-size: .98rem;
  box-shadow: var(--dmq-shadow);
  transition: transform .05s, background .2s;
}
.dmq-btn:active{ transform: translateY(1px); }

.dmq-btn--primary{ background:var(--dmq-primary); color:#fff; }
.dmq-btn--primary:hover{ background:var(--dmq-primary-dark); }

.dmq-btn--success{ background:var(--dmq-success); color:#fff; }
.dmq-btn--success:hover{ background:var(--dmq-success-dark); }

.is-hidden{ display:none !important; }

.dmq__result{
  margin-top: 14px;
  background: #f8fafc;
  border: 1px solid var(--dmq-border);
  border-radius: 16px;
  padding: 18px;
  box-shadow: var(--dmq-shadow);
  text-align: center;
}

.dmq-score{
  font-size: 1.1rem; color:#0f172a; margin:0;
}
.dmq-grade{
  display:inline-block;
  margin-top:8px; font-size:1.1rem; font-weight:800;
  padding:6px 12px; border-radius:999px;
}
.dmq-grade--a{ background:#dcfce7; color:#166534; }
.dmq-grade--b{ background:#dbeafe; color:#1e3a8a; }
.dmq-grade--c{ background:#fee2e2; color:#991b1b; }
.dmq-grade--d{ background:#fff7ed; color:#9a3412; }
.dmq-grade--f{ background:#f1f5f9; color:#0f172a; }

.dmq-share{
  margin-top: 12px;
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
}
.dmq-share a{
  text-decoration:none; font-weight:600; font-size:.95rem;
  padding:9px 14px; border-radius:12px; border:1px solid var(--dmq-border);
  background:#fff; color:#0f172a;
}
.dmq-share a:hover{ background:#f8fafc; border-color:#d1d5db; }

.dmq-share .tw{ color:#0ea5e9; }
.dmq-share .fb{ color:#2563eb; }
.dmq-share .li{ color:#0a66c2; }
.dmq-share .wa{ color:#16a34a; }

@media (max-width:640px){
  .dmq__actions{ justify-content:stretch; }
  .dmq-btn{ width:100%; }
}